Jul 9, 2017

Cara Memasang Komentar Facebook di Blogger

Komentar Facebook responsive di Blogger

Postingan kali ini untuk menjawab permintaan dari sobat Google Plus Ferdy ade yang menanyakan bagaimana Memasang Komentar Facebook Responsive di Blogger, sebenarnya sudah pernah saya posting Cara Pasang Komentar Disqus Blogger dan Facebook di Blog namun bukan khusus Komentar Facebook.

Seperti yang kita ketahui memasang komentar facebook di blogger sangat penting juga untuk memudahkan pengunjung berkomentar dapat melalui account facebook namun bagi yang masih menggunakan templated bawaan Blogger setingan default blogger tidak akan kita temui komentar facebook di templatenya biasanya akan banyak kita temui di templated yang sudah di modifikasi, nah bagi sobat yang mau mencoba Memasang Komentar Facebook Responsive di Blogger mari kita bahas bersama.

Langkah Pertama
Silahkan sobat salin kode HTML untuk Meta Tag Facebook dibawah ini lalu letakkan tepat dibawah <head>, bagi yang sudah pernah memasangnya langkah ini bisa dilewati.

<meta content='Kode ID Facebook admin' property='fb:admins'/>
<meta content='Kode ID Aplikasi Facebook' property='fb:app_id'/>


Langkah Ke Dua
Silahkan sobat salin kode jquery dibawah ini lalu letakkan diatas kode </head>.

<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){
 var url = location.protocol+'//'+location.host+location.pathname;
  var containercm_width = $('#container-commentfb').width(); 
    $('#container-commentfb').html('<div class="fb-comments" ' +
    'data-href="'+url+'"' +
    ' width="' + containercm_width + '" data-num-posts="10"></div>');
    FB.XFBML.parse( ); 
  });
//]]>
</script>


Langkah Ke Tiga
Silahkan sobat salin kode HTML dibawah ini lalu letakkan dibawah kode <data:post.body/> yang lokasinya ada di halaman post.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if>

Perhatikan kembali cara penerapan kodenya, ada baiknya di backup terlebih dahulu templatednya antisipasi jika terjadi eror dapat di kembalikan lagi. Setelah selesai silahkan SAVE dan selesai selamat mencoba semoga bermanfaat.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.