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>
//<![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:
Kode FB Komennya seperti ini:
<b:if cond="data:blog.pageType ==
"item"">
<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>
<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 (*)
No comments:
Post a Comment