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


Cara Membuat Plugin Fanspage Facebook Valid AMP DiBlogger

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


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;
  2. <script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>

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

  8. Versi 2, Menggunakan Cover Normal
  9. <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>

TagKeterangan
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.
Related Post
Comment Post