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.

Show full code

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

Show full code

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:

Show full code

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.

Show full code

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

Show full code

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