Cara Mudah Memasang Kotak Komentar Facebook di Blog

Sebelumnya admin juga sudah menulis mengenai Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan. Kali ini admin akan kembali menulis Cara Memasang Kotak Komentar Facebook di Blog. Bagi teman-teman yang tertarik untuk memasang kotak komentar di Facebook bisa mencoba tutorial ini. Kurang lebih juga hasilnya tetap sama seperti gambar berikut :

Kotak komentar Facebook di blog

Bagi yang berminat, ikuti langkah-langkah berikut :

Pertama, login ke akun Blogger sobat, kemudian masuk ke menu Template - Edit Template.

Kedua, cari kode <div class='comments' id='comments'> pada template sobat. Biasanya ada dua kode, copy paste kode berikut di bawah kode kedua.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' 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(&quot;#blogger-comments&quot;);' 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 == &quot;item&quot;'>
<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='Masukan ID Facebook sobat disini' 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>

Langkah ketiga, ganti tulisan warna Merah tersebut dengan ID Facebook sobat.
Untuk mengetahui ID Facebook sobat, silahkan buka situs https://graph.facebook.com/user-name
dan ganti tulisan warna merah dengan ID Facebook sobat. Contoh https://graph.facebook.com/atoinkuan. Setelah itu tekan enter dan akan muncul kode ID Facebook sobat.
Kurang lebih hasilnya akan seperti ini :

ID Facebook

Cukup sekian tutorial dari admin. Semoga info ini bermanfaat. Salam hangat selalu.

                                                                    * * * * * * * *
Sumber : Wan-soe