[Blogger] Memasang Komentar Facebook Responsive

Ada banyak plugin komentar yang bisa dipasang di blog dengan flatform Blogger selain dari komentar bawaan Blogger dan komentar Google+, yaitu :

Disqus,
Powr, dan
Facebook (Social Plugin) Comment Box.

Dari beberapa plugin komentar diatas, Facebook merupakan salah satu flatform social media yang banyak digunakan terutama oleh orang Indonesia selain dari Twitter.

Disamping itu, Facebook juga memiliki fitur Social Plugin ; dimana para pemilik web bisa menggunakan sejumlah plugin Facebook seperti; Facebook Like Button atau yang sekarang dikenal dengan Facebook Pages (Fan Page), dan Facebook Comments.

Tentunya hal tersebut menjadi nilai tambah dan memiliki sejumlah keuntungan tersendiri bagi mereka yang memasang plugin komentar Facebook di blognya jika dilihat dari sisi pengguna dan kemudahannya.

Cara Memasang Komentar Facebook Responsive

1. Simpan meta tag Facebook berikut ini di dalam template setelah <head>

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

Note :
Lewati langkah di atas jika kode tersebut sudah terpasang di template Anda.

2. Simpan kode berikut ini sebelum </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>

3. Sisipkan kode berikut ini tepat di bawah kode <data:post.body/> yang terdapat 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>

4. Simpan.

Finally, you're done!

Untuk demo komentar facebook responsive, bisa dilihat di blog Wiki Widgets ini.

Dapatkan tutorial terbaru dari WikiWidgets?

Subscribe!