Pelajari cara menyertakan komponen pihak ketiga di laman.

Menyematkan Tweet

Sematkan Tweet Twitter di laman menggunakan elemen amp-twitter.

Untuk menyertakan tweet di laman, sertakan dahulu skrip berikut di <head>:

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

Tweet saat ini 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.

Show full code

Menyematkan Instagram

Sematkan Instagram di laman menggunakan elemen amp-instagram

Untuk menyertakan Instagram, sertakan dahulu skrip berikut di <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. Misalnya, pada https://instagram.com/p/fBwFP, fBwFP adalah data-shortcode-nya. Instagram juga menggunakan rasio aspek tetap untuk tata letak responsif, sehingga nilai lebar dan tinggi harus universal

Show full code

Menampilkan pos atau video Facebook

Tampilkan pos atau video Facebook di laman menggunakan elemen amp-facebook.

Anda harus menyertakan skrip berikut di <head>:

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

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:

Menyertakan video youtube

Sertakan video youtube di laman menggunakan elemen amp-youtube.

Anda harus menyertakan skrip berikut di <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 laman video Youtube. Misalnya, pada 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:

Show full code

Menampilkan iklan

Tampilkan iklan di laman 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, waktu proses AMP memuat iframe dari asal yang berbeda (melalui kotak pasir iframe) dan menjalankan JavaScript jaringan iklan dalam kotak pasir iframe tersebut.

Anda harus menentukan lebar, tinggi, dan jenis jaringan iklan. type mengidentifikasi template jaringan iklan. Jenis iklan yang berbeda membutuhkan atribut data-* yang berbeda.

Show full code

Jika didukung oleh jaringan iklan, sertakan placeholder untuk ditampilkan jika tidak ada iklan yang tersedia:

Show full code

AMP mendukung berbagai jaringan iklan. Lihat referensi daftar lengkap.