How to Add Facebook Comment in Blogger

25Agu
2010
English | Indonesia

Facebook Comment on Blogger
Facebook released this plug-in at 19th February 2009, so your visitor comment can spread around the world by their Facebook profile. That is a good way to promote your blog. From the first time this plug-in released, Facebook Developer Team always improve this comment system so it can be used by all blog system and easy to set up by user. Like it or hate it, that is your choice. It's a Facebook service and you can't dismiss Facebook's massive success.


How to Add Facebook Comment System:

If you follow the steps given by Facebook, then you can't add Facebook Comment system on Blogger because you need to upload an html file on your blog directory called xd_receiver.htm. Remember that Blogger/Blogspot do not allow to upload plain HTML.


First Step : Register a new Application


To set up a new application, go to Facebook Developer Page at http://www.facebook.com/developers. In this page you will see "+ Set Up New Application" button at the top right of the page, click that button and you will go to set up page.
Facebook Set Up Application Page
On the Application Name form, type the name of your application (example : My Blog FB). When you've done with the name, select Agree for the Terms and click for blue button "Create Application".
When your application approved (and always be approved) go to Web Site tab and you will see Application ID, Application Secret number, Site URL, and Site Domain. Fill site URL with your blog URL, don't forget to add ending slash (for example : http://myblogname.blogspot.com/), and fill Site Domain with blogspot.com because you host your blog in Blogspot.


Second Steps : Add the XMLNS attribute, Open Graph protocol tags, and SDK script

Go to your edit template HTML page, do not forget to download your template. You need a back up if there are an error. Check the "Expand Widget Templates" check-box.


Facebook XMLNS attribute in the html tag :

Here are the problems when you using Blogger as you blogging system you need to upload the xd_receiver and that's impossible to do. Here is the hack tips to make it possible. When you open your template you should look this code :
<html 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'>
That is the point, add the Facebook XMLNS at the <html> tag and this is how the code should appear :
<html 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' xmlns:fb='http://www.facebook.com/2008/fbml'>

or if you get an error message and you don't know where the error is, actually the problem come when you paste Facebook XMLN. Some people forget to give a space between Google xmlns and Facebook xmlns.
Here the code if you stuck :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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' xmlns:fb='http://www.facebook.com/2008/fbml'>
<head>


Open Graph protocol mata-data tags :

The Open Graph protocol enables you to integrate your Web pages into the social graph. It is currently designed for Web pages representing profiles of real-world things — things like movies, sports teams, celebrities, and restaurants. Once your pages become objects in the graph, users can establish connections to your pages as they do with Facebook Pages. Based on the structured data you provide via the Open Graph protocol, your pages show up richly across Facebook: in user profiles, within search results and in News Feed. Search for: </head> Add the next code before it like this:
<b:if cond='data:blog.pageType == &quot;item&quot;'> <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='YOUR-SITE-NAME' property='og:site_name'/> <meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/> <meta content='YOUR-APP-ID' property='fb:app_id'/> <meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/> <meta content='article' property='og:type'/>
Change MY-SITE-NAME with the one you want to appear when a user likes a page.
Change http://google.../blogger_logo.gif with your blog logo, or remove the all tag if you don't want it.
Change YOUR-APP-ID with your application ID number.
Change YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID.


Javascript SDK tag :

Search for: <body> (You should find it right below the </head> tag) Add the next SDK script right after the <body> tag:
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : &#39;YOUR-APP-ID&#39;,
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(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
Change YOUR APP ID with your application ID number.


Set up the Facebook plugins

Adding Facebook Comment Box

Now, after you have done all the steps above it's time to set up the plugin (if you want to make a cup of tea, just make it! I'll waiting for you =]). Ok, now let's start again. Remember that Blogger has its own commenting system so do not forget to disable it, if you don't you will have 2 comments on your page and that's look funny. How to disable Blogger comment? Go to Settings > Comments, and mark the Hide radio-button.
Click save setting. Search for <data:post.body/> this is the body text of each post in your blog, and place the Comments box code after it.
<b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><a href="http://www.dindingcoret.com/2010/08/how-to-add-facebook-comment-in-blogger.html" target="new"><img alt="" class="icon-action" height="25" src="http://a.imageshack.us/img838/3872/facebooklogoc.png" width="25" /><span style="font-size: 70%;">Facebook Comment System</span></a><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div></b:if>
If you want to customize the box with your own style, go to Comments box page and generate the code, and FBML page for even more. BUT DO NOT CHANGE THE TITLE / URL/ XID ATTRIBUTES


Customization :

Remove the Like-button that appears on the Comments Box

If you do not like the Like-button that appears above the comment box, you can adding this CSS :
div.like, div.like div {display:none;}
save it with notepad (example : fb_comment.css) and upload on your host (free hosting) Adding the code at comment box code :
<fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' css='http://yoursitedomainname.com/fb_comment.css'/>

For instance, you may use this code :
<b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><br/><a href='http://www.dindingcoret.com/2010/08/how-to-add-facebook-comment-in-blogger.html' target='new'><img alt='' class='icon-action' height='25' src='http://a.imageshack.us/img838/3872/facebooklogoc.png' width='25'/><span style='font-size: 70%;'>Facebook Comment System</span></a><fb:comments css='http://clickeap.5gigs.net/fb-comment.css' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div></b:if>

Internationalization :

If you want to make the plugin onto your language, do not copy the global Javascript SDK. Replace the code from Javascript SDK with this code :
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.sessionChange', function(response) {
if (response.session) {
// A user has logged in, and a new cookie has been saved
} else {
// The user has logged out, and the cookie has been cleared
}
});
</script>
Supported Language : Visit Facebook Locales support for more information (and yes it is a very long list).

Example : to change the language from English to Indonesian replace the bold code en_US with id_ID


Demo Blog

If you want to see the Facebook Comment system demo, here the result :
http://game.dindingcoret.com

If you have a question, comment, or suggestion. Do not hesitate to shot us in comment page. Happpy blogging!

Sistem Komentar Facebook di Blogger
Pada tanggal 19 Februari 2009, Facebook merilis sebuah plugin yang dapat diintegrasikan pada blog. Comment System, sehingga saat pengunjung sobat berkomentar maka komentarnya akan tersebarluas ke seluruh dunia melalui profil Facebooknya. Cara berpromosi yang gratis dan sempurna. Dari waktu ke waktu Facebook Developer Team selalu mengembangkan sistem ini sehingga dapat digunakan di semua jenis blog dan mudah untuk diaplikasikan oleh semua blogger. Yah.. senang atau tidak senang inilah keberhasilan dari Facebook.


Cara menambahkan Sistem Komentar Facebook:

Kalau sobat mengikuti langkah yang diberikan oleh Facebook, maka sobat tidak akan bisa untuk menerapkan sistem komentar Facebook pada Blogger karena diharuskan untuk meng-upload file HTML yang bernama xd_receiver.htm. Padahal hal itu tidak mungkin dilakukan di Blogger. Ingat bahwa Blogger tidak mengijinkan meng-upload file HTML.


Langkah pertama : Mendaftarkan Aplikasi baru

Untuk mendaftarkan aplikasi baru di Facebook, klik halaman Facebook Developer Page di http://www.facebook.com/developers. Pada halaman ini sobat akan melihat tombol "+ Set Up New Application" pada halaman kanan atas, klik dan sobat akan dibawa ke halaman pengaturan.
Facebook Set Up Application Page
Pada form Application Name, ketikkan nama aplikasi sobat (misal : Komentar Blog FB). Setelah selesai, klik Agree untuk Terms dan klik "Create Application".
Setelah selesai dan aplikasi sobat dibuat, pergi ke tab Web Site dan sobat akan melihat Application ID, Application Secret Number, Site URL, dan Site Domain. Isikan Site URL dengan alamat blog sobat, jangan lupa akhiri dengan garis miring (contoh : http://game.dindingcoret.com/), dan isikan Site Domain dengan blogspot.com karena sobat meng-hosting blog sobat di Blogspot.


Langkah kedua : Menambahkan atribut XLMNS, Open Graph protocol tags, dan SDK script

Masuk ke halaman Edit Template, jangan lupa untuk mendownload template asli sobat! Jika terjadi error maka sobat masih punya back up. Centang "Expand Widget Templates".


Memasang Atribut XMLNS Facebook pada tag HTML :

Permasalahan jika sobat menggunakan Blogger sebagai blog sobat, maka sobat tidak akan mungkin untuk meng-upload xd_receiver. Berikut adalah tips hacking untuk membuatnya menjadi mungkin. Saat sobat membuka template, sobat pasti melihat kode seperti ini :
<html 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'>
Yup! dengan memasukkan Facebook XMLNS pada <html> maka sobat sudah mengupload file xd_receiver tersebut! Berikut adalah bentuk kode setelah dilakukan hack :
<html 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' xmlns:fb='http://www.facebook.com/2008/fbml'>

Ternyata banyak orang merasa kesulitan saat melakukan penambahan XMLNS sehingga terdapat error, tapi dibagian mana? Nah, sebenarnya saat penambahan Facebook XMLNS mereka kurang menambahkan spasi. Nah kalau benar-benar bingung, ini ada code yang instan:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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' xmlns:fb='http://www.facebook.com/2008/fbml'>
<head>


Open Graph protocol mata-data tags :

Open Graph protocol akan mengintegrasi halaman blog dengan media sosial. Didesain untuk website yang menyajikan data-data secara real-time dan mendunia, seperti film, selebriti, restaurant, dll. Sekali halaman sobat masuk sebagai obyek, pengunjung dapat langsung mengakses data seperti yang dilakukan pada halaman Facebook. Berdasarkan struktur data yang sobat sajikan melalui Open Graph Protocol, maka blog sobat akan secara langsung terkoneksi secara langsung ke Facebook : pada halaman profile, hasil pencarian dan di News Feed. Cari kode </head> dan diatas kode itu tambahkan kode berikut :
<b:if cond='data:blog.pageType == &quot;item&quot;'> <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='JUDUL BLOG' property='og:site_name'/> <meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/> <meta content='APPLICATION ID' property='fb:app_id'/> <meta content='FACEBOOK PROFILE ID' property='fb:admins'/> <meta content='article' property='og:type'/>
Ganti JUDUL BLOG dengan nama blog sobat.
Ganti http://google.../blogger_logo.gif dengan logo milik sobat, atau hilangkan saja kalau merasa repot =]
Ganti APPLICATION ID dengan nomor id aplikasi yang diberikan oleh Facebook.
Ganti FACEBOOK PROFILE ID dengan user id pada Facebook sobat


Javascript SDK tag :

Cari kode: <body> (Biasanya ada tepat dibawah kode </head> tag). Tambahkan SDK script setelah kode <body> tag:
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : &#39;YOUR-APP-ID&#39;,
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(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
Ganti APP ID dengan nomor id aplikasi sobat.


Memasang Plugin Facebook

Menambahkan kotak Komentar Facebook

Setelah semua langkah diatas dilampaui dengan OK, sekarang saatnya memasang kotak komentar Facebook. Ingat, bahwa Blogger punya sistem komentar sendiri jadi jangan lupa untuk me-non-aktifkan komentar Blogger, aneh donk kalau dalam blog sobat ada 2 sistem komentar!
Pengunjung : "Lhah, ini mau komentar yang dimana nih?"
Temannya : "@(*!!!!!!!$"
Cara menghilangkan komentar pada Blogger : Pergi ke Pengaturan > Komentar, dan pilih Sembunyikan.
Klik Save. Untuk memasang Facebook Comment System, cari kode <data:post.body/> dan letakkan kode berikut tepat dibawahnya :
<b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><a href="http://www.dindingcoret.com/2010/08/how-to-add-facebook-comment-in-blogger.html" target="new"><img alt="" class="icon-action" height="25" src="http://a.imageshack.us/img838/3872/facebooklogoc.png" width="25" /><span style="font-size: 70%;">Facebook Comment System</span></a><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div></b:if>
Kalau sobat ingin punya gaya sendiri, datang ke Comments box page dan generate kodenya, dan FBML page untuk lebih lanjut. TAPI JANGAN UBAH ATRIBUT DARI TITLE / URL/ XID


Customisasi :

Menghilangkan "Like" pada kotak komentar

Kalau sobat ngga suka dengan tombol "Like" yang muncul diatas kotak komentar, tambahkan CSS berikut :
div.like, div.like div {display:none;}
simpan dengan menggunakan notepad dengan ekstensi .CSS (contoh : fb_comment.css) dan upload ke hosting gratisan aja. Cara aplikasinya seperti berikut :
<fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' css='http://URLhostinggratisan.com/fb_comment.css'/>

Kalau sobat malas, bisa langsung pakai kode ini aja deh :
<b:if cond='data:blog.pageType == &quot;item&quot;'><div><br/><br/><a href='http://www.dindingcoret.com/2010/08/how-to-add-facebook-comment-in-blogger.html' target='new'><img alt='' class='icon-action' height='25' src='http://a.imageshack.us/img838/3872/facebooklogoc.png' width='25'/><span style='font-size: 70%;'>Facebook Comment System</span></a><fb:comments css='http://clickeap.5gigs.net/fb-comment.css' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div></b:if>

Pengubahan Bahasa :

Kalau sobat ingin ganti bahasa, jangan gunakan kode Javascript SDK yang global. Ganti kode Javascript SDK dengan kode ini :
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.sessionChange', function(response) {
if (response.session) {
// A user has logged in, and a new cookie has been saved
} else {
// The user has logged out, and the cookie has been cleared
}
});
</script>
Bahasa yang tersedia : Kunjungi Facebook Locales support untuk informasi lebih lanjut (daftarnya panjang gila.. =]).

Untuk mengubah jadi bahasa Indonesia, ganti tulisan http://connect.facebook.net/en_US/all.js menjadi http://connect.facebook.net/id_ID/all.js


Demo Blog

Kalau sobat mau tau gimana hasilnya lihat di :
http://game.dindingcoret.com

Jangan lupa komentarnya, pertanyaan ataupun saran langsung aja lempar di komentar!

Labels: