 |
| Sistem Komentar Facebook di Blogger |
Cara menambahkan Sistem Komentar Facebook:
Kalau sobat mengikuti langkah yang diberikan oleh Facebook, maka anda 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 anda akan melihat tombol "+ Set Up New Application" pada halaman kanan atas, klik dan anda akan dibawa ke halaman pengaturan. |
| Facebook Set Up Application Page |
Langkah kedua : Menambahkan atribut XLMNS, Open Graph protocol tags, dan SDK script
Masuk ke halaman Edit Template, jangan lupa untuk mememback up template asli .Jika terjadi error maka sobat masih punya back up. Centang "Expand Widget Templates".
Memasang Atribut XMLNS Facebook pada tag HTML :
Permasalahan jika anda menggunakan Blogger sebagai blog anda, maka anda tidak akan mungkin untuk meng-upload xd_receiver. Berikut adalah tips hacking untuk membuatnya menjadi mungkin. Saat anda 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 anda 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 anda masuk sebagai obyek, pengunjung dapat langsung mengakses data seperti yang dilakukan pada halaman Facebook. Berdasarkan struktur data yang anda 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 anda.
Ganti http://google.../blogger_logo.gif dengan logo milik anda, 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 anda
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 anda.
"Memasang Plugin Facebook"
Menambahkan kotak Komentar Facebook
Setelah semua langkah diatas dilampaui dengan baik, sekarang saatnya memasang kotak komentar Facebook. Ingat, bahwa Blogger punya sistem komentar sendiri jadi jangan lupa untuk me-non-aktifkan komentar Blogger.
Cara menghilangkan komentar pada Blogger : Pergi ke Pengaturan > Komentar, dan pilih Sembunyikan.
<b:if cond='data:blog.pageType == "item"'><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 anda 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
Untuk keterangan lebih lanjut silahkan kunjungi website ini : http://www.dindingcoret.com/2010/08/how-to-add-facebook-comment-in-blogger.html
0 comments:
Post a Comment