Memasang Kotak Komentar Facebook di Postingan Blog V2

Kotak komentar facebook di postingan blog sangat bagus diterapkan dalam postingan blog, ini berfungsi mirip dengan like dan share facebook. Pada postingan terdahulu saya sudah membuatkan tutorial tentang cara memasang komentar facebook di blog versi pertama. Memang ada kelemahan di sana yaitu, komentar facebook muncul di beranda, sehingga halaman homepage terlihat penuh, jika semakin banyak komentar dari pengguna facebook. (Mungkin karena kesalahan penempatan kode yang pernah saya lakukan.)

Pada artikel kali ini saya akan membuatkan tutorial bagaimana cara menambahkan kotak komentar facebook di postingan blog. Ya, kotak komentar ini hanya akan muncul di postingan blog dan komentar default blogspot bisa batasi / sembunyikan sebagian. Cara ini sedikit berbeda dengan yang pertama dan menurut saya agak rumit, karena kita harus membuat aplikasi sendiri di facebook. Namun saya yakin sobat blogger pasti bisa.

Untuk melihat live demonya silakan sobat buka disini dan   di sini,

Ada 4 langkah yang kita lalui dalam menerapkan ini. 
1. Menyembunyikan komentar asli / default blogspot. (Ini opsional bisa ya bisa tidak)
2. Membuat aplikasi komentar di facebook
3. Memasang aplikasi dan Menambahkan moderator meta tags di template blog.
4. Memasang kotak komentar facebook di edit HTML template

Oke saya kira langsung saja kita ikuti tutorialnya.  
Ingat, saya sarankan sobat mencobanya di blog percobaan dulu, baru sobat ulang lagi diblog yang sobat inginkan !!

A. Menyembunyikan komentar default blogspot (opsional)


Menyembunyikan komentar bawaan blog ini adalah pilihan bisa iya bisa tidak. Jika disembunyikan maka yang muncul cuma komentar facebook, sedangkan jika tidak maka yang muncul keduanya.

Masuk ke akun blogger > Dasbor > Setelan/Setting > Pos dan Komentar. Selengkapnya lihat gambar.
komentar facebook di posting blog


B. Membuat aplikasi komentar facebook

 

1. Pastikan sobat login di facebook kemudian masuk ke Facebook Developers Page
2. Klik Ke Aplikasi > Klik Create New App. Akan muncul seperti gambar di bawah. 


facebook box comments

     Isi nama aplikasi yang akan dibuat, akan muncul valid jika tersedia, klik lanjutkan
 
3. Setelah itu akan muncul Security Check Captcha, masukkan kode yang diminta pada form, kemudian kirim/submit

4. Setelah langkah di atas mungkin akan terjadi berulang kembali kita disuruh memasukkan ulang kode captcha, teliti ada opsi untuk konfirmasi lewat nomor telepon. (Langkah ini mungkin tidak selalu, karena saat saya mencoba lewat akun facebook yang lain tidak memerlukan proses ini.) Jika selesai langkah 3 bisa juga langsung muncul gambar berikut;


membuat memasang dan menambahkan komentar facebook di blogger

Simpan code App ID yang nantinya akan kita masukkan di meta tag template blog. Setelah itu isikan alamat blog kita, App Domain ketikkan blogspot.com jika kita masih memakai blogspot dan isi sesuai domain sendiri jika kita memakai domain sendiri, sesuai keterangan gambar di atas. Pada Website masukkan alamat url blog kita. Lalu save changes / simpan perubahan. 

C. Memasang aplikasi dan Moderator meta tag aplikasi di template blog.


Masuk akun blogger > Template > Edit HTML > Centang Expland Template Widgets. Masukkan kode di bawah di atas kode <b:skin><![CDATA[. Kemudian Save Template.




Masukkan nomor App ID yang didapat pada langkah B4 caranya ganti nomor unik facebook application ID dengan angka nomor ID

 D. Memasang Kotak komentar facebook di bawah posting blog.


1. Cari kode berikut di edit HTML template


Jika tidak ada cari kode

<p class='post-footer-line post-footer-line-3'>
atau kode

<data:post.body/>

Lalu masukkan kode di bawah ini, tepat di bawahnya kode diatas (pilih satu saja).




Silakan sesuaikan lebar '450' kotak komentar facebooknya.  Dan light menjadi dark jika template sobat gelap. Simpan template. dan kotak komentar facebook sobat sudah terpasang di postingan blog. Silakan buka salah satu postingan blog. Jika belum muncul silakan refresh / reload halaman posting tersebut. Demikian tutorial bagaimana cara membuat dan memasang komentar facebook di bawah postingan blog. Silakan di coba. 

 


71 komentar:

  1. mantap gan,,,berhsil..................

    ReplyDelete
  2. info bagus gan
    http://wartech-military.blogspot.com

    ReplyDelete
  3. ko gk bisa gan..pada saat save bagian
    pengisiian APP ID nya
    selalu di tolak save edit nya.

    ReplyDelete
  4. masukkan App Id yg didapat ke kode bagian C, ganti " Nomor Unik FACEBOOK_APPLICATION_ID " dengan nomor App Id yg diberikan, masukkan di template edit HTML. Simpan. silakan ulangi lagi.

    ReplyDelete
  5. Thanks Bro...mantap postingnya..aku udah berhasil nih..

    ReplyDelete
  6. tks infonya, gan! visit me juga yaa

    ReplyDelete
  7. Aduh, gan oq ga bisa ya.. g bs d parse pas d pratinjau.. aq cek lagi kyknya g da yg brubah... apanya yah

    ReplyDelete
  8. @ Damz and Ruli coba aja facebook commnet Versi 1 lebih mudah.

    http://blogbelajar2.blogspot.com/2012/02/memasangmembuat-komentar-facebook-di.html

    ReplyDelete
  9. Sangat Bagus kak.. saya akan coba :)

    ReplyDelete
  10. nggak bisa ,,,ada yang salah yaa ...

    ReplyDelete
  11. Replies
    1. nggak berhasil om.
      cari tutor yang lain ah..

      Delete
  12. makasih boss infonyaaa.. sangat berguna

    ReplyDelete
  13. Wah mantab banget nih baru berhasil haha :D

    ReplyDelete
  14. Gan Gimana Kalo Nga' Ada Di Tempale Saya

    Mohon Bantuan'a :D

    ReplyDelete
  15. wah friends tips ny SUPER HEBAR nice....
    mohon ijin coba nya y......

    klo mau lihat nich my blog
    http://poetra-pajaten-cheater.blogspot.com/

    ReplyDelete
  16. terimakasih banyak gan....

    tutorial ini sangat membantu..

    ReplyDelete
  17. Alhamdulillah thx saudaraku mantap hahahahaha

    ReplyDelete
  18. gagal bro...
    kode ada 3 bro di blog gw binggung gw milih yg mana

    ReplyDelete
  19. Nice Info, Sudah berhasil diterapkan pada Blog saya..
    Terimakasih, boss..
    Saya newbie di dunia Blogger, jd mohon bimbingannya..
    Silahkan kunjungi Blog saya di http://menginfo.blogspot.com/

    Thank You..

    ReplyDelete
  20. informasi yg bagus,,hasilnya jg bagus sob,,

    ReplyDelete
  21. izin compas aza gan n semoga agan di tambah ilmu nya tambah melimpah n Nice Info

    ReplyDelete
  22. Sukses mas bro di blog saya
    meskipun sedikit bingung
    terima kasih banyak

    ReplyDelete
  23. Oya lupa mas bro cara membuat facebook yg seperti punya sampeyan yg bila di klik close akan hilang sendiri gimana ya

    ReplyDelete
  24. @area infoku pake yg ini
    http://www.super-gaptek.com/2012/02/membuat-iklan-melayang-di-tengah-blog.html

    ReplyDelete
  25. mantap sob, bermanfaat banget.
    izin copas ya?

    jangan lupa kunjungi juga blog ku
    http://reza-solidaritas.blogspot.com/

    maaf sob jika blog saya kurang bagus. soalnya baru buat blog.jadi masih sedikit postingan nya .
    mohon di maklumi :)

    ReplyDelete
  26. gan kok ane plugin nya jadi bahasa planet

    cek http://dchacinx.blogspot.com

    itu kekmana gantinya

    ReplyDelete
  27. mampir ke blog ane ya boz, http://vandebuy.blogspot.com/

    ReplyDelete
  28. Berhasil dan Sukses'' Thnx gan..
    mampir juga ke blog saya
    http://www.yuzzindo.co.cc/

    ReplyDelete
  29. baru mau mencoba thanks lgsung ke TKP kujungi http://maddintercinta.blogspot.com

    ReplyDelete
  30. ini gmna cara krjanya gam,sya msih blum ngerti,maklum newbie

    ReplyDelete
  31. Kesalahan saat mengurai XML, baris 16, kolom 5: The value of attribute "property" associated with an element type "null" must not contain the '<' character

    malah keluar itu pas mau masukin ini code <meta content='105117652991202' property='

    knp yaa gan

    ReplyDelete
  32. My blog, ada yg kurang tambahin kode >>> fb:app_id'/>

    ReplyDelete
  33. mantab gan infonya,,,,,,,,,,,,,,,,langsung di sruput gan,he he
    kunjungan balike gan,http://watescyber.blogspot.com

    ReplyDelete
  34. sukses juga nambahin box komentarnya, thanks gan

    ReplyDelete
  35. annjritt dari beribu - ribu blogg... gua baru berhasill pake cara dari blogg keren ini ............

    mantaff bangett infonya ....

    emankk ni blog berkualitas .... gakkk salahhh gua nyasar ke blog ini ....

    makasiihh buat adminn... kerennn braa666

    nihh buktinya,........
    http://blacklinehardardware.blogspot.com

    liat kalo emak gak percaya ...
    thanks'ss

    ReplyDelete
  36. nice..
    berkunjung kesini ya:
    www.pratamapardiana.com

    ReplyDelete
  37. MANTAP gan,, ane berhasil.. yahoo
    Thanks Berat untuk agan yang telah memberikan ane solusi dari masalah ane selama ini :D
    happy blogging and semangat selalu memberikan tips-tips yang bagus dan menarik gan..

    kunjungi juga blog ane gan www.patentik.blogspot.com

    ReplyDelete
  38. biasanya pusing menerapkan solusi2blogger senior ni mah langsung ngacirrr............thanks gan!!!!

    ReplyDelete
  39. ada beberapa kode yang saya tidak temukan, cotohnya

    ReplyDelete
  40. terima kasih atas bantuannya
    saya sudah berhasil

    ReplyDelete
  41. gan itu FB commentnya bisa muncul asal comment box bawaan blogspot dicomment duluan ta?

    ReplyDelete
    Replies
    1. gak perlu gan. langsung nongol kok.

      Delete
  42. gan, kotak komentar fb udah muncul d blog saya. tapi koq pas ada yg komen, komentarnya ga muncul d kotak komentar itu yak?? solusinya gmana gan?? thx

    ReplyDelete

Anda harus menjadi follower blog ini jika ingin memberikan komentar. Terima Kasih

Note: Only a member of this blog may post a comment.