Cara Memasang Facebook Comment Box di Blogger (XFBML/HTML5)

Ada banyak sobat Blogger yang bertanya mengenai bagaimana menambahkan widget Facebook Comment Box di Blogger. Sebenarnya ada banyak tutorial yang sudah membahas ini. Tapi jika memang dibutuhkan yang lebih detil, dalam kesempatan ini saya akan coba bicarakan tentang itu. :)
demo facebook comment box
LiveDemo
komentar
Perlu diketahui karena sama sekali belum ada plugin Comment Box siap pasang untuk Blogger (tidak seperti plugin Facebook untuk WordPress yang luar biasa pengembangannya), maka yang diperlukan untuk memasang kotak komentar ala Facebook ini adalah dengan beberapa proses dan hack.

Berikut beberapa prosesnya:
1. Membuat dan Mendaftarkan Aplikasi di Facebook
2. Memasang Javascript SDK
3. Memasang Meta OpenGraph
4. Memasang FB Comment Box di Bagian Tertentu di Bawah Post
5. Menyembunyikan Kotak Komentar Blogger
Note: Bagi yang sudah memiliki aplikasi serta sudah memasang Javascript SDK dan MetaOpengraph karena sebelumnya telah memakai berbagai plugin FB, langsung skip ke langkah 4. Tutorial ini akan panjang, jadi persiapkan diri benar-benar dan nikmati prosesnya. hehe

1. Membuat dan Mendaftarkan Aplikasi di Facebook

Untuk plugin-plugin tertentu, kita perlu memiliki aplikasi yang nantinya digunakan untuk melakukan proses validasi dan otentifikasi. Di Facebook, kita menggunakan aplikasi untuk memungkinkan itu. Berikut cara membuat dan mendaftarkan aplikasi dasarnya:

a. Masuk ke Facebook Developers (login Facebook)
b. Klik "Apps" di menu atas paling kiri.
c. Klik "Create New Apps"
d. Akan muncul Dialog Box untuk pendaftaran aplikasi. Isi dengan nama aplikasi, misalnya sesuai nama Blog, begitu juga dengan namespace, isi dengan nama yang boleh sama, tanpa spasi, huruf kecil semua. Pilih kategori. Kemudian klik "Continue". Masukkan captcha.
membuat comment box blogger
e. Setelah itu anda akan dibawa ke halaman aplikasi yang baru dibuat. Perhatikan pada bagian ini, catat Application ID dan (jika perlu) App  Secret-nya juga. Simpan di tempat aman. Kita akan menggunakannya nanti pada Javascript SDK dan Meta OpenGraph.
f. Lihat ke bawahnya, pada bagian "Basic Info", isikan domain sesuai dengan domain blog/web yang anda miliki. Jika masih menggunakan subdomain blogspot, isikan dengan subdomain blogspot.com. Jika sudah menggunakan custom domain, isikan dengan domain yang sesuai. Kemudian ubah mode sandbox ke "disabled". Ini untuk mengaktifkan aplikasi agar bisa digunakan oleh semua user.
g. Lihat ke bawah lagi, di situ ada bagian integrasi aplikasi dengan Facebook. Klik bagian "Website with Facebook Login" dan isikan url web/blog anda.
h. Pastikan semua langkah sudah dilakukan dengan benar, lalu klik "Save Changes".

2. Memasang Javascript SDK

Langkah selanjutnya adalah memasang javascript SDK. Thanks to Facebook, karena dengan script ini, memasang semua plugin FB di Blogger menjadi sangat memungkinkan.

a. Buka Dashboard > Template > Edit HTML.
b. Aktifkan fungsi search pada HTML Editor dengan menekan CTRL+F dan cari kode berikut dengan memasukkan ke kolomnya : <body (jika belum jelas, simak Cara Mencari Kode di HTML Editor Blogger)
Anda akan mendapatkan kode <body ...diikuti-beberapa-atribut-dan-script....>.
c. Letakkan javascript SDK berikut tepat setelahnya/dibawahnya (beri spasi untuk memasukkan script itu).
Update: saya ubah script dengan jenis Javascript SDK yang sudah dirampingkan, dan disimpan di server blogger menggunakan CDATA.
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=App-ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
d. Ganti  App-ID dengan angka-angka App ID yang tadi sudah dicopy dan disimpan.

Jangan save template terlebih dahulu, masih ada dua langkah lain lagi.

3. Memasang Meta OpenGraph

Meta Opengraph adalah meta khusus yang digunakan oleh FB untuk mengambil "intisari" sebuah halaman sekaligus sebagai verifikasi ID yang menggunakan aplikasi di Web. Jika anda share ke FB dalam bentuk link, maka Facebook akan menggunakan beberapa metode, metode yang paling dianjurkan adalah "retrieve" melalui Meta Opengraph (meta:og), kemudian apa yang dibaca akan ditampilkan sebagai rangkuman, misalnya gambar, judul halaman/post, deksripsi pos, dan url (domain). Jika gagal, crawler Facebook akan mengambil apa saja yang bisa ditangkap. Kadang tidak sesuai harapan. Nah, untuk mengatasinya anda bisa simak Cara Memperbaiki Gambar dan Deskripsi Post di Facebook. Di situ saya hanya menyinggung beberapa pokok yang berkaitan dengan deskripsi dan gambar, dan inilah meta:og lainnya untuk keperluan ini:
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Nama-Blog-Atau-Judul-Blog' property='og:site_name'/>
<meta content='URL-Gambar/Logo-Default-Mewakili-Blog' property='og:image'/>
<meta property="fb:app_id" content="APP-ID"/>
<meta property="fb:admins" content="USER-ID/ADMIN"/>
<meta content='article' property='og:type'/>
1. Copy meta tags di atas dan edit beberapa poin berikut:
  • Ganti Nama-Blog-Atau-Judul-Blog dengan judul/nama blog anda.
  • Ganti URL-Gambar/Logo-Default-Mewakili-Blog dengan url gambar yang mewakili Blog anda (Logo) dalam ukuran tinggi dan lebar sama (misal 200x200)
  • Ganti APP-ID dengan App ID yang sudah disimpan tadi.
  • Ganti USER-ID/ADMIN dengan ID user akun anda, dimana anda menjadi admin dari aplikasi tersebut (untuk fungsi moderasi komentar). Cara mencari User ID Facebook: copy url ini: graph.facebook.com/user.name, paste ke browser, dan ganti user.name dengan username anda yang biasa ditemui di url halaman profil. contoh: graph.facebook.com/azmi.survivor.
2. Setelah selesai edit, copy seluruhnya. Cari <head> dan letakkan meta tags tersebut di bawahnya, atau anda bisa meletakkannya di bagian lain asal masih di antara <head> dan </head>.

3. Langkah selanjutnya adalah memasukkan atribut source meta og FB (xlmns) pada tag html. Cari <html, di bagian atas template. Biasanya sudah ada beberapa atribut source yang nangkring di dalam tag tersebut. Tambahkan ini di dalamnya:
xmlns:fb='http://ogp.me/ns/fb#'
Contoh:
<html  ... ... ... ... xmlns:fb='http://ogp.me/ns/fb#'>
Sekali lagi, jangan save dulu, masih ada satu langkah lagi :)

4. Memasang FB Comment Box (XFBML atau HTML5) di Bawah Artikel

Ada beberapa metode yang biasa digunakan untuk menyisipkan snippet comment box, di bagian comment Blogger sendiri (di dalam b:includable-nya komentar Blogger) atau menyisipkan ke bagian lain asal berada di bawah post. Saya cenderung memilih cara kedua karena dengan cara ini kita bisa menyembunyikan kotak komentar bawaan Blogger dengan berbagai cara tanpa terimbas pada kotak komentar Fb, dan tanpa harus melakukan hack terlalu banyak. Seperti biasa, kita masih akan mengandalkan conditional tag agar comment box tampil di halaman post saja.

XFBML
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width="600" numposts="5"></fb:comments>
</b:if>
HTML5
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div data-colorscheme='light' class='fb-comments' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' data-width='600' data-numposts='5' />
</b:if>
a. Anda bisa memilih salah satu dari dua jenis kode di atas, karena FB comments mendukung dua jenis kode tersebut.
b. Setelah memilih, copy dan kostumisasi pada poin berikut:
  • Ganti light dengan dark untuk mengganti tampilan comment box menjadi gelap jika harus disesuaikan dengan template.
  • Ganti 600 dengan nilai tertentu untuk menyesuaikan lebar comment box dengan lebar bagian post.
  • Ganti 5 dengan nilai lain, ini adalah jumlah komentar yang ditampilkan secara default pada post. Sisanya dibuka dengan 'Show More Comments"
c. Setelah kostumisasi selesai, kembali ke Edit HTML dan cari <data:post.body/>, gunakan fitur search seperti tadi. Bagi beberapa jenis template, terutama yang menggunakan auto readmore, anda akan menemukan dua atau tiga tag yang sama, termasuk tag halaman statis. Coba cari pada bagian yang paling akhir dan fokus ke sana.
d. Letakkan kode FBML atau HTML5 comment box sesuai pilihan dan yang sudah diedit tadi tepat di bawahnya. Nah poin-poin yang perlu diperhatikan adalah:
  • Jika dulu sudah pernah menyisipkan kode atau snippet di bawah post, misalnya social share buttons, addthis social buttons, kotak permalink, tag-tag (label), widget penulis, dan lain sebagainya, pastikan anda meletakkan kode di bawah snippet-snippet itu, agar kotak komentar tidak dimunculkan di atasnya.
  • Jika comment box tidak muncul, maka anda telah menempatkan kode di bawah <data:post.body/> yang tidak tepat. Coba pindahkan di bawah <data:post.body/> yang lain.
e. Sampai pada tahap ini, sebaiknya save template terlebih dahulu untuk melihat hasilnya dan melihat apakah gagal atau tidak.

5. Menyembunyikan Kotak Komentar Blogger

Tahap ini sifatnya opsional. Tapi kemungkinan besar banyak dari anda yang ingin menyembunyikan kotak komentar Blogger dan menggunakan Facebook Comment Box sebagai kotak komentar default. 

a. Masuk ke settings > posts and comments.
b. Lihat pada bagian "Comment Location", klik menu dropdown di sebelahnya dan pilih "Hide".
c. Klik "save settings" dan lihat perubahannya pada post anda.

Menyisipkan kotak komentar FB dengan cara di atas tidak akan terpengaruh oleh tahap ini, karena kotak komentar FB tidak berada dalam widget yang sama. Mungkin ada yang tanya, kenapa gak disembunyiin pake CSS saja (display:none). Itu fungsinya hanya menyembunyikan, sedangkan kotak komentar beserta komentar-komentar tetap akan ter-load (dipanggil), sehingga menjadi beban load blog. Sedang dengan cara ini, kotak komentar Blogger tidak dipanggil sekaligus tidak ditampilkan.

FYI: Jika anda memiliki template responsif, anda bisa membuat kotak komentar FB bersifat responsif juga. Simak Cara Membuat Facebook Comment & Like Box Responsif.

Penutup

Sangat mungkin ada berbagai permasalahan dalam memasang Kotak Komentar Facebook ini di blog anda, so drop a comment if you wish to. Have a nice Blogging.

© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.

Cara Memasang Facebook Comment Box di Blogger (XFBML/HTML5)
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 23 Comment(s):

Dwi Yulianto said...

lebih mantap mas azmi,,, sebelum2nya saya ikuti tutorial di blogger tidak sedetail ini, paling2 cuma disuruh copas sana terus copykan kode itu bla bla bla,, kalau disini kan dijelaskan secara terperinci mulai dari awal :-)
happy blogging :-)

Valentino Febrian said...

saya nyimak aja mas.. sudah pernah pasang soalnya
http://valentinofebrian.blogspot.com/

Friska Lee said...

mantap mas tapi saya mau tanya nih apakah komentar disetiap postingan akan berbeda atau sama . kebanyakan yang pernah saya coba komentar yang ada pada postingan A selalu ada didalam setiap Postingan mas ..

Ahmad Khoirul Azmi said...

beda pada tiap post, saya gunakan canonical url post dan ID post, jd masing-masing unik

blogspot--id said...

Jadi mudah ini mengikuti tutorialnya karena sudah langsung jadi di fb koment diatas ya mas.Terima kasih mas bisa dibookmark ini.

mulapop.besaba.com said...

Mantap mas tutorialnya, izin praktik ya... nanti tak pasang di blog saya

nursyam septiadi said...

Mantab mas ilmunya, sangat detail penjelasannya untuk membuat comment box facebook...

Dani Siregar said...

Oke, berhasil.. Thanks banget Mas.. :)

Leony Li said...

bisa lebih leluasa ya jika banyak fans pagenya, dan gampang untuk meninggalkan komentarnya.

Wantho Gea said...

weessss..mantap bngt gan.. sangat amat bermanfaat gan.. gwa coba dulu yah gan..

Imam Sholeh said...

terimakasih tutornya gan

Ina Isnaini said...

berhasil kang.. terimakasih tutorialnya..
sangat membantu

Andri Satolom said...

thanks gan infonya,,
follow back blog aku ya (scienceandri.blogspot.com),
blog-nya agan aku udah follow nih

PRASETYO FATKAH said...

Tanks Infonya gan..,
akan aku coba

Budi Hartanto said...

Keren mass.. tuutorialnya mansstaapp..!!

Mickey Fadley said...

Baru sampe step F, eh katanya Top-Level domain are not allowed. Tolongin, gan, ane stuck disini :'(

Ahmad Khoirul Azmi said...

Step F yang mana ya sob? Bisa didetilkan lagi problemnya? I'll try to help

Farhan Maulana H said...

wahh mantab izin coba gan!

M.Agus S.Alfathoni said...

Sudah berubah lagi nih app di FB nya....

rasya akbar said...

SAYA coba dulu gan..trm kasih infonya

abu qassam alindunisy said...

ikut belajar kang azmi

Mad solihin said...

Makasih gan informasinya .. Sangat bermanfaat..

Nafis Wictwicky said...

mantapp om, berkelass :)

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap