Facebook Comment Box merupakan cara yang baik untuk membuat blog lebih menarik dan mendorong pembaca untuk memberikan komentar jika mereka sudah login ke Facebook. Hal ini juga berfungsi sebagai sumber traffic karena dengan menggunakan Facebook Comment Box maka komentar dan halaman posting akan dikirim ke dinding Facebook pengunjung.
Bagaiman Cara Memasang Facebook Comment Box pada Blogspot
Berikut ini langkah - langkah mudah untuk memasangnya pada blog anda, ikuti caranya dibawah ini.
1.Membuat Aplikasi Facebook
- Buka Facebook Devloper Page, klik Buat Aplikasi Baru
- Lalu masukkan Nama Aplikasi dan klik Lanjutkan
- Masukkan Security Captcha lalu klik Submit
- Pada halaman berikutnya masukkan Domain anda pada App Domains sesuai dengan domain yang anda gunakan (jika menggunakan custom domain) atau masukkan blogspot.com jika tidak menggunakannya.
- Masukkan alamat blog anda pada Situs web dengan Masuk Log Facebook
- Selanjutnya klik Simpan Perubahan, sekarang Aplikasi Facebook sudah dibuat dan copy App ID untuk digunakan pada tahap berikutnya.
2.Menambahkan Kode Pada Template
berikut ini syarat yang harus dipenuhi agar Facebook Comment Box bisa di gunakan pada blogi. xmnls attribute
ii. SDK script
iiI. Open graph meta tag
iv. Comment form iframe code
- Log in dan ke Dashboard blog anda dan klik Template >> Edit HTML
- Tekan CTRL + F lalu cari kode <html lalu tambahkan kode berikut di depannya
xmlns:fb='http://www.facebook.com/2008/fbml' - Sehingga menjadi seperti dibawah ini
html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog…………..2005/gml/expr' > - Lalu cari kode <body> atau <body lalu paste kode berikut tepat di bawah/setelahnya
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APPLICATION ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Note : Ganti YOUR APPLICATION ID HERE dengan App ID yang sebelumnya dibuat
- Berikutnya menambahkan Open Graph Meta Tag, cari kode </head> lalu paste kode barikut diatasnya
<meta property="fb:app_id" content="YOUR_APP_ID" /> Note : Ganti YOUR_APP_ID dengan App ID yang sebelumnya dibuat
- Sekarang tinggal langkah terakhir, cari kode <data:post.body/> atau <div class='post-footer-line post-footer-line-1'> lalu paste kode berikut dibawahnya
<b:if cond='data:blog.pageType == "item"'>
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div align='center' class='doncaprio-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src='http://www.doncaprio.com/wp-content/uploads/2012/08/comment.png'/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div><div align='right'><a href='http://allabout-stuff.blogspot.com/2013/04/facebook-recommendation-bar-blogger.html' target='blank'><small>[Facebook Comment Box For Blogger]</small></a></div></div></p></b:if>
- Lalu Save template
Note : Jika Facebook Comment Box terlihat terlalu kecil da ingin memperbesar ukurannya, ganti width='450' dengan width='600'.
3.Mengaktifkan Notifikasi
Notifikasi sangat berguna ketika ada pengunjung yang mengomentari postingan blog degan Facebook Comment Box maka anda akan mendapatkan notifikasi pada Facebook anda.- Buka URL : https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID
- Ganti YOUR_APP_ID dengan App ID yang sudah dibuat
- Klik Pengaturan dan tambahkan anda sebagai Moderator, klik Simpan
Sekarang ketika ada pengunjung yang memberikan komentar pada posting blog anda, maka secara otomatis anda akan mendapat notifikasi pada Facebook anda.
No comments:
Post a Comment