Membuat Plugin Fanspage Facebook Valid AMP DiBlogger

Kali ini ane membagikan tutorial yang masih ada kaitannya dengan AMP, yaitu Cara Membuat Like box Plugin Facebook Valid AMP DiBlogger. Tutorial sebelumnya ane juga sudah membagikan Cara Membuat Chatango Valid AMP

Artikel ini hanya akan berguna jika kamu menggunakan Template AMP, diblog ini ane juga sudah menyediakan beberapa Template AMP, yaitu :

• Megumin AMP Template Blogger
• Template Blogger Fansub AMP
• Gallery jiul AMP Template Blogger

Membuat Like Box Plugin Fanspage Fb Valid AMP DiBlogger

1. Buka Blogger > Tema > Edit HTML, Pastikan Script amp-iframe berikut ada diatas &lt;/head&gt;&lt;!--<head/>--&gt;

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



2. Jika Sudah ada abaikan
3. Buka Tata Letak > Tambahkan Widget > HTML/Javascript
4. Simpan HTML amp-iframe yang sudah ane sediakan dengan 2 versi berikut
5. Versi 1, Menggunakan Cover Kecil

<amp-iframe width='300'
      height='155'
      sandbox='allow-scripts allow-same-origin allow-modals allow-popups'
      frameborder='0'
      scrolling='no'
      src='https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FArlethDesign%2F&width=300&height=155&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=776730922422337'>
<amp-img width='300' 
    height='155' 
    layout='fill' 
    placeholder='' 
    src='LINK GAMBAR'></amp-img>
</amp-iframe>



6. Versi 2, Menggunakan Cover Normal

<amp-iframe width='300'
      height='215'
      sandbox='allow-scripts allow-same-origin allow-modals allow-popups'
      frameborder='0'
      scrolling='no'
      src='https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FArlethDesign%2F&width=300&height=215&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=776730922422337'>
<amp-img width='300' 
    height='215' 
    layout='fill' 
    placeholder='' 
    src='LINK GAMBAR'></amp-img>
</amp-iframe>

Tag	Keterangan
appId=776730922422337	Ganti 776730922422337 dengan ID Fanspage kamu
ArlethDesign	Ganti Username Page Facebook
src='LINK GAMBAR'	Ganti LINK GAMBAR sesuai Yang diinginkan

Pada Link Gambar atur w300-h155-c & w300-h215-c untuk mengubah lebar dan tingginya.
- Gambar Untuk Versi 1
- Gambar Untuk Versi 2.