Cara Membuat Komentar Facebook di Blogger

Adanya komentar Facebook di Blog tentunya akan lebih memudahkan pengunjung apabila ingin bertanya dan sebagainya. memang secara umum bagi pengguna blogger sudah disediakan fasilitas agar visitor bisa berkomentar. Akan tetapi masih banyak yang kurang mengerti bagaimana cara mengomentari postingan dengan fitur tersebut.

Cara Membuat Komentar Facebook Blog kali ini hanya bisa diterapkan pada Blogger, untuk wordpreess mungkin berbeda. Apakah nantinya akan memberatkan loading blog? meski sedikit mempengaruhi, tapi menurut saya tak apalah demi memudahkan pengunjung.

Contoh tampilan komentar facebooknya bisa dilihat dibawah postingan ini berdampingan dengan komentar blog biasanya, silahkan lihat langsung ada 2 pilihan untuk memberikan komentar. tertarik membuatnya, ikuti tutorial Bagaimana Cara Menambahkan Komentar Facebook di Blogger berikut:

1. Seperti biasa login di blogger

2. Trik yang akan dibahas menggukan tampilan dashboard blogger terbaru, jika masih memakai yang versi lama, lebih baik tingkatkan ke versi sekarang.

3. Klik menu template, pilih Edit HTML

4. Centang kotak Expand Template Widget

5. Cari kode <div class='comments' id='comments'> agar lebih mempermudah pencarian tekan Ctlr + F kemudian copy dan paste kode tersebut didalam kotak pencarian lalu tekan enter.

6. Bila sudah ketemu, letakkan kode berikut tepat dibawahnya

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' 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(&quot;#blogger-comments&quot;);' 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 == &quot;item&quot;'>
<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'>

7. Angaka 2 adalah jumlah komentar yang akan ditampilkan, dan 400 merupakan lebar tampilan komentar facebooknya, sesuaikan sendiri.

8. Selanjutnya cari lagi kode </head> dan letakkan kode berikut tapat diatasnya

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='meranaamjoker' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>


9. Ganti tulisa merah meranaamjoker dengan Id Facebook kalian, cara mengetahui ID FB buka profil Facebook, lihat di Addrees Bar misalnya hxxp://www.facebook.com/meranaamjoker?ref=tn_tnmn atau angka.

10. kemudian cari kode /* Comment atau #comments dan letakkan kode berikut dibawahnya

.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;}

11. Simpan template atau klik pertinjau terlebih dahulu untuk memastikan apakah kode bisa diterapkan di blog