Cara Membuat Kotak Komentar Facebook di Blog

GORESKAN - Dalam upaya meningkatkan trafic blog kita, tentu banyak cara yang bisa dilakukan. Salah satunya ialah memanfaatkan jejaring sosial seperti, facebook, twitter, linkedin, dan lain- lain. Artikel kali ini, akan membahas mengenai facebook, tepatnya membuat kotak komentar facebook yang berdampingan dengan kotak komentar blogger.

Untuk mengaktifkan fitur komentar facebook, tentunya kita harus mempunyai akun facebook. Selain akun Facebook, kita juga harus memiliki APP ID. Tentunya agar kita bisa moderasi komentar dan mendapat pemberitahuan setiap ada komentar baru yang masuk. APP ID bisa kita dapatkan setelah kita membuat aplikasi di Facebook disini.

Sebelum memulai, disarankan untuk mendownload template dulu. Untuk berjaga- jaga bila terjadi kesalahan atau ingin mengembalikan ke template semula. Sekarang bisa kita mulai step by step nya.
1. Masuk akun blogger, template --> edit HTML, centang expant widget template
2. Letakan kode berikut dibawah kode <head>

<meta content='Profile_ID' property='fb:admins'/>
<meta content='APP_ID' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

3. Perhatikan kode yang berwarna biru

ganti Profile_ID dengan ID atau username Facebook anda. Misalnya jika url anda adalah https://www.facebook.com/badrul maka, Profile ID anda adalah badrul.
Ganti APP_ID dengan ID Aplikasi Facebook yang anda dapat setelah membuat aplikasi tadi.

4. Lanjut, cari kode class='comments'

5. Kemudian letakan kode berikut tepat dibawah kode class='comments'

<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</div>
<div class='js-default-tab comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> 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='620'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>