Facebook Comment Box adalah cara terbaik untuk memberikan pengunjung kesempatan untuk berkomentar dan tidak selalu harus mempunyai akun blogger. Selain itu juga dapat membatasi komentar anonim. Tapi, blogger pun masih bisa berkomentar karena komentar untuk blogger pun tersedia.
Tertarik untuk memasang ini? Ikuti langkah-langkahnya dibawah ini.
1. Menambahkan Tab
Ayo mulai dengan menambahkan Tab HTML. Tapi, sebelum itu simpan dahulu template. Jika sudah, klik Template->Edit HTML. Centang Expand Widget Templates. Cari class='comments'. Jika terdapat 2, pastekan kode dibawah ini di yang kedua.
<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>
2. Membuat halaman Tab
Sekarang, tabmu sudah jadi. Sekarang, lanjut ke tahap berikutnya yaitu menambahkan halaman pada tab. Pastekan kode ini dibawah kode yang tadi.
<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'>
400 adalah ukuran kotak komentar, 2 adalah jumlah komentar yang akan tampil. Sesuaikan dengan templatemu.
3. Scripting Tab dan Style
Agar tab bekerja, kita membutuhkan sebuah script. Cari <head> dan pastekan kode ini dibawahnya.
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID_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>
Ganti ID_FB_Anda dengan ID Facebook anda. Contohnya: https://www.facebook.com/gilangs.handsome. Jangan lupa di-add ya! hehe...
Sekarang, cari #comments dan letakkan kode dibawah ini diatasnya.
.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;}
Sudah! Sekarang, simpan template dan lihat salah satu postingan blogmu. Lihat! Ada komentar Facebook dan Blog berdampingan! Dan, demikian tutorial ini. Mohon maaf bila ada kekurangan karena saya juga manusia yang tak luput dari kesalahan. Terima kasih.
0 comments:
Post a Comment