From: Tips dan Trik Blogger <muhamadadiputra@gmail.com>
| Cara menambahkan Sistem Komentar Facebook di Blogger Posted: 14 Nov 2010 06:36 PM PST
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 |
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>
<!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.<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>
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?"Cara menghilangkan komentar pada Blogger : Pergi ke Pengaturan > Komentar, dan pilih Sembunyikan.
Temannya : "@(*!!!!!!!$"
<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://www.infopedia.tk' 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://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.. =]).<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>
Untuk mengubah jadi bahasa Indonesia, ganti tulisan http://connect.facebook.net/en_US/all.js menjadi http://connect.facebook.net/id_ID/all.js
This posting includes an audio/video/photo media file: Download Now
| You are subscribed to email updates from Tips dan Trik Blogger To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 komentar:
Posting Komentar