Cara Membuat Kotak Komentar Facebook di Bawah Postingan Blog

Cara Membuat Kotak Komentar Faceebook di Bawah Postingan Blog - Mungkin sudah banyak para blogger yang membuat postingan seperti ini, tapi disini saya ingin memposting kembali cara membuat komentar facebook di blog, karena memang facebook merupakan salah satu situs jejaring sosial yang paling banyak pengunjungnya. Baik dari anak kecil hingga orang tua kebanyakan mempunyai akun facebook.

Hampir dipastikan pengguna internet kebanyakan memiliki akun facebook dan pengunjung blog kita pun pastinya mempunyai akun facebook. Dari itu beri kemudahan mereka untuk berkomentar di blog kita..
Berikut langkah-langkah pembuatan kotak komentar facebook di blog :

Pertama Buat Aplikasi di Facebook developers

1. Login ke Akun Facebook Anda.

2. Kemudian cari di search facebook atau klik link berikut https://developers.facebook.com
3. Klik Create New App
4. Isi Nama Aplikasi sesuai nama blog anda
5. Lalu cheklis I agree to the Facebook Platform Policies atau Kebijakan Platform Facebook
6. Dan klik Continue atau Lanjutkan

Langkah Berikutnya Membuat Komentar Facebook Di Blog

1. Masuk ke Akun Blog anda.
2. Pilih Template > Edit HTML
3. Kemudian cari kode ]]></b:skin>, Gunakan CTRL + F untuk mencari kode.
4. Letakan kode di bawah tepat di atas ]]></b:skin> :

.comments-page { background-color: #00BFFF;}

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

5. Setelah itu  cari kode </head> (gunakan CTRL + F biar mudah) letakan kode dibawah ini tepat di atas kode </head> :

<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 Anda' 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>

 Ganti ID Facebook Anda dengan nama aplikasi facebook yang telah di buat tadi. Jika tidak membuat aplikasi facebook, silahkan masukan ID facebook anda.. Misal http://www.facebook.com/yurissandi007 masukan yurissandi007 saja tanpa perlu memasukan http://www.facebook.com/

6. Satu lagi kita akan membuat komentar facebook berdampingan dengan komentar blog. Maka kita perlu menambahkan beberapa script lagi. Silahkan cari kode <div class='comments' id='comments'>, Biasanya ada beberapa kode yang serupa, jika terdapat lebih dari 1 kode tersebut. Cari kode yang paling akhir, lalu letakan kode dibawah ini tepat di bawah kode <div class='comments' id='comments'> :

<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='5' width='500'/>
    <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:588px;'>Facebook Comments by
<b><a href='http://mosof.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>comments</a></b>
</div>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

5 komentar yang ditampilkan
500 ukuran kolom komentar
Kemudian Save/Simpan Template dan lihat hasilnya.

Jika kotak komentar tidak muncul, silahkan anda cari kode <html dan ganti dengan kode berikut :
<html xmlns:fb='http://www.facebook.com/2008/fbml'

Semoga bermanfaat!