Memasang Widget Komentar Facebook di Blogspot.

Setelah 2 (dua), hari utak-atik script blogspot untuk Memasang Widget Komentar Facebook di Blogspot, karena pada dasarnya memang agak sulit untuk memasangnya, namun pada akhirnya dapat terselesaikan juga. Bagi rekan-rekan yang ingin mencobanya, silahkan anda komentari artikel yang saya buat ini, pastinya anda akan melihat dengan sendirinya :).

Untuk mempersingkat waktu, silahkan anda simak baik-baik dan ikuti petunjuknya secara teratur, karena untuk memasang widget facebook di blog, seperti yang telah saya katakan diatas, namun akan berbeda apabila anda sudah expert didunia blogging. Untuk tahapan yang pertama kali, silahkan anda login ke Blog anda, lalu masuk ke menu Setting kemudian ke menu Comment, lalu anda Klik Hide, seperti pada gambar yang terdapat disamping.

Apabila telah selesai, tahapan selanjutnya kita akan menuju kehalaman Facebook itu sendiri, namun sebelumnya silahkan anda login terlebih dahulu, setelah anda login, anda bisa langsung klik Disini, maka anda akan dibawa kehalaman Create New App, seperti yang terlihat pada gambar berikut :

Silahkan anda lengkapi colum yang tersedia.
Sebagai contoh :
App Name : widget komentar
App Name Space : komentaradmin (min. 7 karakter).
Web Hosting : silahkan anda klik kotak kecil yang tersedia, kemudian Klik Continue.
Selanjutnya silahkan anda isi Security Check, kemudian anda klik Submit, maka anda akan dibawa kehalaman selanjutnya seperti yang terlihat pada gambar berikut ;

apabila muncul gambar seperti berikut;

silahkan anda Cancel saja.

Selanjutnya silahkan anda catat No. App ID anda, agar anda tidak lupa.

Untuk tahapan selanjutnya kita akan menambahkan aplikasi yang telah kita buat, namun agar tidak muncul warning di kotak komentar blog seperti "Warning: the url --- is Unreachable". untuk itu, Berikut cara menambahkan alamat blog kita. Silahkan anda scroll kebawah, maka akan terdapat Select how your app integrates with Facebook, silahkan anda klik Website, selanjutnya silahkan anda lihat gambar berikut ini :

seltelah anda selesai, silahkan anda Save. Apabila anda mengikuti tahapannya secara benar, maka selesai sudah untuk setingan yang terdapat di Facebook. Kemudian tahapan selanjutnya kita akan kembali menuju ke Blog kita untuk menambahkan script yang dibutuhkan untuk memanggil settingan yang telah kita buat diatas.

Klik Menu Design, Edit HTML kemudian centang Expand Widget Templates.

Untuk menghindari hal-hal yang tidak kita inginkan, lebih baik anda backup terlebih dahulu. Apabila telah selesai, mari kita lanjutkan ketahapan selanjutnya.

Untuk tahapan selanjutnya kita akan menambahkan sebanyak 4 (empat), script. Untuk mempermudah pencarian, silahkan anda klik CTRL + F, kemudian silahkan anda cari kode <html (biasanya kode ini berada dipaling atas script template blog kita, lalu tambahkan Script berikut :
xmlns:fb='http://www.facebook.com/2008/fbml'

untuk lebih jelasnya dapat anda lihat pada gambar berikut ;

Untuk script selanjutnya, silahkan anda cari <b:skin>, apabila sudah ketemu, silahkan anda tambahkan script berikut;

<b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> <meta expr:content='data:blog.homepageUrl' property='og:url'/> </b:if> <meta content='NAMA BLOG ANDA' property='og:site_name'/> <meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/> <meta content='APP ID ANDA' property='fb:app_id'/> <meta content='NOMOR ID PROFIL FB ANDA' property='fb:admins'/> <meta content='article' property='og:type'/>
* NB :
1. Silahkan anda rubah NAMA BLOG ANDA yang terdapat didalam script tersebut, dengan nama blog anda.
2. Ganti APP ID ANDA dengan yang anda punya (yang telah kita buat sebelumnya diatas).
3. Ganti Nomor ID Profil FB Anda, dengan profil yang anda miliki (saya yakin anda sudah tau apa itu profil id FB).

Untuk script selanjutnya, silahkan anda cari <body, kemudian kembali anda letakkan scrip berikut setelah anda menemukannya.
<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'APP ID ANDA', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); }; (function() { var e = document.createElement('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); <fb:comments/> </script>
*NB : Jangan lupa untuk mengganti Application Anda, untuk lebih jelasnya bisa anda lihat pada gambar berikut ini :

Setelah anda selesai menempatkan script yang ke 3 (tiga), maka kita akan menambahkan script yang terakhir, dimana scipt ini yang nantinya akan memanggil komentar dari Facebook tersebut, tanpa script ini, maka script yang telah kita buat sebelumnya akan sia-sia (tidak muncul di blog). Untuk pemasangan script terakhir ini, silahkan anda cari

<div class='post-footer-line post-footer-line-3'>

apabila tidak dapat anda temukan, silahkan anda ulangi menggunakan script beriku

<p class='post-footer-line post-footer-line-3'>

apabila telah anda temukan, silahkan anda tambahkan kode berikut :

<b:if cond='data:blog.pageType == "item"'><div class='fb-comments' data-num-posts='10'data-width='450' expr:data-href='data:post.url'/></b:if>
* NB : Secara default, dimana komentar yang terlihat hanya 10. Apabila anda ingin mengganti, silahkan anda rubah angka 10 yang terdapat dikode pada data-num-posts='10' dengan angka berapapun yang anda suka. Atau bisa anda lihat pada gambar dibawah ini :

Selesai sudah tips Memasang Widget Komentar Facebook di Blogspot. Apabila anda mengikuti tips diatas secara benar, maka anda tidak akan mengalami kesulitan ataupun kegagalan dalam pemasangan widget facebook tersebut. namun apabila anda menemui kesulitan ataupun kegagalan, silahkan tinggalkan komentar anda dikolom komentar.