Cara Menggabungkan Komentar Facebook dengan Blog

Pada artikel sebelumnya piper comex sudah membahas bagaimana cara sederhana memasang FB comment di blogger. Artinya didalam blog kita nanti akan ada kolom komentar, selain kolom komentar blog juga ada kolom komentar facebook.

Untuk artikel kali ini ane akan membahas mengenai bagaimana cara menggabung komentar facebook dan komentar blog menjadi satu tempat. Artinya kita hanya memerlukan satu kolom komentar saja untuk menempatkan dua komentar facebook dan komentar blog.

Kenapa harus dijadikan satu kolom?

Untuk template yang sudah terlalu penuh dengan widget, penempatan kolom komentar facebook dan komentar blog menjadi satu bisa menjadi solusi. Selain itu pengunjung bisa bebas memilih apakah mereka ingin berkomentar menggunakan akun google atau akun facebook.

Langsung saja kita menuju ke TKP.

1. Login ke Blogger, pilih blog yang ingin Anda edit. Untuk keamanan bila terjadi kesalahan edit, buat tempalte cadangan dengan mengklik "cadangkan/pulihkan", simpan file template cadangan tersebut.

2. Kemudian klik Template ==> Edit HTML ===> Lanjutkan ==> Centang kotak kecil "Expand Templates Widget " 

3. Cari kode: <div class='comments' id='comments'>, pada template saya ada dua kode dan saya pilih kode yang pertama. Kemudian masukkan kode berikut ini dibawah kode tersebut.

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

Catatan:

witdh='400' dapat disesuaikan dengan lebar halaman artikel blog Anda.
Untuk menambah efek scroll pada kolom komentar Anda bisa mengganti kode:
<div class='comments-page' id='fb-comments-page'>
dengan kode:
<div class='comments-page' id='fb-comments-page' style='max-height:230px;overflow:auto;'>
Tetapi jika tidak ingin menambah scroll, abaikan saja.

4. Selanjutnya cari kode: </head>, lalu letakkan kode dibawah ini diatasnya.


 

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

Catatan:
Ganti tulisan MASUKKAN ID FB SOBAT BLOGGER dengan ID Facebook Anda.

5. Kemudian untuk berikutnya cari kode:   /* Comment atau kode:  #comments
Bila tidak sama dengan kode diatas, Anda bisa sesuaikan dengan kode yang ada di template Anda. Cari kode yang semirip mungkin.
Setelah ketemu kode tersebut, masukkan kode berikut ini dibawahnya.
 

.comments-page {}
#blogger-comments-page {display: none;}
.comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;}
.comments-tab-icon { height: 16px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

6. Sebelum disimpan Anda bisa klik Pratinjau dulu untuk memastikan tidak terjadi kesalahan edit. Setelah ok tidak ada masalah, kilk save/ simpan template. Lihat artikel Anda yang sudah berisi komentar, atau Anda bisa uji coba membuat komentar dengan akun blog dan akun facebook untuk melihat hasilnya.

Apabila ada yang masih kurang jelas, silahkan tinggalkan pesan pada kolom komentar.
Semoga bermanfaat.

Share this

Yuutech