Cara Membuat Komentar Facebook di Blogger Blogspot - Tujuannya adalah supaya blog kita lebih cepat mendapat komentar. Karena umumnya orang lebih suka berkomentar di Facebook daripada di blog kita, maka kita jumput bola dengan cara memasukkan komentar para facebookers ke blog kita secara otomatis. Begitu juga sebaliknya, komentar di blog kita akan otomatis masuk ke komentar di Facebook. Idealnya, blog anda disetting supaya dapat mengirim artikel blog secara otomatis ke update Facebook.
Bagaimana cara memasang/install kotak komentar Facebook di blog berbasis Blogger Blogspot?
Ada beberapa tahapan yang harus dilakukan. Selama mencoba trik ini disarankan memakai dummy blog (blog khusus untuk percobaan) agar kalau gagal tidak pusing.
I. CARA MEMBUAT APLIKASI FACEBOOK
1. Masuk/login ke Facebook.com
2. Kunjungi url ini: developers.facdbook.com/setup
3. Isi kotak yang tersedia sbb:
a. App Display Name: Contoh
b. App Namespace: contohcontoh (minimal 7 karakter)
c. Tanda tik pada "I Agree.."
e. Klik Continue
f. Isi verifikasi kata
e. Klik Submit. Selesai.
Setelah tulisan "App id" adalah nomor aplikasi id fb Anda. Catat dan simpan nomor App id tersebut di notepad.
II. MENAMBAH/ADD ALAMAT BLOG KE APLIKASI FACEBOOK
Alamat blog/situs harus ditambahkan ke aplikasi yang dibuat. Tanpa itu, akan muncul warning di kotak komentar blog seperti "Warning: the url --- is Unreachable". Berikut cara menambah alamat blog:
1. Masuk/login ke aplikasi Anda yang tadi dibuat. Atau kunjungi link ini: https://developers.facebook.com/apps/nomor-app-id-anda/ (ganti nomor-app-id-anda dengan nomor aplikasi Anda).
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://kiat-cara.blogspot.com/ (jangan lupa diakhiri dengan garis miring).
5. Klik Save Changes
III. MEMASUKKAN KODE DAN APLIKASI ID FACEBOOK KE BLOGGER.COM
Tip: Tekan CTRL dan F untuk mencari kode
ADA EMPAT KODE YANG HARUS DITAMBAHKAN DALAM TEMPLATE BLOGGER.
III.A. KODE PERTAMA: KODE FBML FACEBOOK
xmlns:fb='http://www.facebook.com/2008/fbml'
1. Masuk/login ke blogger.com -> Template -> Edit HTML -> Lanjutkan -> tanda tik pada Expand Widget Template
2. Cari kode <html (paling atas)
3. Tambahkan kode berikut setelah kode no. 2
xmlns:fb='http://www.facebook.com/2008/fbml'
III.B. KODE KEDUA: OPEN GRAPH PROTOCOL TAG
1. Cari kode ini: <b:skin>
2. Taruh kode berikut persis di atasnya kode no. 1
- <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'/>
PENTING:
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 ? bukalah salah satu album fhoto anda, maka dibawah deretan fhoto akan terdapat tulisan seperti dibawah ini :
Ingin membagikan album Anda? Anda dapat memberikan tautan ini untuk teman atau keluarga:
https://www.facebook.com/media/set/?set=a.1375852158428.2055953.1295575993&type=3&l=0912b0f4dd
angka yang dicetak tebal inilah NOMOR ID PROFIL FB.
III.C. KODE KETIGA: KODE SDK FACEBOOK
1. Cari kode <body>
2. Letakkan kode berikut setelah 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>
<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>
Lihat contoh penempatan kode setelah <body... >
Ganti tulisan "app id anda" dengan Application ID anda
III.D. KODE KEEMPAT: KODE KOTAK KOMENTAR FACEBOOK FB
Ini langkah terakhir yang terpenting. Tanpa kode ini, kotak komentar FB tidak akan muncul di blog Anda.
1. Cari kode ini: <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 di bawahnya kode no. 1
<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>
<div class='fb-comments' data-num-posts='2' data-width='450' expr:data-href='data:post.url'/>
</b:if>
3. Klik Simpan Template. Selesai.
IV. SETELAN/SETTINGS DI BLOGGER.COM: SEMBUNYIKAN KOTAK KOMENTAR
1. Masuk/login ke blogger.com -> Settings/Setelan
2. Pada "Comments/Komentar" -> kasih tanda tik pada "Hide"
3. Klik Save Settings/Simpan Setelan. Selesai.
Setelan/settings ini opsional. Anda bisa saja punya dua kolom komentar.
Posting Komentar