AMP

Üçüncü Taraf İçeriği Ekleme

Important: this documentation is not applicable to your currently selected format ads!

Sayfalarınıza üçüncü taraf bileşenlerini nasıl ekleyeceğinizi öğrenin.

Tweet Yerleştirme

amp-twitter öğesini kullanarak bir Twitter Tweet'ini sayfanıza yerleştirebilirsiniz.

Sayfanıza tweet eklemek için öncelikle aşağıdaki komut dosyasını <head> bölümüne ekleyin:

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

Şu anda tweet'ler, sağlanan boyuta sığmaları için otomatik olarak belirli bir oranda ölçeklenmektedir, ancak bu ideal bir görünüm sağlamayabilir. Sağlanan genişliği ve yüksekliği manuel olarak değiştirebilir veya en boy oranını, ekran genişliğine göre seçmek için medya özniteliğini kullanabilirsiniz.

<amp-twitter width="500"
  height="583"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>
Bu kod parçacığını playground'ta aç

Instagram Fotoğrafı Yerleştirme

amp-instagram öğesini kullanarak bir Instagram fotoğrafını sayfanıza yerleştirebilirsiniz.

Bir Instagram fotoğrafını sayfanıza eklemek için öncelikle aşağıdaki komut dosyasını <head> bölümüne ekleyin:

<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>

Instagram fotoğrafı URL'sinde bulunan Instagram kısa veri kodunu ekleyin. Örneğin, https://instagram.com/p/fBwFP URL'sindeki fBwFP, veri kısa kodudur. Ayrıca, Instagram duyarlı düzenler için sabit bir en boy oranı kullanır. Bu yüzden, genişlik ve yükseklik değeri evrensel olmalıdır

<amp-instagram data-shortcode="fBwFP"
  width="320"
  height="392"
  layout="responsive">
</amp-instagram>
Bu kod parçacığını playground'ta aç

Facebook yayını veya videosu gösterme

amp-facebook öğesini kullanarak bir Facebook yayınını veya videosunu sayfanızda gösterebilirsiniz.

Aşağıdaki komut dosyasını <head> bölümüne eklemeniz gerekir:

<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
Örnek - Yayın yerleştirme

Source:

<amp-facebook width="486" height="657"
    layout="responsive"
    data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>

Preview:

Örnek - Video yerleştirme

Source:

<amp-facebook width="476" height="316"
    layout="responsive"
    data-embed-as="video"
    data-href="https://www.facebook.com/nasaearth/videos/10155187938052139">
</amp-facebook>

Preview:

YouTube videosu ekleme

amp-youtube öğesini kullanarak bir YouTube videosunu sayfanıza ekleyebilirsiniz.

Aşağıdaki komut dosyasını <head> bölümüne eklemeniz gerekir:

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Youtube data-videoid kodunu her YouTube video sayfası URL'sinde bulabilirsiniz. Örneğin, https://www.youtube.com/watch?v=Z1q71gFeRqM URL'sinin Z1q71gFeRqM kısmı, video kimliğini belirtmektedir.

16:9 en boy oranlı videolar için doğru düzenleri sağlamak üzere layout="responsive" kodunu kullanın:

<amp-youtube data-videoid="lBTCB7yLs8Y"
  layout="responsive"
  width="560"
  height="315">
</amp-youtube>
Bu kod parçacığını playground'ta aç

Reklam gösterme

amp-ad öğesini kullanarak sayfanızda bir reklam gösterin. Yalnızca HTTPS aracılığıyla sunulan reklamlar desteklenir.

Reklam ağları tarafından sağlanan JavaScript'in AMP dokümanı içinde çalıştırılmasına izin verilmez. Bunun yerine, AMP çalışma zamanı farklı bir kaynaktan (iframe korumalı alanı aracılığıyla) bir iframe yükler ve reklam ağının JS'sini o iframe korumalı alanı içinde yürütür.

Reklam genişliği ve yüksekliği ile reklam ağı türünü belirtmeniz gerekir. type, reklam ağının şablonunu tanımlar. Farklı reklam türleri, farklı data-* öznitelikleri gerektirir.

<amp-ad width="300"
  height="250"
  type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5">
</amp-ad>
Bu kod parçacığını playground'ta aç

Reklam ağı tarafından destekleniyorsa, kullanılabilir reklam olmadığında gösterilmesi için bir placeholder ekleyin:

Have a great day!
<amp-ad width="300"
  height="250"
  type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5">
  <div placeholder>Have a great day!</div>
</amp-ad>
Bu kod parçacığını playground'ta aç

AMP, çok çeşitli reklam ağlarını destekler. Tam liste için referansa bakın.