Cara Memasang Comment FB di Blogspot

Salam semangat SEO Blogger !!

Facebook adalah salah satu situs jejaring sosial yang paling populer, itulah sebabnya mengapa menggunakan Plugin Facebook Comments di blog menjadi penting. Dengan adanya Form Komentar Facebook, selain dapat memancing minat pengunjung untuk memberikan komentar terhadap artikel yang dipublish, juga Form Komentar Facebook akan memberikan kemudahan bagi pengunjung untuk berkomentar, karena mungkin saja pengunjung tersebut memiliki Account Facebook tetapi belum memiliki account Google maupun account LiveJournal, WordPress, Typepad, AIM, ataupun OpenID seperti yang terdapat pada Form Komentar Standart bawaan blogger, sekalipun pada form standart ini tersedia account Anonymous.

Pada posting kali ini, dijelaskan bagaimana cara memasang Plugin Facebook Comments tanpa mengganti Form Komentar bawaan blogger, pengunjung dapat memilih akan menggunakan Form Komentar Facebook atau menggunakan Form Komentar Blogger dalam memberikan komentar di blog, karena widget ini akan tampil dalam bentuk ”Multi Tab”. Tab dapat klik dan Form Komentar akan ditampilkan sebagai layar yang terpisah dan akan ditampilkan pula jumlah komentar pada masing-masing tabbed, widget ini menggunakan kode Javascript dan CSS. Tampilan Facebook Comments dan Blogger Comments dalam bentuk multi tab komentar di blog.

Syarat utama memasang Plugin Facebook Comments ini adalah anda harus membuat satu Application ID di Facebook atau API Key Facebook, caranya cukup sederhana, ikuti langkah di bawah ini.

Anda harus dalam posisi Login ke Facebook

Kunjungi Facebook Developer Pages

Masukkan Application Name jika nama aplikasi yang ada masukkan valid klik tombol Continue

Masukkan kode captcha yang muncul pada kotak konfirmasi lalu klik tombol Submit.

Pada halaman selanjutnya masukkan nama domain blogspot.com pada kotak App Domain di bagian Basic Info dan pada bagian Website, masukkan URL blog anda pada kotak Site URL seperti gambar di bawah ini, kemudian klik tombol Save

Catat Application ID atau API Key Facebook yang terbentuk, lihat gambar di bawah.

Berikut adalah langkah untuk memasukkan Plugin Facebook Comments di blog

Pilih menu Template, sebelum melakukan perubahan sebaiknya lakukan Backup Template terlebih dahulu.

Klik Template >> Edit HTML >> Proceed beri tanda ✔ check pada kotak Expand Widget Templates

Cari kode <head> pada dokumen HTML template anda.

Copy kode di bawah ini dan paste tepat di bawah kode <head>

Ganti kode yang ditulis dengan warna Merah tebal dengan API Key Facebook yang telah anda buat sebelumnya, anda juga dapat mengganti URL image (kode dengan tulisan hitam tebal) dengan URL image anda, dengan catatan ukuran image 30px x 30px

Selanjutnya cari kode <html bentuknya kira-kira seperti di bawah ini, setiap template kemungkinan akan berbeda.

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Ganti kode <html tersebut di atas dengan kode di bawah ini

<html xmlns:fb='http://www.facebook.com/2008/fbml'

Sehingga kode akan menjadi seperti di bawah ini. Beri spasi antara kode yang baru saja anda tambahkan dengan kode yang sudah ada sebelumnya.

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Selanjunya cari kode ]]></b:skin>

Copy kode CSS di bawah ini dan paste di atas kode ]]></b:skin>

/*--- Facebook Comments By MP ----*/
.comments-page {background-color: #f2f2f2; width:520px;}
#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;}

Anda dapat mengganti warna background #f2f2f2 sesuai yang anda inginkan, yang ada pada sidebar blog ini untuk mengetahui kode warna, sesuaikan pula lebar form komentar width:520px dengan design template anda.

Selanjutnya cari kode <div class='comments' id='comments'>

Copy dan paste kode di bawah ini tepat di bawah kode <div class='comments' id='comments'> jika anda menemukan lebih dari satu kode seperti ini pada dokumen HTML template anda gunakan saja kode yang pertama.

<fb:comments-count expr:href='data:post.url'/> Facebook 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/> Blogger 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 colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='520'/><div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:440px;'>Facebook Comments by <b> <a href='http://blogseoblogger.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blogger Widgets</a></b>
</div>

</b:if>
</div>

Jika anda melakukan perubahan ukuran lebar form komentar untuk kode CSS pada point 11 di atas, samakan dengan kode ini width='520'

Jika terjadi error pada saat menyimpan Template hapus kode yang diarsir Pink pada kode di atas.

Simpan Template anda dengan menekan tombol Save Template

Catatan :

Untuk mempermudah pencarian gunakan ctrl + f di keyboard anda

Selamat mencoba dan semoga postingan ini bermanfaat.