Cara Mudah Memasang Komentar Facebook Di Blog Valid AMP HTML

by

Cara Mudah Memasang Komentar Facebook Di Blog Valid AMP HTMLCara Mudah Memasang Komentar Facebook Di Blog Valid AMP HTML Sebelumnya saya juga pernah membahas Tentang Cara Memasang Komentar Disqus Show Hide . Sekarang saya akan menjelaskan tentang Cara memasang Komentar Facebook Pada Blog Amp yang sudah valid amp.

Jika sebelumnya kita hanya mengetahui bahwa hanya komentar disqus saja yang support AMP, namun kini komentar facebook pun sudah bisa dipasang di blog yang berbasiskan AMP. Caranya memasang komentar facebook pun cukup mudah.

Cara Memasang Komentar Facebook valid AMP pada Blog

Berikut cara memasang komentar facebook pada blog yang sudah valid AMP HTML.Simak langkah demi langkahnya agar tidak salah dalam memasangnya.

  • Langkah Pertama, silahkan anda copy kode HTML dibawah ini. 

                <b:includable id='fb-comment' var='post'>
    <div class='fb-comments' id='fb_comments'>
    <amp-facebook-comments data-colorscheme='dark' data-numposts='5' expr:data-href='data:post.url' height='180' layout='responsive' width='600'>
    </amp-facebook-comments>
    </div>
                </b:includable>

  • Kemudian letakkan kode HTML tersebut di bawah kode Seperti berikut ini: 

    <b:includable id='comments' var='post'>

    ............

    ............

    ............

    </b:includable>

    Sehingga tampilannya akan seperti berikut:


    <b:includable id='comments' var='post'>

    ............

    ............

    ............

    </b:includable>
                <b:includable id='fb-comment' var='post'>
    <div class='fb-comments' id='fb_comments'>
    <amp-facebook-comments data-colorscheme='dark' data-numposts='5' expr:data-href='data:post.url' height='180' layout='responsive' width='600'>
    </amp-facebook-comments>
    </div>
                </b:includable>

    Jika background blog anda terang atau light, silahkan hapus kode data-colorscheme='dark' pada kode di atas

  • Langkah kedua, silahkan copy kode dibawah ini : 

    <b:include cond='data:blog.pageType == &quot;item&quot;' data='post' name='fb-comment'/>

  • Dan letakan tepat di bawah kode berikut seperti dibawah ini: 

    <b:include data='post' name='post'/>

  • Langkah ketiga, silahkan simpan kode meta di bawah ini di atas kode </head> 

    <meta content='xxxxxxxxxxxxxxx' property='fb:admins'/>
    <meta content='xxxxxxxxxxxxxxx' property='fb:profile_id'/>

    Silahkan anda Ganti xxxxxxxxxxxxxxx untuk fb:admins dengan ID fans page blog Anda dan xxxxxxxxxxxxxxx untuk fb:profile_id dengan ID profile Facebook anda.

  • Langkah keempat atau terakhir, silahkan simpan kode berikut di atas kode </head> 

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script async='async' custom-element='amp-facebook-comments' src='https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js'/>
    </b:if>

    Selesai, sekarang blog AMP anda sudah ada komentar facebooknya yang tentunya tetap valid Amp.

    Mungkin hanya itu saja untuk cara memasang komentar facebook valid AMP di blog. Semoga bermanfaat.

    • Leave a Comment