Memasang Kotak Komentar Facebook + Notifikasi

Memasang Kotak Komentar Facebook + Notifikasi, ini merupakan cara baru penerapan komentar facebook pada blog yang setiap ada komentar pada blog kita, akan otomatis muncul notifikasi langsung ke facebook admin, jadi membuat kita update dan membaca setiap komentar para visitor kita. langsung saja ke tutorialnya.

Step 1. Disable/nonatifkan komentar default blog

Kenapa ? karena nanti tampilan blogmu akan rancu kalau ada 2 kotak komentar.
Cara Disable : Buka Akun blogger ? setting ? comments ? Pilih "Hide" ? Save Setting.

Step 2. Membuat aplikasi facebook untuk komentar blog

Masuk ke link Facebook Developers ? Buat Aplikasi ? Masukkan Nama Aplikasi (terserah anda) ? tandai "SETUJU" ? klik "Create Application"
Nah aplikasi selesai, tinggal kita konekin ke blog kita, masuk ke tab "Situs Web" lihat gambar

Klik Untuk Memperbesar

Setelah itu klik "Simpan Perubahan"

KLIK UNTUK MEMPERBESAR GAMBAR

Nah, kita sudah dapatkan ID aplikasinya, kita lanjut lagi ke blogger

Step 3. Memasukkan Kode Ke Template Blog

Masuk ke akun blogger ? Layout ? Edit HTML ? Expand Widget Template
cari kode ini <html
Kalu sudah ketemu, tambahkan kode dibawah ini

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

Harus ada Spasi diantara kode tersebut, ini contohnya

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog......2005/gml/expr' >

Langkah selanjutnya, Cari kode <body>
Setelah kode atau dibawah kode diatas masukkan script dibawah ini

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

Selanjutnya, Memasang Open Graph Protocol Tags

<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='NAMA BLOG ANDA' property='og:site_name'/>
<meta content='URL LOGO BLOG ANDA.gif'   property='og:image'/>
<meta content='ID APLIKASI ANDA'   property='fb:app_id'/>
<meta content='ID FACEBOOK ANDA'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

Sesuaikan Tulisan yang berwarna merah diatas dengan blog anda dan facebook anda
setelah merubah/mengedit script diatas, cari kode </head>, lalu simpan script diatas sebelum tag tersebut atau diatasnya.

Step 4. Menambahkan kotak komentar facebook.

cari kode <data:post.body/> kemudian masukkan script dibawah ini kebawah kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' colorscheme='dark' expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='om-dayz.blogspot.com' class='icon-action' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL8qE-33NIIF0yLq_1JVp8kmK35KRBsHlVH9rZLrjZYHyGh8FlsytLRbR90azNWyWEAjlgPGjQHUroInAzUYbnUYAx5I5GWBKKWiTl_u6xKmv4yDpRGvnIL_HAzKgfF6ko4RV57pmuGPk/s1600/logo2.gif' width='16'/> <b><a href='http://www.om-dayz.blogspot.com/' target='_blank' title='blogger templates, blogger tutorials, om-dayz'>Om-Dayz Comments For Blogger</a>  Mau Pasang Kotak Kmentar Facebook Seperti Ini ? Klik Link ini !<a href='http://om-dayz.blogspot.com/2011/10/memasang-kotak-komentar-facebook.html'>Om-Dayz Facebook Comment Tutorial</a></b></div>
</b:if>

Tulisan yang berwarna merah edit sesuai dengan blog anda, Untuk Colorscheme hanya ada 2 pilihan warna, yaitu Dark dan Light!

Silahkan dicoba, saya sendiri sudah menerapkan kotak komentar facebook ini di blog saya yang lama http://lorddayz.blogspot.com dan berhasil.
Selamat Mengoprek :))