Cara Membuat Komentar Facebook di Blog

Sebenarnya caranya tidak susah-susah amat kok. Asalkan anda bisa teliti untuk membaca setiap instruksi saya saja. Nah sebelumnya saya akan memberikan hasil dari membuat kotak komentar facebook pada blog saya. Berikut adalah hasilnya :

Berikut adalah langkah langkahnya :

Langkah 1 : Pergi ke blogger >> Dashboard >> Template

Pastikan setiap anda edit HTML blog anda, selalu anda backup terlebih dahulu. Hal ini dikarenakan untuk jaga-jaga ketika hasil edit anda mengalami eror.

Langkah 2 : Edit HTML >> Lanjutkan

Langkah 3 : Centang Expand Template Widget

Langkah 4 : Temukan Kode di bawah ini (Ctrl + F) :

]]></b:skin>

Langkah 5 : Copy kemudian paste kode di bawah ini diatas atau sebelum ]]></b:skin>

.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;}

Langkah 6 : Jika sudah selesai kemudian lanjutkan untuk mencari kode di bawah ini :

</head>

Kemudian copy dan paste kode di bawah ini tepat di atas kode </head> yang anda temukan :

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Anda 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>

Lanhkah 7 :  Sebelumnya lihat tulisan pada script di atas yang saya beri warna merah 'ID FB Anda disini' . isikan dengan FB Id anda. Jika anda tidak tahu FB Id anda coba perhatikan contoh berikut https://www.facebook.com/bayu.adipati. Itu bisa anda lihat ketika anda membuka profil Facebook anda. Dan yang saya maksud dengan FB ID adalah bayu.adipati.

Langkah 8 : Kemudian cari kode seperti ini <div class='comments' id='comments'> , di blog saya kode tersebut ada dua. Kalau anda juga menemukan ada dua kode tersebut di blog anda, paste kode dibawah ini tepat di bawah kedua kode tersebut!

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

Catatan : Perhatikan kode diatas yang saya beri warna. Untuk yang angka 2 merupakan jumlah komentar yang ditampilkan. Kemudian untuk angka 400 merupakan lebar dari kotak komentar facebook yang ada di blog anda.

Untuk kode yang saya beri warna merah <div class='comments comments-page' id='blogger-comments-page'>  , jika anda menemukan kode yang sama di bawah kode yang anda paste di blog anda, hapus kode tersebut. Jadi pastikan tidak ada kode tersebut sama di bawahnya.

Langkah 9 : Simpan dan lihat hasilnya.

Gimana sahabat blogger, apakah anda berhasil membuat kotak komentar facebook berdampingan dengan kotak komentar blog anda? Beri komentar jika anda berhasil memasangnya. Beri tahu saya bahwa kode di cara di atas benar-benar bekerja pada blog anda.