Kali ini saya akan berbagi tutorial tentang cara menambahkan kotak komentar facebook di blog, mungkin sebagian besar sahabat blogger sudah banyak yang mengetahui langkah-langkahnya tapi bagi anda yang belum mengetahuinya di sini saya akan mencoba berbagi langkah-langkah memasangnya.

sangatlah mudah memasang kotak komentar facebook di blog.. kita hanya tinggal pergi ke bagian pengembang facebook , tapi belum tentu juga setelah anda memasang kotak komentar tersebut bisa berjalan sempurna alias tidak error, di banyak kasus ketika anda sudah berhasil membuat kotak komentar facebook tersebut ternyata hasilnya tidak memuaskan contoh khasunya : Misal ketika ada pengunjung blog mengomentari artikel yang berjudul "Kampus STKIP Pasundan Cimahi Memiliki Pengajar yang berkualitas" , nah seharusnya komentar tersebut hanya tampil di artikel yang berjudul "Kampus STKIP Pasundan Cimahi Memiliki Pengajar yang berkualitas" saja tetapi karena kesalahan dalam pemasangannya maka komentar tersebut tampil di seluruh artikel blog.
Contoh kasus lainnya adalah ketika anda sukses membuat kotak komentar dan komentar yang masuk sudah sesuai dengan yang anda harapkan hanya tampil di artikel yang di beri komentar saja, tapi mungkin anda masih bertanya-tanya "ko ketika ada orang berkomentar tidak ada pemberitahuannya??"
hal tersebut karena anda tidak memasukan atau lupa memasukan ID APPS FB.

Agar kasus-kasus tersebut tidak terjadi disini saya akan berbagi tutorial lengkapnya tapi sebelum anda praktekan, ada baiknya backup dulu template lama anda hal itu untuk jaga-jaga jika tutor yang saya berikan error.

Cara memasang comment facebook di blog :
1. login ke blogger[dot]com , masuk Dasboard >> template >> Klik edit html >> centang pada "Expand Template Widge"
2. Temukan Kode ini ]]></b:skin> , untuk mempermudah pencarian silahkan gunakan (Ctrl + F) dan masukan kode yang di cari di form yang tersedia.
3.Jika Kode ini ]]></b:skin> sudah ketemu pastekan kode dalam text area di bawah tepat di atasnya.

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

4.cari kode </head> lalu pastekan kode di bawah 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='yangyang.perdianto' 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>

catatan di dalam kode di atas terdapat yangyang.perdianto silahkan ganti dengan ID Facebook anda, untuk melihat ID facebook caranya tinggal masuk ke profil facebook kemudian lihat di bagian address bar terdapat url seperti ini https://www.facebook.com/yangyang.perdianto yang berwarna merah adalah ID facebook.

5. cari kode ini <div class='comments' id='comments'> jika kode tersebut ada dua, anda pasang kode di bawah ini di kedua kode tersebut.

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

lihat kode bagian akhir/bawah dalam teks area di atas terdapat kode ini <div class='comments comments-page' id='blogger-comments-page'> , pada penempatan kode yang kedua, apabila di temukan kode yang sama silahkan anda hapus dulu, setelah itu pasang kode di atas.

6. klik simpan template dan tahap pertama selesai.

Sekarang kita masuk tahap dua, Agar setiap komentar yang masuk memiliki pemberitahuan maka anda wajib membuat APP FB cara membuatnya sebagai berikut :
1. masuk https://developers.facebook.com/apps pastikan anda sudah dalam keadaan login di fb
2. klik "Create New APP"

Keterangan :
- APP Name bisa di isi dengan nama blog anda misal "Cafe ilmu"
- App Namespace di kosongkan
- centang Yes, I would like free web hosting provided by Heroku dan klik lanjutkan maka akan muncul seperti gambar di bawah ini.

masukan kode keamanan dan klik lanjutkan.

perhatikan baik-baik gambar diatas..yang kita butuhkan adalah sebuah ID APP di dalam gambar di atas ada kode 464184770303086, kode tersebut yang kita butuhkan.

- sekarang ID sudah anda dapatkan 464184770303086
langkah selanjutnya tinggal kita sisipkan ke template caranya seperti tadi pertama kalian cari kode
</head> jika sudah ketemu silahkan pastekan kode di bawah ini tepat di atas kode </head> lalu klik save/simpan template.

<meta content='464184770303086' property='fb:app_id'/>

keterangan ganti kode 464184770303086 dengan ID yang barusan anda buat.

Jika berhasil maka tampilannya seperti di bawah ini.

Agar setiap ada orang yang berkomentar, anda mendapat pemberitahuan di facebook maka anda harus mengatur moderatornya, perhatikan gambar di atas klik tulisan settings maka akan muncul tampilan seperti gambar di bawah ini.