Memasang Kotak Komentar Facebook di Blogspot

Lagi-lagi facebook menciptakan sebuah aplikasi baru yang bisa dipasang di web/blog.
Mungkin sama dengan beberapa sistem komentar lain seperti Intensedebate maupun DisQus, tapi sistem komentar yang diberikan facebook ini lebih simple dan terintegrasi baik dengan Facebook.

Demonya bisa kalian lihat sistem komentar yang ada di di www.yudhaisme.co.cc
Sistem komentar ini sebenarnya ditujukan agar pengguna facebook dapat berkomentar di blog kita dengan mudah

Sebelumnya kamu harus sudah dalam keadaan login di facebook

Kunjungi pengaturan Facebook Developer
Daftarkan blogmu dengan mengisi formulir yang diberikan:
Nama situs: Nama situs/blog kamu
Url situs: Alamat blog kamu (contoh:http://www.yudhaisme.co.cc/ selalu akhiri dengan slahs "/")
Lokasi: pilih bahasa Indonesia
Kamu akan diberikan beberapa kode seperti ID Aplikasi,

Copy kode tersebut atau catat di notepad karena nantinya kode itu akan dibutuhkan sebagai APP ID FACEBOOK KAMU

Perlu diketahui bahwa sistem komentar ini menggunakan kode FBML
Supaya Template support FBML maka kita lakukan langkah berikut

Masuk ke Blogger kamu
Menuju ke "Rancangan" dan pilih "Edit HTML"
Cari kode <html lalu paste kode dibawah ini tepat disebelahnya

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

Sehingga secara keseluruhan menjadi:

<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' >

Lalu langkah berikutnya paste kode dibawah ini dibawah <body>

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId : 'APP ID FACEBOOK KAMU',
      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>

Kode berwarna merah adalah kode (ID) aplikasi facebookmu yang tadi kamu dapatkan di langkah sebelumnya
Langkah selanjutnya adalah memasang Open Graph protocol
Caranya cari kode dan paste kode berikut distasnya

<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='MY-SITE-NAME' property='og:site_name'/>
<meta   content='http://google.com/help/hc/images/logos/blogger_logo.gif'   property='og:image'/>
<meta content='APP ID FACEBOOK KAMU'   property='fb:app_id'/>
<meta content='ID FACEBOOK PROFILE KAMU'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

Penjelasan kode:

kode berwarna ungu adalah nama situs kamu
kode berwarna kuning adalah logo aplikasi facebook kamu
kode berwarna merah adalah kode (ID) aplikasi facebookmu yang tadi kamu dapatkan di langkah sebelumnya
kode hijau adalah kode (ID) faceboom profile kamu

Cara mengetahui ID facebook profile:

Kamu masuk ke Profil kamu lalu kamu lihat alamat di adress bar browser kamu

http://www.facebook.com/yourprofile?v=wall&story_fbid=143315#####1902&ref=notif

10 angka setelah kode fbid= (yang berwarna biru) merupakan ID profile kamu
Simpan template

Selamat Blog kamu sudah support FBML
Selanjutnya adalah tahap pemasangan kotak komentar!

Kamu expand widget template kamu!
Cari kode <data:post.body/>
Lalu paste kode ini dibawahnya

<b:if cond='data:blog.pageType == "item"'>
<div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div><div style='background-color: #FFFFFF;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisEDEA07rOTdPVw6PFnyS-JKXmqimgFhP_g385UvPTcd9kB_LGcka0_5mDc60pT_6tH05Lq-WLYcehpivF6yQmWfPqtzEUq33ftBvW83c1Md_2QIvQ0OMtPOF74X33poT2uvrcOFfTr8A/s400/favicon-16.png' width='16'/> <b><a href='http://yudhaime.co.cc/' target='_blank'>Facebook comments untuk blogger</a> untuk mendapatkannya <a href='http://blog.yudhaime.co.cc/2010/07/memasang-kotak-komentar-facebook-di-blogspot.html' target='_blank' title='blogger facebook'>KLIK di sini</a></b></div>
</b:if>

Kode berwarna orange adalah lebar kotak komentar, ganti sesuai keinginan!
Simpan template
Bagi yang menginstal auto readmore, paste kode fecebook tadi tepat dibawah kode auto readmore