Membuat Kotak Komentar Facebook di Blog/Website Anda

Ketika kita berkunjung ke blog/website orang lain untuk membaca postingannya. Kita melihat kotak komentar blog/website mereka berubah menjadi kotak komentar Facebook. Tentunya dengan memasang kotak komentar Facebook di blog/web kita dapat mempercatik tampilan web/blog kita. Anda tentu penasaran cara untuk memasang kotak komentar seperti itu. Nah, saya akan memberi solusi, agar tampilan kotak komentar di website/blog anda bisa berubah menjadi kotak komentar facebook. Langkahnya tentu tidak sulit untuk di ikuti.



Langkah pertama, klik link berikut https://developers.facebook.com/apps, lalu pilihlah +Create New yang terdapat di sebelah kanan pojok. Selanjutnya, isilah App Display Name (nama tampilan) dan App Namespace (nama ruang) untuk blog anda, lalu setujui dan Lanjutkan. Pada tahapan berikutnya, kita diminta untuk sertifikasi kata atau memasukkan kata-kata yang diminta dan kirim. Ini untuk pemeriksaan keamanan yang dibutuhkan oleh facebook.

Langkah kedua pada Pengaturan > Basic, anda diminta untuk mengisi informasi umum, seperti contoh gambar di bawah ini.




Catatan : Jika anda pengguna blogger isilah Informasi Umum > App Domain dengan blogspot.com.
Pada bagian Website > Site URL, masukkan alamat website anda, dan pada bagian Mobile Website > Mobile Web URL masukkan alamat mobile dari website anda, jika itu perlu menurut anda. Ketika semua nya selesai lalu Simpan. Ingat code App ID anda yang terdapat di bagian atas.

Langkah ketiga, ubah kode di bawah ini yang bertulisan merah, dengan App ID anda, yang terdapat pada langkah sebelumnya.
<meta content='App ID Facebook Anda'   property='fb:app_id'/>
Selanjutnya copy kode diatas lalu letakkan/paste kode tersebut tepat dibawah kode <head> lalu Simpan Template anda.

Langkah keempat, untuk menambahkan/meletakkan from komentar facebook di blog anda, anda harus meng-"Expand Template Widget" di bagian "Edit HTML".
Carilah kode dibawah ini, dengan menggunakan bantuan Crtl+F agar pekerjaan anda cepat selesai.

<data:post.body/>
Setelah ketemu kode diatas, copy kode dibawah ini dan pastekan tepat dibawah kode yang ada di atas.
<b:if cond='data:blog.pageType == "item"'>
<div id="fb-root"></div>
<script>(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.url' expr:xid='data:post.id'/>
</b:if>
Catatan : Tulisan yang berwarna merah pada width, itu untuk mengubah ukuran lebar dari kotak komentar facebook di blog anda. Dan untuk mengubah kotak komentar ke versi gelap, anda tinggal mengganti light dengan dark.

Langkah kelima atau langkah yang terakhir, carilah kode <html lalu tambahkan kode di bawah ini tepat disamping kode <html
xmlns:fb="https://www.facebook.com/2008/fbml"
Untuk contoh, lihat ke bawah!
<html xmlns:fb="https://www.facebook.com/2008/fbml" expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Selamat, akhhirnya anda telah menyelesaikan semua tahap di atas
Beri komentar anda jika anda telah berhasil atau mengalami kendala

2 komentar:

  1. Angelovha24 Oktober 2011 pukul 15.49

    kak... bikin readmore gmnaa sii ?? kok sulit bngt? :(

    BalasHapus
  2. Thuenweb19 Desember 2011 pukul 07.50

    Coba aja kunjungi Panduan Blogger http://bpanduan.blogspot.com disana anda dipandu mulai dasar hingga mahir hehee... :)

    BalasHapus