Postingan kali ini adalah suatu cara membuat sebuah kotak komentar facebook pada blogger.
langsung saja.
A. BUATLAH TERLEBIH DAHULU APLIKASI DI FACEBOOK
1. Masuk/login ke Facebook.com
2. Kunjungi url ini: developers.facebook.com
3. Isi kotak yang tersedia sbb:
a. App Display Name: w1npack (contoh)
b. App Namespace: (opsional)
c. Tanda tik pada "I Agree.."
e. Klik Continue
f. Isi verifikasi kata
e. Klik Submit. Selesai.
setelah itu, tulisan APP ID adalah nomor aplikasi id fb Anda. Catat dan simpan nomor App id tersebut di notepad.
B. MENAMBAH/ADD ALAMAT BLOG KE APLIKASI FACEBOOK
1. Masuk/login ke aplikasi Anda yang tadi dibuat.
2. Klik Edit Settings (kanan atas)
3. Pada "Select how your app integrates with Facebook" -> klik Website (paling atas)
4. Masukkan alamat url blog anda. Contoh, http://w1npack.blogspot.com/ (jangan lupa diakhiri dengan garis miring).
5. Klik Save Changes.
C. MEMASUKKAN KODE DAN APLIKASI ID FACEBOOK KE BLOGGER.COM
Ada 4 kode yang harus di tambahkan:
1. KODE FBML FACEBOOK
1. Masuk/login ke blogger.com -> Template -> Edit HTML -> Lanjutkan -> tanda tik pada Expand Widget Template.
2. Cari kode <html
3. Tambahkan kode berikut setelah kode no.2
xmlns:fb='http://www.facebook.com/2008/fbml'
2. OPEN GRAPH PROTOCOL TAG
1. Cari kode <b:skin>
2. Copy-paste kan kode berikut tepat di atas kode no.2
<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='NAMA BLOG ANDA' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='APP ID ANDA' property='fb:app_id'/>
<meta content='NOMOR ID PROFIL FB ANDA' property='fb:admins'/>
<meta content='article' property='og:type'/>
<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='NAMA BLOG ANDA' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='APP ID ANDA' property='fb:app_id'/>
<meta content='NOMOR ID PROFIL FB ANDA' property='fb:admins'/>
<meta content='article' property='og:type'/>
CATATAN :
a. Ganti tulisan NAMA BLOG ANDA sesuai nama blog/situs anda.
b. Ganti tulisan APP ID ANDA dengan nomor aplikasi id Anda.
c. Ganti NOMOR ID PROFIL FB dg yang sesuai. Tidak tahu cara mengetahui nomor profil?
ingin tau cara mengeceknya? gampang.
- masuklah ke facebook
- pilih salah satu album foto milik anda
- lihatlah alamat URL seperti ini :
http://www.facebook.com/photo.php?fbid=277756018963127&set=a.103336789738385.5609.100001861933281&type=1&theater
- nomor ID Facebook profile-nya adalah nomor yang pakai teks cetak tebal yakni 100001861933281
3. KODE SDK FACEBOOK
1. Cari kode <body
2. Letakkan kode berikut di bawah kode nomor 1.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP ID ANDA',
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);
}());
<fb:comments/>
</script>
3. Ganti tulisan "APP ID ANDA" dengan Application ID anda.
4. KODE KOTAK KOMENTAR FACEBOOK
1. Cari kode: <div class='post-footer-line post-footer-line-3'> atau (kalau tidak ada) cari kode ini: <p class='post-footer-line post-footer-line-3'>
2. Tambahkan kode berikut setelah (di bawah)
<b:if cond='data:blog.pageType == "item"'>
<div class='fb-comments' data-num-posts='2' data-width='450' expr:data-href='data:post.url'/>
</b:if>
3. Klik simpan template.
Dan lihatlah hasilnya.
Kotak komentar anda ganda? wah gampang caranya.
berikut adalah langkah untuk menyembunyikan kotak komentar bawaan dari blogger.
1. Masuk/login ke blogger.com
2. Klik setelan
3. Pilih Post dan komentar
4. Pada bagian Komentar -> Lokasi komentar pilih sembunyikan
5. Simpan Setelan. Selesai.
Sekian, semoga bermanfaat :)
Wassalamu'alaikum wr.wb
sumber: http://www.alkhoirot.net
