Setelah kemarin facebook meluncurkan sebuah widget like button/tombol suka yang biasanya di pasang di bawah artikel blog ,kini facebook telah membuat widget komentar yang baru yang bisa di pasang di blog kita (blogspot,blogger,wordpress,dan lainnya) contohnya seperti gambar di bawah :
Ya udah dari pada berbelit-belit langsung aja caranya untuk pengguna Blogger/Blogspot.
Langkah pertama : Disable atau non aktifkan default comments
- setting(pengaturan) - Comments - Pilih options Hide
*sehingga form komentar standart blogger tidak muncul*
Langkah Kedua : Buat aplikasi di Facebook, masuk ke sini
Kalau sudah, klik set up new apps di sebelah kanan atas.
Isi nama aplikasi, contohnya "Kotak Komentar", Agree dan Create Apps
Kemudian, setelah verifikasi kata, akan muncul tampilan baru. Klik "Web Site" pada menu sebelah kiri anda
Isi Site URL dengan URL blog anda contoh: http://contoh.blogspot.com/
*slash setelah kata .com sangat penting, hal ini paling sering dilupakan.
Isi Site Domain dengan "Blogger.com"
Klik "Save Change"
Langkah Ketiga : Saatnya masuk ke Blogger Dashboard anda ,pada Layout atau Design - edit html ,centang expand widget templates
cari kode <html (*gunakan ctrl+F)
tambahkan kode ini setelah kode <html
xmlns:fb='http://www.facebook.com/2008/fbml'
sehingga kodenya menjadi seperti ini
<html xmlns:fb='http://www.facebook.com/2008/fbml'
Langkah Keempat : Cari kode </body>
kemudian pastekan kode di bawah ini setelah kode </body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'Application ID Anda',
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>
*Jangan lupa mengganti kode yang berwarna merah dengan Application ID anda yang tadi.
Langkah Kelima : cari kode </head>
pastekan kode berikut di sebelum </head>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='URL Blog Anda' property='og:site_name'/>
<meta content='Application ID Anda' property='fb:app_id'/>
<meta content='Profile ID Anda' property='fb:admins'/>
<meta content='article' property='og:type'/>
Jangan lupa mengganti tulisan yang berwarna merah:
- URL Blog Anda : isi dengan nama situs anda (muncul ketika seseorang berkomentar)
- Application ID Anda : isi dengan kode yang tadi.
- Profile ID Anda : isi dengan profil facebook anda
Langkah Terakhir : cari kode <data:post.body/>
jika anda menemukan dua kode yang sama pilihlah kode yang kedua .
- pastekan kode berikut setelah <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='480'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> </div></b:if>
*keterangan= ubah 480,sesuaikan dengan lebar main-wrapper anda
Kemudian Save Templates
Semoga berhasil .
Contoh
Ya udah dari pada berbelit-belit langsung aja caranya untuk pengguna Blogger/Blogspot.
Langkah pertama : Disable atau non aktifkan default comments
- setting(pengaturan) - Comments - Pilih options Hide
*sehingga form komentar standart blogger tidak muncul*
Langkah Kedua : Buat aplikasi di Facebook, masuk ke sini
Kalau sudah, klik set up new apps di sebelah kanan atas.
Isi nama aplikasi, contohnya "Kotak Komentar", Agree dan Create Apps
Kemudian, setelah verifikasi kata, akan muncul tampilan baru. Klik "Web Site" pada menu sebelah kiri anda
Contoh
Isi Site URL dengan URL blog anda contoh: http://contoh.blogspot.com/
*slash setelah kata .com sangat penting, hal ini paling sering dilupakan.
Isi Site Domain dengan "Blogger.com"
Klik "Save Change"
Langkah Ketiga : Saatnya masuk ke Blogger Dashboard anda ,pada Layout atau Design - edit html ,centang expand widget templates
cari kode <html (*gunakan ctrl+F)
tambahkan kode ini setelah kode <html
xmlns:fb='http://www.facebook.com/2008/fbml'
sehingga kodenya menjadi seperti ini
<html xmlns:fb='http://www.facebook.com/2008/fbml'
Langkah Keempat : Cari kode </body>
kemudian pastekan kode di bawah ini setelah kode </body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'Application ID Anda',
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>
*Jangan lupa mengganti kode yang berwarna merah dengan Application ID anda yang tadi.
Langkah Kelima : cari kode </head>
pastekan kode berikut di sebelum </head>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='URL Blog Anda' property='og:site_name'/>
<meta content='Application ID Anda' property='fb:app_id'/>
<meta content='Profile ID Anda' property='fb:admins'/>
<meta content='article' property='og:type'/>
Contoh
Jangan lupa mengganti tulisan yang berwarna merah:
- URL Blog Anda : isi dengan nama situs anda (muncul ketika seseorang berkomentar)
- Application ID Anda : isi dengan kode yang tadi.
- Profile ID Anda : isi dengan profil facebook anda
Langkah Terakhir : cari kode <data:post.body/>
jika anda menemukan dua kode yang sama pilihlah kode yang kedua .
- pastekan kode berikut setelah <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='480'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> </div></b:if>
*keterangan= ubah 480,sesuaikan dengan lebar main-wrapper anda
Kemudian Save Templates
Semoga berhasil .
Tidak ada komentar:
Posting Komentar
Pembaca yang baik selalu meninggalkan komentarnya :)
Dimohon untuk mencantumkan nama ya :D
Jangan pakai profile anonymous :)
(Gunakan profile: Name/URL pada pilihan di kotak komentar, URL bisa dikosongkan)
Terima Kasih udah mampir :D