Menyertakan konten pihak ketiga
Pelajari cara menyertakan komponen pihak ketiga di halaman Anda.
Menyematkan Tweet
Sematkan Tweet Twitter di halaman Anda dengan menggunakan elemen amp-twitter.
Untuk menyertakan tweet di halaman Anda, sertakan dahulu skrip berikut ini dalam <head>:
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
Saat ini, tweet otomatis diskalakan secara proporsional agar sesuai dengan ukuran yang disediakan, namun tindakan ini dapat menghasilkan tampilan yang kurang ideal. Sesuaikan lebar dan tinggi yang diberikan secara manual atau gunakan atribut media untuk memilih rasio aspek berdasarkan lebar layar.
<amp-twitter
width="500"
height="583"
layout="responsive"
data-tweetid="638793490521001985"
>
</amp-twitter>
amp-twitter di AMP Berdasarkan Contoh. Menyematkan Instagram
Sematkan Instagram di halaman Anda dengan menggunakan elemen amp-instagram.
Untuk menyertakan Instagram, sertakan dahulu skrip berikut ini dalam <head>:
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
Sertakan data-shortcode Instagram yang ditemukan di URL foto Instagram. Contoh: di https://instagram.com/p/fBwFP, fBwFP adalah data-shortcode-nya. Selain itu, Instagram menggunakan rasio aspek tetap untuk tata letak responsif, sehingga nilai lebar dan tinggi harus bersifat universal.
<amp-instagram
data-shortcode="fBwFP"
width="320"
height="392"
layout="responsive"
>
</amp-instagram>
amp-instagram di AMP Berdasarkan Contoh. Menampilkan muatan/berita atau video Facebook
Tampilkan muatan/berita atau video Facebook di halaman Anda dengan menggunakan elemen amp-facebook.
Anda harus menyertakan skrip berikut ini dalam <head>:
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
Contoh: Menyematkan muatan/berita
Sumber:
<amp-facebook
width="486"
height="657"
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791"
>
</amp-facebook>
Pratinjau:
Contoh: Menyematkan video
Sumber:
<amp-facebook
width="476"
height="316"
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/nasaearth/videos/10155187938052139"
>
</amp-facebook>
Pratinjau:
amp-facebook di AMP Berdasarkan Contoh. Menyematkan video YouTube
Sertakan video YouTube di halaman Anda dengan menggunakan elemen amp-youtube.
Anda harus menyertakan skrip berikut ini dalam <head>:
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
data-videoid YouTube dapat ditemukan di setiap URL halaman video YouTube. Contoh: di https://www.youtube.com/watch?v=Z1q71gFeRqM, Z1q71gFeRqM adalah ID videonya.
Gunakan layout="responsive" guna menghasilkan tata letak yang benar untuk video dengan rasio aspek 16:9:
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="560"
height="315"
>
</amp-youtube>
amp-youtube di AMP Berdasarkan Contoh. Menampilkan iklan
Tampilkan iklan di halaman Anda dengan menggunakan elemen amp-ad. Hanya iklan yang ditayangkan melalui HTTPS yang didukung.
Tidak ada JavaScript yang disediakan jaringan iklan yang diizinkan untuk berjalan di dalam dokumen AMP. Sebagai gantinya, runtime AMP memuat iframe dari asal yang berbeda (melalui sandbox iframe) dan menjalankan JavaScript jaringan iklan di dalam sandbox iframe tersebut.
Anda harus menentukan lebar, tinggi, dan jenis jaringan iklan. type mengidentifikasi templat jaringan iklan. Jenis iklan yang berbeda membutuhkan atribut data-* yang berbeda.
<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>
Jika didukung oleh jaringan iklan, sertakan placeholder yang akan ditampilkan jika tidak ada iklan yang tersedia:
<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>
AMP mendukung berbagai jaringan iklan. Kunjungi amp-ad untuk melihat daftar lengkap.