Untuk komentar Facebook disediakan pilihan komentar akun, jika Anda punya halaman/fanspage, Anda bisa menggunakan akun fanspage untuk berkomentar. Untuk komentar Blogger, disediakan pula pilihan berkomentar melalui akun lainnya, yaitu Wordpress, Open ID, Typepad, dan lainnya. Keunggulan lain yang dimiliki Facebook dan Blogger comment adalah tampilannya yang lebih menarik.
Berikut ini cara membuat komentar Facebook dan Blogger secara berdampingan:
- masuk ke dashboard blogger
- pilih template
- edit HTML
- centang expand template widget
- pada keyboard tekan Ctrl+F, cari: ]]></b:skin>
- kemudian masukkan kode berikut diatasnya:
.comments-page { background-color: #FFFFFF;}
#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;}
kode dengan warna biru adalah background komentarnya, silahkan diganti atau biarkan tetap seperti itu
#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;}
kode dengan warna biru adalah background komentarnya, silahkan diganti atau biarkan tetap seperti itu
- pada kode </head>, masukkan kode berikut ini diatasnya:
<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 Kamu' 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>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID Facebook Kamu' 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>
- Kemudian cari kode <div class='comments' id='comments'>, lalu masukkan kode berikut dibawahnya:
<div class='comments-tab' id='fb-comments'
onclick='javascript:commentToggle("#fb-comments");'
title='Comments 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='10' 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='10' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
- Pada umumnya terdapat dua kode <div class='comments' id='comments'>, masukkan kode diatas tadi dibawah kedua kode tersebut
- Kode Comments with Facebook dan Comments from Blogger adalah judul boxnya, dapat kamu ganti sesuai dengan keinginan
- 5 adalah jumlah post komentar yang ditayangkan, silahkan diganti sesuai dengan keinginan
- 400 adalah lebar dari Facebook and Blogger Comment box, bisa kamu ganti sesuai keinginan
- Untuk kode <div class='comments comments-page' id='blogger-comments-page'> dapat kamu hapus apabila terdapat kode yang sama dibawahnya
- Terakhir silahkan simpan template dan lihat hasilnya
