3 Cara memasang komentar Facebook Responsive di Blog

HaiSob apa kabar? pada kesempatan ini saya akan berbagi tentang cara memasang komentar Facebook di Blogger (belum responsive) dan cara memasang komentar Facebook responsive di Blogspot Blogger.

Sebagian besar pengguna internet selalu terhubung dengan akun Facebooknya jadi agar para pengunjung blog lebih mudah berkomentar di blog, kamu dapat memasang kotak komentar Facebook. Komentar Facebook di Blogger ini adalah untuk menghubungkan konektivitas antara social media tersebut dengan blog.

Membuat kotak komentar Facebook di Blog


3 Cara Memasang Komentar Facebook di Blogger Terbaru
Cara memasang komentar Facebook  di Blog

Kamu pasti sudah pernah melihat blog-blog yang memasang komentar Facebook ini. Untuk cara membuat kotak komentar Facebook ini cukup mudah. Kesempatan ini saya akan membagikan 3 macam komentar Facebook yang dapat dipasang di Blog Blogger, yaitu komentar Facebook untuk template biasa dan komentar Facebook responsive untuk template responsive.

Sebelum melakukan tutorial-tutorial dibawah ini sebaiknya backup dulu template kamu (misalnya simpan semua kode template di notepad) agar nantinya jika terjadi kesalahan atau tidak sesuai dengan keinginan maka mudah untuk dikembalikan seperti semula.

Cara 1: membuat Facebook komentar Responsive di Blogger


1. Di dashboard Blogger pilih menu Template ➔ Edit HTML
Cara Memasang Komentar Facebook di Blog
Template - Edit HTML

2. Letakan kode diberikut ini diatas kode <div class='comments' id='comments'> , jika tidak berhasil coba letakkan dibawah kode  <div class='post-footer-line post-footer-line-3'>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' num_posts='5'/></div>
</b:if>
3. Save template.

Cara 2: memasang kotak komentar Facebook responsive di Blogger


1. Di dashboard Blogger pilih menu Template ➔ Edit HTML
2. Letakan kode di bawah ini atas kode </head>
<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>
3. Letakan kode berikut ini dibawah kode untuk related post, atau jika sobat bingung silahkan cari kode <div class='comments' id='comments'>, jika ada lebih dari 1 kode silahkan coba satu persatu.
<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>
4. Save.

Cara 3: memasang Facebook komentar di Blogspot (belum responsive)


1. Di dashboard Blogger pilih menu Template ➔ Edit HTML
2. Cari (CRTL+F) kode <body>
3. Letakan kode berikut ini di bawah kode <body>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
4. Letakan kode berikut ini di bawah kode <div class='comments' id='comments'>. Jika ada lebih dari satu kode, simpan di bawah kode yang kedua atau dicoba satu persatu
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top:20px'>
<div class='fb-comments' data-num-posts='5' data-width='600' expr:data-href='data:blog.url'/>
</div>
</b:if>
Angka 600 adalah lebar kotak komentar Facebook. Sesuaikan dengan blog kamu.
5. Save Template dan selesai.

Bagaimana sobat mudah bukan?, memang cara memasang komentar facebook di template blog ada bermacam-macam kodenya, tinggal sesuaikan saja dengan template blog yang kamu gunakan. Selamat mencoba.