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 aplikasi facebook. Bagi yang belum mempunyai ID aplikasi 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>
#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;}
masukkan kode ini dibawah kode <head>, kalau saya sendiri meletakkannya dibagian paling bawah meta. Berikut kode yang harus dipasang.
<meta property="fb:admins" content="ID Facebook"/>Ganti yang berwarna biru dengan ID facebook dan App ID facebook sobat sekalian.
<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 keinginan sobat.
<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'>
11. Setelah itu simpan template.
Tidak ada komentar:
Posting Komentar