Kali ini saya share tentang cara membuat kolom komentar facebook yang berdampingan di blog. Dengan adanya kolom komentar facebook di blog memudahkan pengunjung untuk berkomentar melalui akun facebook masing-masing tanpa harus Login ke akun yang lain. Merekapun bisa mengetahui komentar-komentar yang mereka tinggalkan di sebuah blog lewat timeline facebook.
Untuk membuat kolom komentar facebook berdampingan ikuti langkah-langkah berikut ini:
1.Masuk ke Menu Template > Edit HTML > Cari kode ]]></b:skin> ,untuk mempermudah cara pencarian pencet tombol Ctrl+F pada keyboard
2. Jika sudah ketemu, letakkan kode berikut tepat di atas kode ]]></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;}
3. Cari kode </head>, letakan kode berikut di atas kode </head>.
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID facebook kalian' property='fb:admins'/>
<meta content='ID App' property='fb:app_id'/>
<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>
Ganti warna biru dengan ID facebook kalian masing-masing, Jika kalian belum tahu ID facebook, kalian bisa mengikuti langkahya disini Cara mengetahui ID facebook dengan mudah.
Ganti warna merah dengan ID App facebook yang kalian miliki. Jika kalian belum mempunyai atau ingin membuat App facebook baru ikuti lagkah berikut Cara membuat new APP facebook.
4. Cari kode <div class='comments' id='comments'>. Ada 2 kode yang ditemukan, dan pastekan kode berikut di bawah kedua kode <div class='comments' id='comments'>.
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw_oma9uwJ4qxtPdQRXC7_o-RpRxIsX5YOHBoHXVs3fG8OlKXuhENAlQXWYoCc9lHKQNQm6GzZlEuZTxGhRtn7mKBEgmxxaQMZrpF2_yvcCnhnQPVsuGHB_Q_8LcyBKGTHXMvkiEl9cDY/s1600/sas.gif'/>
<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='5' width='600'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Warna merah adalah jumlah komentar yang di tampilkan di setiap Halaman.
Warna hijau adalah lebar kotak komentar di blog kalian.
Ubah dan sesuaikan jumlah komentar dan lebar kotak komentar sesuai keinginan kalian masing-masing.
5. Simpan template.
Selamat menpraktikan Cara Membuat Komentar Facebook Berdampingan di Blog Kita dan semoga berhasil
