Kali ini share cara merubah tampilan komentar yang biasanya ada di bagian bawah posting blog. Bisa dibilang komentar di blog tampilannya mungkin kurang menarik atau bahkan sangat tidak menarik bagi beberapa orang (termasuk saya :p ). Kita juga harus memasukkan alamat email bila ingin memberi komentar, kadang hal ini membuat kita malas berkomentar karena harus mengisi inilah itulah dan sebagainya.
Lain halnya jika blog kita memiliki kotak komentar yang simpel dan mudah digunakan, facebook menyediakan fasilitas untuk ini. Mereka juga memudahkan kita menambahkan kotak komentar ala facebook diblog, langsung aja kita bahas langkah-langkahnya...
- Pertama, kita login dulu ke facebook, kemudian buka http://developers.facebook.com/setup untuk membuat aplikasi.
- Akan muncul jendela baru yang meminta kita memberi nama aplikasi. Isikan aja sesuai selera :)
- Kemudian isikan detail aplikasi temen-temen, contact email, app domains, dan site url blog temen-temen.Jangan lupa copy app id ke notepad.
- Sampai disini kita selesai berurusan dengan facebook, lanjut login ke blogger. Masuk ke menu rancangan->edit html klik "expand template widget"
- Paste code berikut setelah tag <head>
<meta content='YOUR_FACEBOOK_APPLICATION_ID' property='fb:app_id'/>
- Temen-temen ubah YOUR_FACEBOOK_APPLICATION_ID dengan app id yang dicopy sebelumnya.
- Setelah itu tekan ctrl+f di browser cari kode berikut
'post-footer-line post-footer-line-3'- Tambahkan kode berikut tepat dibawahnya.
<b:if cond='data:blog.pageType == "item"'> <div id='fb-root'/> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='450'/> </b:if>
- Yang terakhir, tambahkan kode berikut setelah tag <html
xmlns:fb="https://www.facebook.com/2008/fbml"
Oke, selesai sudah tutorial kali ini. Temen-temen bisa save template trus preview deh...
Oh iya, setelah saya coba-coba lagi, berhasil atau tidaknya tergantung dengan template yang digunakan..