Membuat Facebook Like Box dan Comment Responsive

Facebook merupakan social media yang memiliki jumlah pengguna yang sangat banyak. Di Indonesia saja 47% dari pengguna internet memiliki akun facebook. Selain social media facebook juga memberikan banyak tools bagi pengguna blog. Diantaranya fasilita seperti facebook like box, facebook button, facebook comment.
Nah bagi anda pengguna facebook dan juga memasang facebook like box atau pun facebook comment diblog anda mungkin tertarik dengan tips yang satu ini. Tipsnya yang saya berikan ini yaitu bagaimana membuat keduanya menjadi responsive. Hal ini sangat cocok bagi anda pengguna template yang responsive.
Dari hasil pencarian dan percobaan yang saya lakukan saya menemukan dua metode untuk menjadikannya responsive. Yaitu dengan cara menggunakan CSS dan dengan cara jQuery. Nah bagi anda yang tertarik bisa mengikuti cara berikut.

Metode CSS

Metode dengan menggunakan CSS dapat dilakukan dengan menambahkan kode CSS berikut kedalam template blogspot anda:

Facebook Like Box

.fb-like-box, .fb-like-box span, .fb-like-box iframe[style] {
width: 100% !important;
}

Facebook Comment Box

.fb-comments, .fb-comments span, .fb-comments iframe[style] {
width: 100% !important;
}

Metode jQuery

Metode yang satu ini terbilang lebih rumit karena harus menggunakan jQuery. Sehingga untuk menerapkannya setidaknya blog anda telah ada jQuery librarynya.
Pada umumnya jika anda membuat facebook like dan juga facebook comment (HTML5) akan ada dua kotak untuk dicopy kodenya.
Kode yang pertama adalah kode javascriptnya atau disebut dengan JavaScript SDK. Kode ini sebaiknya hanya satu kali diletakkan. Dan dianjurkan diletakkan setelah tag <body>. Kalau tidak salah bentuk kodenya seperti ini:

<div id="fb-root"></div>
<script>
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=ID Aplikasi Facebook Anda";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Maksud dari kode ini yaitu akan mencari tag script yang pertama dan meletakkan kode script dengan id facebook-jssdk setelahnya. Sehingga kode seperti diatas dapat diganti dengan kode berikut dan meletakkannya setelah tag <body>.

<div id="fb-root"></div>
<script id="facebook-jssdk" src="http://connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=ID Aplikasi Facebook Anda"></script>

Facebook Like Box

Kode yang kedua dari FB like box akan seperti ini:

<div class="fb-like-box" data-href="URL Facebook Page Anda" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

Kode diatas adalah tempat dimunculkannya like box. Nilai default like box (profile,stream, dan header muncul). Untuk merubahnya silahkan ganti dengan nilai true diganti dengan false. Misal ingin menghilangkan headernya maka dirubah menjadi data-header="false".
Karena kita akan membuat menjadi responsive maka harus ditambahkan sedikit kode html dan juga jQuery seperti ini.

<div id="container-likefb" style="width:100%;">
  <div class="fb-like-box" data-href="URL Facebook Page Anda" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
</div>
<script type="text/javascript">
$(window).bind("load resize", function(){    
  var container_width = $('#container-likefb').width();    
    $('#container-likefb').html('<div class="fb-like-box" ' + 
    'data-href="URL Facebook Page Anda"' +
    ' data-width="' + container_width + '" data-show-faces="true" ' +
    'data-stream="true" data-header="true"></div>');
    FB.XFBML.parse( );    
}); 
</script>

Facebook Comment

Seperti halnya pada like box, pada FB comment bentuk kode keduanya kurang lebih seperti ini (untuk blogger):

<div class='fb-comments' expr:data-href='data:post.url' data-width='470' data-num-posts='10'></div>

Hampir sama yang kita lakukan pada like box, tapi pada fb comment ada sedikit tambahan kode Javascript. Sehingga kodenya akan seperti ini.

<div id="container-commentfb" style="width:100%;">
  <div class='fb-comments' expr:data-href='data:post.url' data-width='470' data-num-posts='10' ></div>
</div>
<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+'"' +
    ' data-width="' + containercm_width + '" data-num-posts="10"></div>');
    FB.XFBML.parse( );    
}); 
//]]>
</script>