Cara Menambahkan Kotak Komentar Facebook Di Blogspot

Admin on 04.32

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://unikarea.blogspot.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 :

Yup! dengan memasukkan Facebook XMLNS pada <html> maka sobat sudah mengupload file xd_receiver tersebut! Berikut adalah bentuk kode setelah dilakukan hack :

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 == "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='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 : 'YOUR-APP-ID',
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);
}());
</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 == "item"'><div><br/><a href="#" 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><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b> Widget by <a href='http://unikarea.blogspot.com/' target='_blank' title='Facebook Comment'>Facebook Comment , Mau ?</a></b></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 == "item"'><div><br/><br/><a href='http://unikarea.blogspot.com/2011/07/cara-menambahkan-kotak-komentar.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

Facebook Comment System

Labels: SEO/Blogger

Cara Menambahkan Kotak Komentar Facebook Di Blogspot