[ADS] Top Ads

Beranda / Blogger Tutorial / Social Networking Fitur

Cara Membuat Kotak Komentar Facebook Di Blog

Setelah Sebelumnya saya mengajak anda membuat Tombol like Facebook pada postingan serta TweetBox Di Bawah Postingan Anda, Kini saya akan mengajak anda membuat Kotak Komentar Facebook Di Blog Anda.

Bentuknya seperti Gambar Diatas, Tertarik Membuatnya?

Silahkan Simak Tutorial Berikut:

Langkah 1.
  1. Pertama login ke akun blogger anda.
  2. Kemudian buka facebook anda, login terlebih dahulu, lalu masuk ke aplikasi facebook developers
  3. Kemudian buat nama aplikasi terlebih dahulu, Isikan nama Aplikasi Dengan Kotak Komentar atau lainnya setelah itu, klik tombol " Buat Aplikasi baru (create new aplication)"
Setelah itu anda akan masuk kedalam menu pengaturan aplikasi , masuk ke menu Website ,lalu masukkan url blog anda Misalnya, http://dj-note.blogspot.com/,berikan tanda / diakhir Url, lihat gambar :Jika Sudah, Save Dan Ambil Applications ID'nya(Kode Aplikasi)

Jika Sudah, masuk Ke Akun Blogger Anda Masing-masing >> rancangan(Design) >> Edit HTML >> Centang Expand Template Widget

Jika Sudah, Cari Kode Berikut:

<body>

Setelah Ketemu, Masukkan Kode Dibawah ini tepat Dibawah Kode Tersebut

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : &#39; APP-ID anda &#39;,
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(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>

Kemudian, Cari Kode <b:skin><![CDATA[/* dan Copy Kode Dibawah ini Dan taruh tepat diatasnya:

<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 andaproperty='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='APP-ID anda' property='fb:app_id'/>
<meta content='Profile-ID-Facebook anda' property='fb:admins'/>
<meta content='article' property='og:type'/>

Jika Sudah, Cari Kode <data:post.body/> dan copy Script dibawah ini tepat Dibawah kode tersebut:

<b:if cond='data:blog.pageType == &quot;item&quot;'><br/> <p align='left'><a href='http://dj-note.blogspot.com/' target='new'><img border='0'/></a></p><div><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='450'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b> by <a href='http://dj-note.blogspot.com/' target='_blank' title='Facebook Comment'>Mau Pasang Kotak Komentar kayak Gini? Klik Disini</a></b></div></b:if><br/>

Kemudian Save Template Anda Dan Lihat Hasilnya

Ps: ganti Tulisan Berwarna Merah dengan Url, App ID Serta Profil ID Anda masing-masing


Update!

Karena banyak yang nanya kenapa Kotak Komentar Facebook ini gak tayang, gak muncul, dll dan karena saya gak bisa buka blog ini tiap hari juga karena terhambat sama waktu kerja dan waktu untuk ngurus blog inti saya juga, jadi berikut saya sertakan Screen shootnya supaya anda dapat menyamakan Script yang saya berikan jika memang anda meragukan Script yang saya berikan di postingan ini:






Silahkan klik untuk memperbesar agar dapat lebih jelas terlihat, Jadi saya jelaskan lagi, jika Kotak Komentar Facebook ini tidak tayang pada blog anda, bukan karena Script yang saya berikan salah namun bisa jadi karena memang penempatan script ini pada masing-masing template berbeda, dan maaf karena saya tidak bisa menjawab pertanyaan-pertanyaan anda satu persatu dengan segera karena saya pun memiliki keterbatasan waktu dan harus kerja :)


Updated! - January 8, 2012

Pasca pembaharuan Facebook Comment atau Kotak Komentar Facebook yang baru-baru ini dilakukan oleh Tim Developer aplikasi mereka, ada satu parameter yang akhirnya ikut diganti oleh mereka yang membuat Aplikasi ini tidak dapat berjalan dengan baik di beberapa blog yang memasang Kotak Komentar facebook versi ini, untuk itu jika anda salah satu pengguna yang ikut terkena imbasnya, silahkan ganti parameter url menjadi href, untuk lebih jelasnya silahkan perhatikan perubahan yang saya sertakan dibawah ini:

Saat masih memakai Parameter url, sript dibawah kode <data:post.body/> Adalah:

<b:if cond='data:blog.pageType == &quot;item&quot;'><br/> <p align='left'><a href='http://dj-note.blogspot.com/' target='new'><img border='0'/></a></p><div><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='450'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b> by <a href='http://dj-note.blogspot.com/' target='_blank' title='Facebook Comment'>Mau Pasang Kotak Komentar kayak Gini? Klik Disini</a></b></div></b:if><br/>


Sedangkan setelah memakai parameter href, sript dibawah kode <data:post.body/> Menjadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'><br/> <p align='left'><a href='http://dj-note.blogspot.com/' target='new'><img border='0'/></a></p><div><fb:comments expr:title='data:post.title' expr:href='data:post.url' expr:xid='data:post.id' width='450'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b> by <a href='http://dj-note.blogspot.com/' target='_blank' title='Facebook Comment'>Mau Pasang Kotak Komentar kayak Gini? Klik Disini</a></b></div></b:if><br/>


Dan sebagai catatan, di beberapa template blog, parameter yang lama pun masih bisa digunakan dan tidak akan mengalami masalah apapun sekalipun tidak diganti, tapi untuk beberapa template blog yang lain, jika tidak diganti anda akan menemukan kata 'href' no required tepat dibawah kotak komentar anda, jadi update kali ini bisa saya katakan sebagai optional, so jika parameter lama kotak komentar ini bermasalah di template blog anda silahkan diganti, dan jika tidak terjadi masalah apapun, silahkan didiamkan saja :)

Dan kalo sempet, mungkin nanti saya akan tulis lanjutan cara untuk upgrade ke Kotak Komentar Facebook atau Facebook comment versi baru dipostingan lain... so, silahkan ditunggu hhe.... :)

Dan untuk anda yang ingin membuat Kotak Komentar Facebook versi baru, silahkan KLIK DISINI, disitu saya sudah secara lengkap memberikan panduan pemasangan Kotak Komentar Facebook versi baru, tapi tolong dibaca dari awal hingga tuntas karena disitu saya juga memberikan banyak catatan, dan untuk anda yang sudah memasang kotak komentar facebook versi lama saya sarankan agar anda menunggu postingan upgrade saya aja, karena klo anda ngikuin tutorial baru saya, anda secara otomatis akan kehilangan semua komentar anda :)

Tags :

38 komentar

  1. Unknown23 Agustus 2010 pukul 20.44

    yg nii rda ngbingungn brotha :))

    BalasHapus
  2. Ferdinand28 Agustus 2010 pukul 08.55

    Bingung Gmn C? org udah jelas bgt haha

    BalasHapus
  3. Hardiansyah Rusli12 Oktober 2010 pukul 14.30

    waduh dah ku coba tapi error di template gw..gmn seeeh

    BalasHapus
  4. Admin (Info Dewasa)9 November 2010 pukul 22.35

    mass..

    kok error dah..

    ga bisa di save..

    BalasHapus
  5. DJ Site | Blogger Serabutan11 November 2010 pukul 08.01

    @ Hardiansyah Rusli & Bhoncel Vhastel: Untuk Komentar FB Ini emank gak support untuk semua Jenis Template... Untuk beberapa Template Script Javascript bukan ditempatkan di bagian body tapi head... atau bagian data post bodynya yang bermasalah...

    @ Budi Mulyadi(FB): App ID itu ID yang kita dapet saat kita mengizinkan aplikasi ini bekerja untuk blog kita, coba lihat gambar diatas....

    BalasHapus
  6. Unknown24 November 2010 pukul 16.13

    nda enak.....

    BalasHapus
  7. DJ Site | Blogger Serabutan23 Desember 2010 pukul 21.03

    @ oneciwank : KLo itu tergantung selera :P

    BalasHapus
  8. SaputraMZ | mobil keluarga ideal terbaik indonesia26 Desember 2010 pukul 20.19

    Koq ga' bisa ya bro.. kode html harus ditutup katanya geto > atau /> trus gmna bro...?

    BalasHapus
  9. Anti Spam6 Januari 2011 pukul 12.58

    saya juga ikut bingung mas, setelah saya coba, dan belum berhasil...
    mohon pencerahannya mas...

    BalasHapus
  10. GEMULUNG TEAM29 Januari 2011 pukul 14.15

    kok
    error
    sih.,,, mas
    gi mna nich.,,,,,

    BalasHapus
  11. Prista Fantasia25 Februari 2011 pukul 18.33

    Mkasih mas tutorialnya, langsung dipraktekan neeh mudah2an bisa :)

    BalasHapus
  12. DJ Site | Blogger Serabutan5 Maret 2011 pukul 21.25

    @ SaputraMZ | mobil keluarga ideal terbaik indonesia : Coba cek script yg paling bawah ada tanda / yg kehapus apa gak... soalnya klo ada warning gitu bener, cuma penutup variabelnya gak ada jadi gak bisa ke save Brow...

    @ Anti Spam & GEMULUNG TEAM : Gak berhasil atau errornya kaya gimana? warningnya apa bunyinya?

    @ Prista Fantasia: Silahkan... :D

    BalasHapus
  13. bagashp7 Mei 2011 pukul 11.15

    blog joging pagi ... artikel bagus sob

    BalasHapus
  14. Andri17 Juni 2011 pukul 00.43

    Mantap gan..tp Fb ak kok msh mintak verifikasi ya??

    BalasHapus
  15. Unknown5 Juli 2011 pukul 22.07

    gan
    udah jadi tapi gk mw nongol
    malah kluar tulisan gini

    The comments plugin requires an href parameter.

    BalasHapus
  16. DJ Site | Blogger Serabutan17 Juli 2011 pukul 20.33

    @ bagashp : Makasih atas kunjungannya Sob.. :)

    @ Andri : soalnya ini kan emank bukan gadget bawaan facebook kaya Badge-nya, dan karena yg bikin Widget ini emank pihak ke-3 jadi pastinya mereka minta konfirmasi mau di Allow apa gak :)

    @ Khoirul Mustofa: beberapa waktu lalu kotak komentar Facebook ini emank lagi error dari sananya(developer pihak-3) jadi emank jadi kaya gitu bentuknya, tapi sekarang udah pulih kok, bisa dilihat pada Blog ini :)

    BalasHapus
  17. Amirudin25 Juli 2011 pukul 08.46

    iya ne q juga gak ngerti...........

    BalasHapus
  18. Amirudin25 Juli 2011 pukul 08.46

    iya ne q juga gak ngerti...........

    BalasHapus
  19. Unknown29 Juli 2011 pukul 21.12

    seepppp laaahhhhh

    BalasHapus
  20. Unknown29 Juli 2011 pukul 21.14

    gan ane mw nanya
    blog ane kn templatenya kayak gini jga
    ngeletak textsizer yg diatas tuh dmane?
    pan ada bnyk tuh sata post body nye

    BalasHapus
  21. DJ Site | Blogger Serabutan8 Agustus 2011 pukul 16.11

    @ Amirudin: Dibagian mana gan yang gak ngerti?

    @ Khoirul Mustofa : Owh punya ente <data:post.body/> nya lebih dari 1 ya? klo lebih dari satu taro di yang paling bawah, klo templateku cuma 1 soalnya...

    @ Adhy Pradella Barnes Setiawan: Jangan cuma bilang tai lu, udah nyoba blom? klo nih script gak bisa ngapain gw kasih tutorialnya...

    @ Redbastard de Santoz: Apa yang mau dibenerin orang script udah bener... :) klo gak bener ya gak tayang di blog ini...

    BalasHapus
  22. Unknown8 Agustus 2011 pukul 22.58

    sori2, koment lagi nehh . . .
    msih ttep gk bissa
    msih nongol tulisan kayak di komenan prtama tadi yg bwat kotak komentar

    BalasHapus
  23. DJ Site | Blogger Serabutan9 Agustus 2011 pukul 11.01

    @ Khoirul Mustofa: Maksudnya? gak bisanya disertai sama tulisan warning? warningnya apa tulisannya???

    BalasHapus
  24. Lihat Punya Gue10 Agustus 2011 pukul 14.12

    gan ikut nambahin warningnya kaya gini:

    Peringatan: http://783989727606776033/ tidak dapat dihubungi.

    BalasHapus
  25. e-Xpresi Gue10 Agustus 2011 pukul 14.15

    @Khoirul Mustofa

    ada yang error sob coba lihat yang ini expr:xid='data:post.id
    ganti saja pake expr:href='data:post.url' kalau nggak diganti kode yang itu pasti ada tulisan gini The comments plugin requires an href parameter
    makasih mas tutornya salam persahabatan dari Forum ACF

    BalasHapus
  26. Unknown11 Agustus 2011 pukul 12.03

    Plugin komentar memerlukan parameter href.

    BalasHapus
  27. DJ Site | Blogger Serabutan13 Agustus 2011 pukul 20.58

    @ Khoirul Mustofa : blognya yang http://exact2sman3.blogspot.com/ ya? klo itu sih bukan karena ada masalah sama Scriptnya tapi sama koneksi akun FB yang dipake buat allow plugin ini dan penyedia plugin ini... soalnya beberapa waktu lalu saya pernah ngalamin itu juga disini dan pulih sendiri tanpa diapa2in...

    @ e-Xpresi Gue : sama kaya diatas itu bermasalah sma koneksi antara Akun FB yang dipake untuk Allow dan penyedia plugin ini. Dan untuk parameter justru yang expr:xid='data:post.id yang bener karena disini yang dipanggil bukan parameter untuk link :) untuk lebih jelasnya coba perbesar dan perhatikan gambar paling akhir dipostingan ini.

    @ All: postingan ini sudah saya update beserta gambar, jadi tolong perhatikan 3 gambar screen shoot yang saya berikan dan silahkan cocokan klo memang anda gak percaya bahwa script ini benar :)

    BalasHapus
  28. Unknown30 Agustus 2011 pukul 21.18

    @dj: okey2 . . .
    tak coba lagiii

    BalasHapus
  29. DJ Site | Blogger Serabutan3 September 2011 pukul 21.22

    @ Khoirul Mustofa : Monggo.. :)

    BalasHapus
  30. Andre8 September 2011 pukul 17.56

    ccc

    BalasHapus
  31. DJ Site | Blogger Serabutan10 September 2011 pukul 17.31

    @ Andre : :)

    BalasHapus
  32. Abu Jabbar15 September 2011 pukul 13.34

    Terimakasih infonya ...

    BalasHapus
  33. DJ Site | Blogger Serabutan16 September 2011 pukul 16.41

    @ http://zul.afdal.tk : sama2 Sob.. :)

    BalasHapus
  34. Unknown14 Oktober 2011 pukul 22.57

    thx ya...
    jgan lupa kunjungi Blog ak jga..
    www.noteblank.blogspot.com

    BalasHapus
  35. phoneseluler31 Oktober 2011 pukul 14.51

    mantap bro... boleh dicoba nih nanti2...

    BalasHapus
  36. DJ Site | Blogger Serabutan11 November 2011 pukul 17.08

    @ City Vasc Dan phoneseluler: Sama2... monggo klo mau dicoba.... :)

    BalasHapus
  37. Fedri Andhika31 Desember 2011 pukul 16.02

    mksii
    akhirnya bisa juga pasang kotak komentar fb...

    BalasHapus
  38. Anonim24 Agustus 2012 pukul 18.31

    Plugin komentar memerlukan parameter href.
    gimana cara mengatasinya ??
    mohon pencerahannya http://r19.imgfast.net/users/1917/12/13/66/smiles/973252403.gif

    BalasHapus

Posting Komentar

Copyright © 2023

Cookies