Cara membuat Komentar Facebook Berdampingan Blog

Berikut ini adalah langkah - langkahnya:
1. Login ke account blogger Anda
2. Klik rancangan lalu klik Edit HTML
3. Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan
4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
5. Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl + f untuk mempermudah pencarian)
6. Kalau sudah dapat maka masukkan kode berikut ini di atas kode ]]></b:skin>

.comments-page { background-color: #ffffff;}#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;}

7. Kemudian Anda cari kode </head>
8. Jika sudah dapat, masukkan kode berikut ini tepat diatas kode </head>

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

Perhatikan tulisan yang berwarna merah di atas, ganti dengan Alamat ID facebook Anda, misalkan https://www.facebook.com/NamaPenggunaAnda. Cara mengetahuinya anda lihat di "pengaturan akun" FB anda disana ada tertera nama pengguna. Udah ngertikan ? jika sudah maka Akan saya lanjut.

8. Kemudian cari kode  <div class='comments' id='comments'>

*Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode

<div class='comments' id='comments'> yang pertama dan 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'>

Perhatikan angka yang berwarna merah dan biru diatas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Anda agar kelihatan rapi. Dan perhatikan pula kode yang berwarna merah, jika penempatan kode dibawah <div class='comments' id='comments'> yang kedua terdapat kode yang sama, maka hapus salah satu kode tersebut.

contoh :

<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'><div class='comments comments-page' id='blogger-comments-page'> ( hapus salah satu)

9. Kemudian klik save, dan lihat hasilnya.

jika Anda memiliki struktur template yang berbeda, Anda dapat meletakkan kode pada poin no.8 dibawah kode <div class='comments' id='comments'> yang kedua saja. Selamat mencoba :)

................Semoga Bermanfaat Bagi sobat....Jangan lupa Komentarnya .....................

http://incunaeon.blogspot.com/