Cara Memasang Facebook Comment Box Di Blogger (Xfbml/Html5)

Ada banyak kawan dekat Blogger yang mengajukan pertanyaan tentang bagaimana menyertakan widget Facebook Comment Box di Blogger. Sebenarnya ada banyak panduan yang sudah membahas ini. Tapi bila memang diperlukan yang lebih detil, dalam peluang ini saya akan coba bicarakan wacana itu. :)

LiveDemo
komentar

Perlu dipahami alasannya sama sekali belum ada plugin Comment Box siap pasang untuk Blogger (tidak menyerupai plugin Facebook untuk WordPress yang hebat pengembangannya), maka yang diinginkan untuk memasang kotak komentar ala Facebook ini yaitu 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 alasannya sebelumnya sudah memakai banyak sekali plugin FB, eksklusif skip ke langkah 4. Tutorial ini akan panjang, jadi rencanakan diri betul-betul 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 memakai aplikasi untuk memungkinkan itu. Berikut cara menghasilkan dan mendaftarkan aplikasi dasarnya:

a. Masuk ke Facebook Developers (login Facebook)

b. Klik "Apps" di sajian atas paling kiri.

c. Klik "Create New Apps"

d. Akan timbul Dialog Box untuk registrasi aplikasi. Isi dengan nama aplikasi, misalnya sesuai nama Blog, begitu pula dengan namespace, isi dengan nama yang boleh sama, tanpa spasi, abjad kecil semua. Pilih kategori. Kemudian klik "Continue". Masukkan captcha.

Ada banyak kawan dekat Blogger yang mengajukan pertanyaan tentang bagaimana menyertakan widget Facebook Com Cara Memasang Facebook Comment Box di Blogger (XFBML/HTML5)

e. Setelah itu anda akan dibawa ke halaman aplikasi yang gres dibuat. Perhatikan pada bab ini, catat Application ID dan (jika perlu) App Secret-nya juga. Simpan di kawasan aman. Kita akan menggunakannya nanti pada Javascript SDK dan Meta OpenGraph.

f. Lihat ke bawahnya, pada bab "Basic Info", isikan domain sesuai dengan domain blog/web yang anda miliki. Jika masih memakai subdomain blogspot, isikan dengan subdomain blogspot.com. Jika sudah memakai custom domain, isikan dengan domain yang sesuai. Kemudian ubah mode sandbox ke "disabled". Ini untuk mengaktifkan aplikasi mudah-mudahan dapat digunakan oleh semua user.

g. Lihat ke bawah lagi, di situ ada bab integrasi aplikasi dengan Facebook. Klik bab "Website with Facebook Login" dan isikan url web/blog anda.

h. Pastikan semua langkah sudah ditangani dengan benar, kemudian klik "Save Changes".

2. Memasang Javascript SDK

Langkah berikutnya yaitu memasang javascript SDK. Thanks to Facebook, alasannya dengan script ini, memasang semua plugin FB di Blogger menjadi sungguh memungkinkan.

a. Buka Dashboard > Template > Edit HTML.
b. Aktifkan fungsi search pada HTML Editor dengan menekan CTRL+F dan cari aba-aba berikut dengan memasukkan ke kolomnya : <body (jika belum jelas, simak Cara Mencari Kode di HTML Editor Blogger)

Anda akan mendapat aba-aba <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 memakai 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 apalagi dahulu, masih ada dua langkah lain lagi.

3. Memasang Meta OpenGraph

Meta Opengraph yaitu meta khusus yang digunakan oleh FB untuk mengambil "intisari" suatu halaman sekaligus selaku verifikasi ID yang memakai aplikasi di Web. Jika anda share ke FB dalam bentuk link, maka Facebook akan memakai beberapa metode, sistem yang paling diusulkan yaitu "retrieve" lewat Meta Opengraph (meta:og), kemudian apa yang dibaca akan ditampilkan selaku rangkuman, misalnya gambar, judul halaman/post, deksripsi pos, dan url (domain). Jika gagal, crawler Facebook akan mengambil apa saja yang bisa ditangkap. Kadang tidak cocok harapan. Nah, untuk mengatasinya anda dapat simak Cara Memperbaiki Gambar dan Deskripsi Post di Facebook. Di situ saya cuma menyinggung beberapa pokok yang berhubungan dengan deskripsi dan gambar, dan inilah meta:og yang lain untuk kebutuhan 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 lazim dijumpai 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 dapat meletakkannya di bab lain asal masih di antara <head> dan </head>.

3. Langkah berikutnya yaitu memasukkan atribut source meta og FB (xlmns) pada tag html. Cari <html, di bab 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 sistem yang lazim digunakan untuk menyisipkan snippet comment box, di bab comment Blogger sendiri (di dalam b:includable-nya komentar Blogger) atau menyisipkan ke bab lain asal berada di bawah post. Saya condong memutuskan cara kedua alasannya dengan cara ini kita dapat menyembunyikan kotak komentar bawaan Blogger dengan banyak sekali cara tanpa terimbas pada kotak komentar Fb, dan tanpa mesti melakukan hack terlalu banyak. Seperti biasa, kita masih akan mengandalkan conditional tag mudah-mudahan comment box tampil di halaman post saja.

XFBML

<b:if cond='data:blog.pageType == "item"'>

<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 == "item"'>

<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 dapat memutuskan salah satu dari dua jenis aba-aba di atas, alasannya FB comments mendukung dua jenis aba-aba tersebut.

b. Setelah memilih, copy dan kostumisasi pada poin berikut:

Ganti light dengan dark untuk mengubah performa comment box menjadi gelap bila mesti disesuaikan dengan template.
Ganti 600 dengan nilai tertentu untuk menyesuaikan lebar comment box dengan lebar bab post.
Ganti 5 dengan nilai lain, ini yaitu 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 menyerupai tadi. Bagi berbagai jenis template, khususnya yang memakai auto readmore, anda akan mendapatkan dua atau tiga tag yang sama, tergolong tag halaman statis. Coba cari pada bab yang paling selesai dan konsentrasi ke sana.

d. Letakkan aba-aba FBML atau HTML5 comment box sesuai pilihan dan yang sudah diedit tadi sempurna di bawahnya. Nah poin-poin yang perlu diamati adalah:

Jika dahulu sudah pernah menyisipkan aba-aba atau snippet di bawah post, misalnya social share buttons, addthis social buttons, kotak permalink, tag-tag (label), widget penulis, dan lain sebagainya, pastikan anda menaruh aba-aba di bawah snippet-snippet itu, mudah-mudahan kotak komentar tidak dimunculkan di atasnya.
Jika comment box tidak muncul, maka anda sudah menempatkan aba-aba di bawah <data:post.body/> yang tidak tepat. Coba pindahkan di bawah <data:post.body/> yang lain.

e. Sampai pada tahap ini, semestinya save template apalagi dahulu untuk menyaksikan risikonya dan menyaksikan 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 memakai Facebook Comment Box selaku kotak komentar default.

a. Masuk ke settings > posts and comments.

b. Lihat pada bab "Comment Location", klik sajian 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, alasannya kotak komentar FB tidak berada dalam widget yang sama. Mungkin ada yang tanya, kenapa gak disembunyiin pake CSS saja (display:none). Itu fungsinya cuma 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 diundang sekaligus tidak ditampilkan.

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

Penutup

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