Membuat Facebook Comment Form di Blogspot
Jumat, 24 Desember 2010
<p>Your browser does not support iframes.</p>
Facebook telah merilis sebuah plugin yang dapat diintegrasikan pada blog. Comment System, sehingga saat pengunjung anda 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.
Cara Membuat Facebook Comment Form di Blogspot :
Langkah Pertama : Mendaftarkan Aplikasi Facebook baru
Untuk mendaftarkan aplikasi Facebook, klik halaman Facebook Developer Page di facebook teman-teman atau langsung klik link ini 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.
Pada form Application Name, ketikkan nama aplikasi (misal : Komentar Blog FB). Setelah selesai, beri tanda checklist pada pilihan Agree untuk Terms dan klik "Create Application".
Setelah selesai dan aplikasi anda dibuat, pergi ke tab Web Site dan teman-teman akan melihat Application ID, Application Secret Number, Site URL, dan Site Domain. Isikan Site URL dengan alamat blog anda, jangan lupa akhiri dengan garis miring (contoh : http://www.budiutomo.com/), dan isikan Site Domain dengan budiutomo.com atau jika anda numpang domain di blogspot isi dengan blogspot.com karena anda meng-hosting blog anda di Blogspot.
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 teman-teman masih punya back up. Centang "Expand Widget Templates".
Memasang Atribut XMLNS Facebook pada tag HTML :
Ganti kode tag yang ada di paling atas dengan kode di bawah ini, kode yang saya maksud yaitu kode <head> ke atas. Langsung copas saja.
<?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 APPLICATION ID dengan nomor id aplikasi yang diberikan oleh Facebook.
Ganti FACEBOOK PROFILE ID dengan user id pada Facebook anda
Pasang 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 YOUR APP ID dengan nomor id aplikasi anda.
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.
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="http://www.budiutomo.com/2010/12/membuat-facebook-comment-form-di.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>
Kemudian Klik SAVE TEMPLATE dan lihat hasilnya. Form Komentar Facebook anda sudah selesai dibuat dan siap digunakan.
Jangan Lupa Jempolnya :
 |
Previous Article
