JUDUL : MEMBUAT FACEBOOK COMMENT FORM DI BLOGSPOT
----------------------------------------------------------------------------------
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.
By : Bang Udin 
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.
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".
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 :
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.
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://filemmove.blogspot.com/2011/03/daftar-isi.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.
Kemudian Klik SAVE TEMPLATE dan lihat hasilnya. Form Komentar Facebook anda sudah selesai dibuat dan siap digunakan.
Gunakan ----{ CTRL + F }---- Untuk Mencari Artikel
----------------------------------------------------------------------------------
Postingan Baru :
Anda sedang membaca artikel berjudul 
Salam kenal aja dariku"aku lagi jln2 tak taunya nyangkut disini"boleh dong jadi pengikutnya.Setelah lihat2 keren juga nih blognya"oya kalau buat tulisan nama yang berputar itu seperti apa?ditunggu balasannya diBlogku"sblmnya aku ucapkan terimakasih
BalasHapuscara membuat facebook comment formnya.....
BalasHapussaya minta bang...
bang saya tadinya ngk berhasil tapi setelah diteliti dan mengikuti cara bang udin akhirnya saya bisa bang...makasih infonya bang.
BalasHapusmang juhai
BalasHapusSilahkan gigunakan..semoga membantu tanks
saya coba ne... walaupun agak susah tapi jadi tantangan... akhirnya bisa juga euy... makasih Bang udin
BalasHapuscara untuk link yang di tunjuk kursor keluar kilat2 bintang gimana..?
BalasHapusPutri sulung : sama sama semoga bermanfaat.
BalasHapusPutra rebelyon : cara membuat kursor ada gambar bintang itu... apload aja gambar bintang yang seperti itu, trus kamu masukin he HTML..
BalasHapus