Cara Membuat Komen Facebook di Blog

 

  Sebagian besar orang mencari informasi lewat internet dan menemukan informasi yang di cari dari sebuh blog, dan menurut dia artikel atau blog tersebut bagus dan bermanfaat sayangnya dia tidak bisa memberikan konmentar meski cuma menguncapkan terima kasih.

  Seperti kita ketahui sebagian pengguna internet mempunyai akun facebook dan agar pengunjung lebih mudah memberikan komentarnya dengan menggunakan akun facebooknya kita perlu membuat atau memasang komentar facebook di blog.

  Ada dua macam komentar facebook yang bisa di pasang di blog yaitu blog dengan template biasa atau bawaan blogger seperti yang saya pakai dan blog dengan template responsive.


 

Cara memasang Facebook komentar di Template Blog biasa

1. Masuk ke akun blogger.
2. Pilih  menu template --> Edit HTML.
3. Cari kode (CTRL+F) ini  <div class='comments' id='comments'>
4. kemudian letakkan kode di bawah ini tepat dibawah kode <div class='comments' id='comments'>

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FACEBOOK KAMU' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
<style>.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}</style>

5. Silahkan cari dan ubah kata "ID FACEBOOK KAMU" dengan id facebook kamu. Dan lihat hasilnya.

Cara memasang Facebook komentar Responsive

Untuk anda yang sudah memasang kotak komentar facebook, tutorial ini cocok kamu terapkan di blog kamu yang sudah mendukung fitur responsive. Komentar facebook responsive berikut ini adalah kotak komentar Facebook yang dibuat responsive. Hal ini di lakukan untuk mendukung bagi yang menggunakan template responsive.

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>

Copy dan Paste kode tadi di atas kode </head>
Langkah berikutnya adalah memasang kode html. 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. Kode FB Komennya seperti ini:

<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>

Jika bingung, hapus semua kode Facebook komen yang ada di blog kamu, lalu di ganti dengan kode yang sudah seocips berikan diatas.

Cara Memasang Facebook komentar Bag.3

Ok langsung saja berikut langkah-langkahnya;

1. Dashboard >> Template >>Edit HTML
2. Cari (CRTL+F) kode <body>
3. Copy kode berikut ini dan simpan (paste) di bawah kode <body>

<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

4. Copy kode berikut ini dan simpan (Paste) tepat di bawah kode <div class='comments' id='comments'>. Jika ada lebih dari 1 kode di tempalte blog Anda, simpan di bawah kode yang kedua.

<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>

NOte:

Angka 600 adalah lebar kotak komentar Facebook. Sesuaikan dengan lebar text area blog Anda.

5. Save Template dan selesai.

   Keuntungan memasang komentar facebook adalah pengunjung lebih mudah memberikan komentar dan menurut pengalaman saya di blog saya yang di babat habis  sama akun nya oleh google artikel dengan paling banyak komentar hampir di pastikan posisinya di halaman pertama. ( temen teman pasti pernah melihat blog saya 1001macamcara.blogspot.com dan www.hasilgoogleadsense.web.id di halaman pertama )