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&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">
$(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>
