Choose Your Language

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Rabu, 16 Maret 2011

Memasang Kotak Komentar Facebook Untuk Blog

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 :





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 == &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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:

Poskan 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