Memasang kolom komentar facebook di blog ternyata sangat membantu. Bukan cuma untuk pengunjung blog, tapi juga bagi pemilik blog itu sendiri. Tapi ada masalah lain ketika kolom tersebut dipasang berurutan (bawah atas) dengan kolom komentar bawaan blogger. Memakan ruang yang mengakibatkan halaman blog berambah panjang.
Ada trik sederhana agar kolom komentar facebook tampil di blog, tapi tidak memakan banyak tempat, karena diletakkan berdampingan dengan kolom komentar bawaan blogger.
Untuk memasang kolom komentar facebook dan blogger berdampingan, yang harus dipersiapkan yaitu, ID facebook kamu dan ID aplikasi facebook. Bagi yang belum mempunyai ID facebook bisa mendapatkannya dengan mengikuti cara yang saya tulis DISINI (klik langsung untuk melihat).
Sekarang kita langsung pada cara memasangnya :
1-Login ke akun blogger
2-Pilih blog yang ingin dipasang komentar facebook
3-Klik Template dan lanjutkan..
4-Edit HTML dan jangan lupa untuk centang Expand Widget Templates.
5-Cari kode ]]></b:skin> (tekan F3 untuk mempermudah pencarian kode HTML nya)
6-Letakkan kode berikut ini diatas kode ]]></b:skin>.
.comments-page { background-color: #f2f2f2;}7-Lalu cari kode <head> masukkan kode ini dibawah kode <head>, kalau saya sendiri meletakkannya dibagian paling bawah meta. Berikut kode yang harus dipasang.
#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;}
<meta property="fb:admins" content="ID Facebook"/>Ganti yang berwarna biru dengan ID facebook dan App ID facebook kawan sedusun. Caranya lihat disini : Cara Agar Komentar Facebook Di Blog Ada Pemberitahuan.
<meta property="fb:app_id" content="App ID"/>
8-Cari kode </head>, lalu letakkan kode berikut ini diatasnya
<script src='https://connect.facebook.net/en_US/all.js#xfbml=1'/>9-Lanjutkan dengan mencari kode <div class='comments' id='comments'>. Biasanya didalam template akan terdapat dua kode <div class='comments' id='comments'>.
<script src='http://code.jquery.com/jquery-latest.js'/>
<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>
10-Letakkan kode berikut ini dibawah dua kode <div class='comments' id='comments'>. (Pasang dibawah kode <div class='comments' id='comments'> yang pertama dan kedua)
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>Angka 2 menunjukkan jumlah komentar yang tampil, sedangkan angka 400 menunjukkan ukuran lebar kolom komentar facebook. Ganti atau sesuaikan dengan keperluan kawan sedusun.
<img class='comments-tab-icon' src='https://s-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='https://lh5.googleusercontent.com/--vu5gE3yh1E/UA333Ytm5hI/AAAAAAAAAnM/nbi9p0of21o/h120/favicon.ico'/> <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'>
Untuk mempermudah mencari dua buah kode <div class='comments' id='comments'>, tekan F3, tuliskan kode tersebut. Tambahkan angka 1 di belakang kode yang dicari tadi (contoh : <div class='comments' id='comments'1>), dan langsung letakkan kode komentar facebook dibawah kode yang ditemukan pertama. Kembali ke pencarian menggunakan F3 tadi dan cari <div class='comments' id='comments'>. Letakkan kode komentar facebook. Dan kembali lagi ke kolom pencarian menggunakan F3, cari <div class='comments' id='comments'1>, hapus angka 1 dan klik "Save Template".
Selesai, bila semua langkah diikuti dengan benar dan kolom komentar facebook belum juga tampil di blog kawan sedusun. Tutup dulu browser, atau log out sekalian. Buka kembali/login ke akun blogger. Buka blog yang sudah dipasang komentar facebook berdampingan dengan komentar blogger/blogspot. Di kolom komentar sudah tampak di halaman blog kawan sedusun, lengkap dengan pemberitahuan bila ada pengunjung yang memberi komentar melalui akun facebook.
Sekedar tambahan : Bila kawan sedusun memang sudah niat ingin memasang komentar fabeook yang berdampingan dengan kolom komentar blogger. Baca dan ikuti cara diatas disetiap langkahnya. Akan lebih baik jika sambil membaca caranya, kawan sedusun sambil praktek di blognya. Selain menghindari ada langkah yang terlewat, cara ini juga efektif untuk mempercepat proses pemasangan kolom komentar facebook di blog kawan sedusun.
Semoga tulisan saya bisa dipahami dengan mudah dan bisa bermanfaat untuk kawan sedusun semuanya.
Description: Membuat dua pilihan komentar di blog, facebook dan blogger dengan posisi berdampingan dan Rating: 5
