Cara Embed Status dan Video Facebook Pada Blog AMP

Sebelumya, saya sudah membagikan artikel tentang Cara Memasang Like Facebook (Facebook Like Box) Pada Blog AMP HTML. Dan pada kesempatan kali ini, saya akan mencoba membagikan artikel yang berjudul Cara Embed Status Dan Video Facebook Pada Blog AMP.

Untuk bisa embed atau menampilkan status dan video facebook pada postingan blog AMP, caranya cukup mudah. Jika Anda penasaran, langsung saja ikuti caranya seperti dibawah ini.

Langkah pertama.

Di dalam template blog Anda harus sudah tersimpan js amp-facebook pada tag head. Jika di template blog Anda belum tersimpan js amp-facebook, silakan copy script nya dibawah ini dan simpan diatas kode </head>

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


Langkah kedua.

Contoh, untuk menampilkan status Facebook di postingan blog AMP, gunakan kode dibawah ini.
<amp-facebook width="552"
      height="303"
      layout="responsive"
      data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>

Ganti zuck dengan ID profile facebook Anda sendiri, dan ganti 10102593740125791 dengan ID status facebook Anda yang akan di tampilkan pada postingan blog.
Layout yang support: fill, fixed, fixed-height, flex-item, nodisplay, responsive.
Ini adalah hasil contoh kode diatas.



Contoh, untuk menampilkan video facebook pada postingan blog AMP, gunakan kode di bawah ini.
<amp-facebook width="552"
      height="303"
      layout="responsive"
      data-href="https://www.facebook.com/zuck/posts/10102509264909801">
</amp-facebook>

Ganti zuck dengan ID profile facebook Anda sendiri, dan ganti 10102593740125791 dengan ID video facebook Anda yang akan di tampilkan pada postingan blog.
Ini adalah hasil contoh kode diatas.



jika ingin hanya tampil video saja dan responsive, tambahkan kode data-embed-as="video"
kode selengkapnya jadi seperti ini.
<amp-facebook width="552"
      height="303"
      layout="responsive"
      data-embed-as="video"
      data-href="https://www.facebook.com/zuck/posts/10102509264909801">
</amp-facebook>

Ini adalah hasil contoh dari kode diatas setelah di tambah kode data-embed-as="video"



Demikian artikel tentang Cara Embed Setatus dan Video Facebook Pada Blog AMP.
Jika setelah pemasangan kode diatas menyebabkan warning pada AMP Validator, silakan simak artikel tentang Cara Mengatasi Warning Dari JS-JS AMP Pada AMP Validator.
Semoga bermanfaat.

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser