Membuat Kotak Komentar Facebook di Blog

Facebook merupakan social media paling laris saat ini. Sekarang, facebook juga telah meluncurkan comment box (kotak komentar) yang dapat dipasang untuk semua web, terutama blog. Sinyal Pintar pun telah memasang plugin tersebut sehari yang lalu. Penggunaan comment box dirasa menguntungkan, karena setiap pengunjung yang berkomentar melalui comment box tersebut, maka artikel yang dikomentari akan otomatis muncul pada Kabar Berita Facebook melalui profil facebook pengguna tersebut (dengan catatan pengguna mengizinkan hal ini).

Nah, kali ini, kita akan membahas mengenai bagaimana cara memasang facebook comment box pada blog. Tutorial ini dijamin 100% berhasil, karena kami pun telah menggunakannya.

Kotak Komentar Facebook

LANGKAH PERTAMA : MEMBUAT APLIKASI FACEBOOK

Langkah pertama yang perlu dilakukan adalah membuat aplikasi facebook. Aplikasi ini nantinya akan berfungsi sebagai media moderasi komentar pada blog. Jadi, setiap komentar yang masuk bisa dimoderatori melalui aplikasi ini. untuk membuat aplikasi, harus menggunakan komputer dekstop atau laptop, ya... Langkah-langkahnya sebagai berikut.

1. Pastikan kalian telah login ke akun facebook kalian masing-masing.

2. Pergi ke http://developers.facebook.com/apps

3. Tekan tombol Buat Aplikasi Baru (Jika kamu belum mendaftar, mendaftarlah sebagai pengembang atau developer terlebih dahulu). Memuat...

4. Akan muncul jendela munculan berikut.

Isikan nama aplikasi dan namespace (huruf kecil semua); dan pastikan semuanya valid.

5. Tekan Lanjutkan dan isikan kode tantangan chaptca untuk memeriksa keamanan. Tekan Lanjutkan lagi.

6. Setelah itu maka akan muncul Setelan Dasar. Catat App ID (misalnya untuk Sinyal Pintar adalah 192761254192031), kemudian Simpan Perubahan.

LANGKAH KEDUA : MEMBUAT KOTAK KOMENTAR FACEBOOK DI BLOG

Untuk membuat kotak komentar facebook di blog, langkah-langkahnya sebagai berikut.

1. Copy kode ini :

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&appId=192761254192031";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

*Ganti kode yang berwarna merah dengan ID Aplikasi Facebook kamu.

2. Login ke akun Blogger kamu, kemudia masuk ke Tata Letak > Tambahkan Gadget > HTML/Javascript. Paste kode pada langkah 1 di bagian Isi (jangan di Judul, ya). Kemudian simpan.

3. Sekarang waktunya otak-atik HTML!

4. Masuk ke Template > Edit HTML.

Copy kode berikut :

Ingat untuk mengganti ID warna merah, ya!

5. Pastekan kode tersebut di atas kode <b:skin><![CDATA[

6. Sekarang, cari kode <div class='post-footer-line post-footer-line-3'> . Gunakan CTRL+F untuk mempermudah pencarian.

7. Copy dan paste kode berikut tepat setelah kode tersebut (sebelum kode <span class='reaction-buttons'>)

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

</b:if>

Jadi, nanti akhirnya rangkaian kodenya adalah sebagai berikut.

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

<div class='fb-comments' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' num_posts='5' width='680'/>
</b:if><span class='reaction-buttons'>

Catatan :

Angka 5 merupakan jumlah komentar yang akan ditampilkan di bagian paling depan. Kamu dapat mengubahnya, minimal 1.

Angka 680 merupakan lebar kolom. Kamu dapat menyesuaikan dengan blog kamu.

8. Selesai, dan Simpan Template dan coba cek perubahannya pada blogmu.

9. Komentar dapat dimoderasi di https://developers.facebook.com/tools/comments/?id=192761254192031

Ingat, ganti ID-nya dengan ID aplikasi kamu.

Kalau ada kesalahan, jangan lupa kasih komentar, ya!