AMP

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>
Buka cuplikan ini di playground

KIAT – Lihat lebih banyak contoh 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>
Buka cuplikan ini di playground

KIAT – Lihat lebih banyak contoh 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:

KIAT – Lihat lebih banyak contoh 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>
Buka cuplikan ini di playground

KIAT – Lihat lebih banyak contoh 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>
Buka cuplikan ini di playground

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

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>
Buka cuplikan ini di playground

AMP mendukung berbagai jaringan iklan. Kunjungi amp-ad untuk melihat daftar lengkap.

BACA – Pelajari lebih lanjut tentang iklan di panduan Menayangkan Iklan di AMP.