Jumat, 14 Oktober 2011

Cara pasang kotak komentar Facebook di Blogspot (Sempurna)

Kotak komentar Facebook. Siapa yang tak kenal ? mungkin para master sudah pada tau tapi dunia blogger juga masih ada yang newbie. Tutorial kali ini akan membahas tentang bagaimana cara membuat kotak komentar Facebook di bawah setiap artikel. Banyak blog tutorial lain yang sudah share cara seperti ini tapi belum sempurna. Belum sempurna? Maksud saya masih ada kelemahannya, seperti semua komentar muncul di setiap postingan, jadi kita tidak tahu postingan mana yang terkomentari dan tidak ada fitur reply di komentarnya, dan juga jika ada yang mengomentari artikel kita, kita tidak tahu karena tidak ada notifikasi jadi harus cek manual di setiap artikel.

Demo :



Yang kali ini sudah SEMPURNA nah kenapa sudah sempurna ? yap, karena semua masalah itu sudah di fix, komentar hanya muncul pada satu artikel yang di komentari, ada fitur replaynya, dan notifikasinya juga automatis. sudah ngertikan ? kalau sudah langsung TKP aja okk. ekh sebelumnya sobat harus buat aplikasi komentar Facebook dulu untuk mendapatkan app id yang akan di gunakaan nanti, untuk caranya silahkan ikuti tutor berikut :

1. Buka developers Facebook
2. Lalu klik create new app di sudut kanan atas
3. Nanti akan muncul kolom seperti ini (klik untuk perbesar gambar)


4. Isi app Display name dengan Kotak komentar atau yang lain. tidak usah isi app namespace, dan centang juga I agree to the...
5. Jika sudah klik lanjutkan.
6. Selanjutnya kalian akan di bawah ke halaman edit app
7. Scroll agak kebawah sampai ketemu tulisan Website, klik tulisan tersebut lalu isi dengan alamat website sobat seperti gambar di bawah ini, di akhir alamat blog kasih tanda / jadi http://example.com/ (klik untuk perbesar gambar)


8. Jika sudah klik simpan perubahan
9. Catat app id yg ada di halaman tersebut (di dekat nama app)

Nah sekarang kan sudah dapat App id masing masing sekarang kita ke langkah selanjutnya yaitu pemasangan kotak komentarnya di bawah artikel, simak caranya baik baik ya.

1. Sudah pasti kalian login ke akun blogger masing masing
2. Dari dashboard pilih rancangan => edit HTML
3. Lalu centang juga Expand Template Widget
4. Lalu taruh kode berikut di BAWAH kode <data:post.body/>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#appId=App Id kamu&amp;xfbml=1'/><fb:comments expr:href='data:post.url' numposts='5' width='590'/>
</b:if>
5. Ganti App id yang berwarna Merah dengan App id yang sobat catat tadi dan ganti angka 590 dengan lebar yang kamu ingin kan
6. Lalu taruh lagi langkah di bawah ini di BAWAH <head> atau di ATAS <b:skin><![CDATA[
<meta content='ID FACEBOOK' property='fb:admins'/>
<meta content='APP ID' property='fb:app_id'/>
7.Ganti APP ID dengan ID yang di dapat dari facebook tadi, dan ganti ID Facebook dengan ID sobat, misalnya id facebook saya adalah http://www.facebook.com/ari.v.cellios (jangan lupa di add ya hehehe), ganti ID FACEBOOK dengan yang berwarna merah. Setelah itu yang wajib harus dilakukan adalah save template. Kalau ada yang kurang jelas silahkan tanya ya.

19 komentar:

  1. boleh jg tuh mohon d-cariin y itu kekuranganny "semua komentar nampak d setiap post" jd gk minat ==" :'(

    BalasHapus
  2. @Cek Info jiah sob yang ini dah sempurna setiap komen hanya muncul pada satu artikel baca yg bner coba.

    BalasHapus
  3. ah, jadi ga dapet Backlink sob...kan kalo pake itu jadi ga ada Linknya sob..

    BalasHapus
  4. @Mbah Qopet iy sih, tapi apa salahnya siapa tau ada visitor yg gk punya akun google, atau gk tau. kan bisa pake ini

    BalasHapus
  5. data post body aku banyak banget sob, yang mana nih bingung?

    BalasHapus
  6. @nangza waduhh, coba agan taruh di bawah data post bocy yg pertama, klo gk bisa coba di yg kedua gtu terus sampe bisa.

    BalasHapus
  7. Terima kasih telah berbagi tutorialnya kawan

    BalasHapus
  8. kok gak muncul ya?
    apanya nih yang salah??

    BalasHapus
  9. makasih bro udah bisa di blog saya, visit http://rahman-trickandtips.blogspot.com/

    BalasHapus
  10. Makasih Banget Ya Bro Akhirnya Bisa Juga
    Dan Jangan Lupa Visit
    http://wastra-7.blogspot.com/2012/01/need-for-speed-underground-2.html

    BalasHapus
  11. thx bos.
    sudah saya coba dan mohon masukan/ sarannya.

    www.dasar-dasar-ilmu.blogspot.com

    BalasHapus
  12. maKasihhh sobb akhirnya jadi juggga like it.(y)

    BalasHapus