Cara Memasang Komentar Facebook Responsive di Blog

Apa mungkin Facebook Comment bisa di buat responsive? Mungkin sekali, hanya dengan menambahkan beberapa kode seperti CSS, JQuery, dan JavaScript. Bagi yang sudah memasang kotak komentar facebook, tutorial ini cocok kamu terapkan di blog kamu yang sudah mendukung fitur responsive.

Apa itu komentar facebook responsive ?

Komentar facebook responsive adalah kotak komentar jejaring sosial facebook yang dibuat responsive. Hal ini di lakukan untuk mendukung bagi yang menggunakan template responsive. Responsive artinya lebar ukuran yang selalu menyesuaikan, lebar ukuran layar.

Script ini saya dapatkan dari blognya mkr-site.blogspot.com, ketika saya sedang mencari tutorial ini.

Berikut cara memasang/membuat komentar facebook menjadi responsive:

Untuk teman-teman yang belum tahu cara memasangnya bisa membaca di artikel saya yang berjudul Cara Memasang Kotak Komentar Facebook.

Yang perlu kamu lakukan adalah menambahkan kode javascript 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>

Copy dan Paste Javascriptnya, di atas kode </head>

Kode FB Komennya seperti ini:

<b:if cond="data:blog.pageType == &quot;item&quot;">
<h4>Post Comment</h4>
<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='5' width='500'/></div>
</b:if>

Keterangan:

• Yang berwarna merah adalah kode FB komen asli
• Yang berwarna biru adalah kode javascript untuk merubahnya menjadi responsive
• Yang berwarna hijau adalah kode tambahan untuk merubahnya menjadi responsive

Jika bingung, hapus semua kode facebook komen yang ada di blog kamu, lalu di ganti dengan kode yang sudah saya berikan diatas.

Kode diatas akan bekerja jika kamu juga menggunakan template blogger responsive. Semoga artikel Cara Memasang Komentar Facebook Responsive di Blog ini mudah di pahami dan bermanfaat untuk teman-teman semua. Jika ada kesulitan silahkan tanyakan di kolom komentar. Terima kasih