Sebelum lanjut ke instalasi skrip-nya, penulis ingin sedikit mengulang beberapa hal penting yang harus dipersiapkan.
Setelah membuat aplikasi di facebook developer seperti pada postingan sebelumnya di Blogger facebook comment plugin dan Fitur baru di facebook comment plugin.
Kita memerlukan APP ID bisa diliat di http://www.facebook.com/developers/apps.php dan USER ID. user id disini adalah id akun facebook yang kita gunakan ketika membuat aplikasi.
Kalo ada yang bingung gimana caranya mengetahui user id. ikuti langkah berikut :
1. Login ke akun facebook.
2. Klik link profile.
3. Arahkan kursor ke profile picture, seperti skrinsut dibawah
Klik kanan di profile picture copy link location paste di notepad. kurang lebih link-nya seperti ini formatnya http://www.facebook.com/album.php?profile=1&id=xxx atau ini http://www.facebook.com/media/set/fbx/?set=a.bbbb.ccc.yyy dimana xxx dan yyy adalah user id kita.
Okeh, kita sudah punya APP ID dan USER ID. Sekarang kita sudah siap menghadapi rintangan berikutnya...
Untuk mendapatkan skrip plugin ini bergegaslah menuju http://developers.facebook.com/docs/reference/plugins/comments/ kemudian isi form yang ada sesuaikan dengan kebutuhan, seperti width(lebar form) num post(jumlah komentar yang ditampilkan) url-comment bisa di-skip dulu. klik get code untuk mendapatkan source code-nya.
Copy-paste dulu di notepad, karena ada beberapa baris kode yang harus disesuaikan..
edit kode diatas karena yang kita butuhkan hanya baris kode berikut:
<div id=''fb-root"></div>
< fb:init >
<fb:comments href="example.com" num_posts="" width=""></fb:comments>
atribut href ini link yang merujuk ke url blog, tapi jangan diisi dengan url blog-gw.blogspot.com karena itu salah tapi harus spesifik merujuk ke postingan blog kita..
Letakan skrip dibawah di notepad dulu..
<div id="fb-root">
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'APP ID', 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 href="example.com" migrated="1" width="540px">
</fb:comments>
</div>
Ganti APP ID sesuai dengan APP ID yang kita dapatkan.
Sedangkan untuk href ganti dengan expr:href="data:post.url"
Langkah selanjutnya edit template blog. Login ke dashboard blogger. -> Design -> Edit HTML. expand widget Mode ON
Letakan skrip dibawah <b:include data='post' name='comments'/>
Bisa dilihat skrinsut diatas, ada tambahan fb.event dibawah fb.init.
Ini yang digunakan untuk mengaktifkan fitur notifikasi. http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
Untuk melengkapi ada satu tambahan plugin lagi.. yaitu like button, plugin ini bisa didapatkan di http://developers.facebook.com/docs/reference/plugins/like/
Tambahkan skrip ini
<fb:like expr:href='data:post.url' font='trebuchet ms' show_faces='true' width='px'/>
diatas fb:comments.
Berikut ini skrip lengkap-nya:
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'APP ID', status: true, cookie: true,
xfbml: true});
FB.Event.subscribe('comment.create ', function(response) {
// do something with response.session
});
};
(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:like expr:href='data:post.url' font='trebuchet ms' show_faces='true' width='px'/>
<fb:comments expr:href='data:post.url' migrated='1' width='px'/>
Terakhir tambahkan meta dibawah <head> jangan lupa
Save template.
Selesai sudah. hasil akhir bisa diliat di setiap postingan blog. seperti di blog ini... Kemaren ada yang tanya dimana user id facebook-nya.
Inaf Suwanto D'Insecta · Teknologi Informasi at * KOPERASI SIMPAN PINJAM SURYA KENCANA
ko saya masih gak bisa? user id yang mana y?
Nah ini lah penampakan profile picture yg penulis maksud :D
Tags
0 comments:
Post a Comment