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='http://4.bp.blogspot.com/-40z7ylaBq5s/TiPFbcCCoMI/AAAAAAAAAK8/oIT9kBXOnvs/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 :))
Bagikan ke Teman ›
om-dayz lintasme
om-dayz facebook share
om-dayz Tweet Button
om-dayz digg Submitter

43 komentar Untuk Memasang Kotak Komentar Facebook + Notifikasi

  1. Pertamaxx,tapi nih tutornya bisa blog jadi berat gk om ?

    BalasHapus
  2. silahkan kesini sob http://lorddayz.blogspot.com
    nilai sendiri deh :)
    buka postingannya :)

    enjoy it ^^

    BalasHapus
  3. Wah kalo menurut ku sih lumayan,soalnya beratnya di campur ama background2 di blog itu

    BalasHapus
  4. hehehehe,, itu tergantung koneksi dan tampilan blog itu sendiri :D

    BalasHapus
  5. sip om trik nya bisa dicoba nih,
    makasih banyak terus update om :v

    BalasHapus
  6. Kurasa akan lebih nikmat dengan kotak komen yang SEO Friendly (menurut saya :) ) kalau Facebook mungkin dipasang sekunder atau tidak pokoklah, dan Comment facebook tidak terlihat dimata Google

    BalasHapus
  7. @Nauhtyric
    silahken :v

    @Farixantips
    iyaa sob,,betul tuh,, hhee
    lebih banyak komentar juga klo make Kotak komentar bawaan blog :D

    BalasHapus
  8. Gagal Pertamax Deh YAng Pntng FourTHumbsUp

    BalasHapus
  9. wahh eksis lagi nih om,, mulai posting tutorial lagi ,, :v.. tutorial cara bikin domain dong om,, biar ane gak kebakaran jenggot lagi,, wkwkkwkw,,

    BalasHapus
  10. @Rieco
    thx :D

    @RamaEightEight
    wwkwkwkwk,, hadeh,, saya lagi ol nih,, koq gk ol lu cuy ?
    daritadi we tungguin =="

    BalasHapus
  11. jadi lebih mudah termonitor ya mas.. hebat :)

    BalasHapus
  12. @Majalah Masjid Kita

    iyaa masbro :)
    notifikasi masuk langsung ke facebook admin :)

    BalasHapus
  13. ane pernah make, tapi jadi berat banget blognya. ada gak ya yang versi entengnya

    BalasHapus
  14. kalo aku sih pake WP jadi tinggal install pluginnya wae..
    tapi keren ni tutorialnya,,sangat bermanfaat..

    BalasHapus
  15. @Apakah ini itu
    hhee,, msa sih mas ?
    blog aku make itu ringan ttep koq
    :)

    @ip-ip
    hhee,,mantep neh make WP
    tinggal install plugin
    sukses trus blognya mas :)

    BalasHapus
  16. udah pernah coba di blog saya yang satunya
    cmn ijin nyimak aja :)

    BalasHapus
  17. @Rezki
    hhee iyaa masbro,, makasih kunjungannya :)

    BalasHapus
  18. Meskipun sedikit ribet namun tutor ini sangat bermanfaat utk promosi blog.
    Happy bloggig..!!

    BalasHapus
  19. @Prapatak Kretek
    hhee,, iya mas,, enjoy it :)

    BalasHapus
  20. uda ane coba gan tpi klo ada yg komeng ga ada pemberitahuan nya sama kita :D

    BalasHapus
  21. jiah =))
    msa sih ?
    wkwkwkw
    ada yg salah langkah ato salah ngisi kali
    saya juga pakai itu koq di blog http://lorddayz.blogspot.com
    dan setiap ada yg koment masuk ke pemberitahuan :)

    BalasHapus
  22. Saya dah follove om-dayz
    folback yak di http://tedisunjaya.blogspot.com

    salam kemahoan :v

    BalasHapus
  23. Saya dah follove om-dayz
    folback yak di http://tedisunjaya.blogspot.com

    salam kemahoan :v :ngkak ah

    Slam maho om dayz :ngacir ke sono >............http://om-rieco.blogspot.com/

    BalasHapus
  24. @Teddy & Rico
    ococ,, segera meluncur ke TKP =))

    BalasHapus
  25. @Rumah Dijual
    iyaa sob,, sama2 :)
    sering2 berkunjung ya :D

    BalasHapus
  26. mantap kk :* aku mau dong di pajang blog ku di blog kk :* biar terkenal :*

    BalasHapus
  27. menarik banget .
    harus langsung ke tkp nih

    BalasHapus
  28. thanks buat infonya .
    postingan yang menarik .
    ditunggu postingan menarik lainnya

    BalasHapus
  29. informasi yang bagus kawan, kebetulan saya lagi mencari tutorial tentang ini, tapi apakah komentar ini diarahkan ke masing-masing postng ya..? gak untuk semua post.. makash

    BalasHapus
  30. like this blog..
    kunjung balik blog saya gan :)

    BalasHapus
  31. mas maap nanya maklum ibu2 rt yg gaptek tp brusaha exis hhhh...hhhh...abis create application simpan trus masuk "situs web"? yg mana maaf gag ngerti di blog saya ato pd facebook...trimaksh semoga Allah membalas kebaikannya ya....amin

    BalasHapus
  32. cara mengetahui komentar facebook yang masuk gimana ????

    BalasHapus
  33. keren banget tutorialnya.., oiya kok facebook saya gak ada notifikasinya yah

    BalasHapus
  34. cuman bsa bilang makasih aja dah gan . .

    BalasHapus
  35. tulisan yang menarik, makasih atas ilmu yang anda tulis di sini,

    BalasHapus
  36. Thq gan info nya ... jadi cukup da pencerahan nehhh

    BalasHapus
  37. Mkasi Infonya sob . . .
    berguna bgt buat Blog Newbie seperti ane . . . ^_^

    Visit --> http://IT-cybererror.blogspot.com

    BalasHapus
  38. kunjungan malam sob http://cyberbintauna.blogspot.com

    BalasHapus
  39. Terimakasih untuk tutorialnya, saya coba dulu

    BalasHapus
  40. Saya pake app ini... Namun sayangnya Komentarnya gak bisa dimoderasi atau gak muncul diNotifikasi facebook kita, cuman anehnya diblog satunya bisa muncul... Btw ada setiingan selain ditutorial ini?

    BalasHapus

Follow Me On Twitter Facebook Fanspage Circle Me On Google Plus Subscribe to RSS Feed