Cara Mudah Membuat Komentar Facebook Responsive di Blogger

Tutorial kali ini ialah cara gampang memasang/membuat komentar Facebook responsive dan cara memasang penghitung komentar (comments count) Facebook di website atau blog. Mengapa memasang komentar Facebook sangat mudah? Sebab kita tinggal memasang plugin yang telah disediakan oleh Developer Facebook.

Cara Mudah Membuat Komentar Facebook Responsive di Blogger

Sayangnya plugin yang dibagikan tidak responsive jika diterapkan pada blog yang telah meresponsive blognya. Agar tampilan komentar ini menjadi responsive, maka perlu mengubah sedikit struktur script dari plugin yang dibagikan, yaitu menambahkan style 100% pada width.

Baca juga: Cara Terbaru Memasang Komentar Disqus di Blogger Valid HTML5

Cara Membuat dan Memasang Komentar Facebook di Blog

1. Masuk ke editor template, lalu di bawah kode <head> letakkan meta content berikut ini di bawah kode tadi (ganti yang ditandai).
<meta content='ID profil facebook admin' property='fb:admins'/>
<meta content='ID fanspage blog' property='fb:app_id'/>

2. Kopi kode di bawah ini dan letakkan di atas kode </head>. Jika sudah terpasang sebelumnya, hapus kode tersebut dang anti dengan kode berikut ini.
<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>

3. Saatnya memasang plugin komentar facebook agar tampil di setiap halaman/postingan blog anda, dengan cara temukan kode <data:post.body/> (untuk postingan penuh) letakkan kode berikut ini di bawah kode tadi.
<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>

4. Langkah terakhir simpan template, dan lihat hasilnya dengan membuka salah satu postingan blog.

Sampai disitu pemasangan komentar Facebook untuk blog anda telah selesai. Selanjutnya cara memasang comments count atau penghitung komentar facebook tadi.

Cara Memasang Facebook Comments Count di Blog

Biasanya plugin atau widget ini di pasang pada postmeta atua post-info untuk setiap artikel blog. Untuk menampilkan penghitung komentar Facebook ini, anda cukup menggunakan kode berikut.
<a expr:href='data:post.url + &quot;#fb-comment&quot;'><span class="fb-comments-count" expr:data-href='data:post.url'></span> comments</a>

Demikian tutorial tentang Cara Membuat atau Memasang Komentar Facebook dan Penghitung Komentar Facebook di Blog. Selamat mencoba, semoga membantu.

Advertisement