Membuat Komentar Facebook Sederhana Pada Blog

Sobat pasti sering melihat kotak komentar facebook pada suatu blog, sebenarnya cara membuat kotak komentar ini cukup mudah dan simple. BAnyak kelebihan yang bisa kita dapatkan jika kita memasang kotak komentar pada blog kita. Buat sobat yang ingin mencoba memasangnya pada blog sobat, silahkan lihat screenshot berikut ini.

Nah, bagi sobat yang ingin membuat kotak komentar facebook di blogspot ikuti tutorial berikut ini.

1. Log ini ke akun blogger sobat;
2. Pilih menu Rancangan » Edit HTML;
3. Beri tanda centang pada tulisan Expand Template Widget;
4. Carilah kode <data:post.body/>, jika sobat telah memasang kode readmore, maka letakkan kode berikut tepat dibawah kode <data:post.body/>, yang kedua;

<b:if cond='data:blog.pageType == "item"'>
<p align='left'><a href='http://www.wakrizki.net/2011/02/membuat-komentar-facebook-sederhana.html' target='new'><img border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvo-JDsyK2Xsyd3ec7Ul6Wc_93NWrZbLCa8jq937o0VUMq-5h6I97IsLGIthyphenhyphengpywNPAB2t7F-L4yUaEfT_C8gBU-ECQy0VUjSd67FW57p4L92Fri89shE_z6SiPQGuXOAYcZjqcosnyM/s1600/comment.gif' width='200'/></a></p>
<div id='fb-root'/>
<script>window.fbAsyncInit = function() {
FB.init({appId: '124630597583565', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:comments/>
</b:if>

5. Selanjutnya simpan template sobat

Selamat mencoba, semoga berhasil. Jika tidak berhasil, ikuti langkah dibawah ini.

Update Terbaru

Tampaknya banyak komentar yang saya terima bahwa sobat mengatakan banyak yang tidak berhasil membuat komentar ini, saya memasang komentar ini disemua blog saya dan ternyata berhasil, mungkin pengaruh dari setiap template yang berbeda, kali ini saya mau update tetang komentar facebook ini. Silahkan sobat lakukan lahkah berikut ini.

Langkah pertama sobat login ke account blogger sobat, kemudian lihat gambar dibawah ini.

Jika sudah selesai, sobat cari kode <b:includable id='status-message'> kemudian sobat akan menemukan kode </b:includable> ini berada tepat diatas kode yang pertama tadi.

Kemudian kopas kode dibawah ini dan letakkan diatas kode </b:includable> tadi.

<b:if cond="data:blog.pageType == &quot;item&quot;"> <div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
</b:if>

Sobat bisa merubah jumlah post komentar dengan mengganti angka 5 pada num_posts dengan jumlah yang sobat inginkan dan width (lebar) kotak kementar sesuai dengan keinginan sobat. Jika sobat menggunakan template yang memiliki warna background hitam atau gelap, silahkan tambahkan kode colorscheme='dark' sehingga menjadi seperti dibawah ini.

<b:if cond="data:blog.pageType == &quot;item&quot;"> <div id='fb-root'/> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <fb:comments expr:href='data:post.url' num_posts='5' width='500' colorscheme='dark'/> </b:if>

Peletakan kodenya akan terlihat seperti ini.

<b:if cond="data:blog.pageType == &quot;item&quot;"> <div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
</b:if>
</b:includable>
<b:includable id='status-message'>

Jika langkah diatas tidak berhasil, coba sobat letakkan kode tersebut dibawah kode <data:post.body/>, tetapi jika sobat telah memasang kode readmore, biasanya kode tersebut ada dua, maka letakkan pada kode kedua.

Semoga berhasil.