Pasang Facebook Like Box dan Comment untuk Template Responsive

Putra Kefa
Putra Kefa
Updated:


Pasang Facebook Like Box dan Comment untuk Template Responsive
Pasang Facebook Like Box dan Comment untuk Template Responsive, Anaktimor17 Blog – Sobat blogger, kali ini saya akan share untuk sobat tentang cara Membuat Facebook Like Box dan Comment untuk template Responsive .  Kenapa saya katakan responsive?
Karena dari hasil browsing yang saya dapatkan, ada dua metode yang dapat kita pakai untuk menjadi 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>




Sobat blogger sekian artikel Membuat Facebook Like Box dan Comment Responsive. Selamat berkreasi dan jangan lupa untuk komentarnya :)

Sumber: http://mkr-site.blogspot.com/2013/03/facebook-like-box-comment-responsive.html
css jquery tips dan trik blogger blogspot Widget
1 comment
  1. Anonymous
    haha.. keren :)
    Reply