Cara Mudah Membuat Kotak Komentar Facebook Di Blog - Widget ini berguna untuk membantu pengunjung blog untuk berkomentar dengan menggunakan akun facebook. Kotak
komentarnya akan dipasang berdampingan dengan kotak komentar blog, selain rapi juga tidak terlalu banyak memakan tempat blog seperti contoh gambar dibawah ini :
komentarnya akan dipasang berdampingan dengan kotak komentar blog, selain rapi juga tidak terlalu banyak memakan tempat blog seperti contoh gambar dibawah ini :
Berikut ini cara memasang komentar facebook di blog Anda :
- login dulu dengan account blogger Anda.
- Lalu masuk ke template.
- Lalu edit HTML Template blog dan jangan lupa centang Expand Template Widget.
- Cari kode <div class='comments' id='comments'> gunakan Ctrl + F.
- Jika kalau kode <div class='comments' id='comments'> ada 2 pasangan lah kode di bawah ini bawah kode ke 2 dari <div class='comments' id='comments'>
- Selanjutnya cari lagi kode </head>
- Terus pasangkan kode di bawah ini tepat di atas kode </head>
- Ganti ID Facebook dengan url id profil facebook Anda.
- Cari kode yang mirip dengan kode /* Comment atau #comments.
- Lalu pasangkan kode dibawah ini sebelum kode /* Comment atau #Comments.
- Terakhir simpan dan lihat hasilnya sekarang.
<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'>
<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'>
<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' 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>
.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;}
Sekian, semoga dapat bermanfaat bagi Anda semua.
