Memasang Kotak Komentar Facebook di Blogspot
Sabtu, 19 Januari 2013
0
komentar
Lagi-lagi facebook menciptakan sebuah aplikasi baru yang bisa dipasang di web/blog.
Mungkin sama dengan beberapa sistem komentar lain seperti Intensedebate maupun DisQus, tapi sistem komentar yang diberikan facebook ini lebih simple dan terintegrasi baik dengan Facebook.
Demonya bisa kalian lihat sistem komentar yang ada di blogku yang satunya di www.yudhaisme.co.cc
Sistem komentar ini sebenarnya ditujukan agar pengguna facebook dapat berkomentar di blog kita dengan mudah
Sebelumnya kamu harus sudah dalam keadaan login di facebook
Supaya Template support FBML maka kita lakukan langkah berikut
Selanjutnya adalah tahap pemasangan kotak komentar!
Mungkin sama dengan beberapa sistem komentar lain seperti Intensedebate maupun DisQus, tapi sistem komentar yang diberikan facebook ini lebih simple dan terintegrasi baik dengan Facebook.
Demonya bisa kalian lihat sistem komentar yang ada di blogku yang satunya di www.yudhaisme.co.cc
Sistem komentar ini sebenarnya ditujukan agar pengguna facebook dapat berkomentar di blog kita dengan mudah
Sebelumnya kamu harus sudah dalam keadaan login di facebook
- Kunjungi pengaturan Facebook Developer
- Daftarkan blogmu dengan mengisi formulir yang diberikan:
- Nama situs: Nama situs/blog kamu
- Url situs: Alamat blog kamu (contoh:http://www.yudhaisme.co.cc/ selalu akhiri dengan slahs "/")
- Lokasi: pilih bahasa Indonesia
- Kamu akan diberikan beberapa kode seperti ID Aplikasi,
- Copy kode tersebut atau catat di notepad karena nantinya kode itu akan dibutuhkan sebagai APP ID FACEBOOK KAMU
Supaya Template support FBML maka kita lakukan langkah berikut
- Masuk ke Blogger kamu
- Menuju ke "Rancangan" dan pilih "Edit HTML"
- Cari kode <html lalu paste kode dibawah ini tepat disebelahnya
xmlns:fb='http://www.facebook.com/2008/fbml'
- Sehingga secara keseluruhan menjadi:
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog.languageDirection' 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' >
- Lalu langkah berikutnya paste kode dibawah ini dibawah <body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP ID FACEBOOK KAMU',
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>
- Kode berwarna merah adalah kode (ID) aplikasi facebookmu yang tadi kamu dapatkan di langkah sebelumnya
- Langkah selanjutnya adalah memasang Open Graph protocol
- Caranya cari kode dan paste kode berikut distasnya
<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='MY-SITE-NAME' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='APP ID FACEBOOK KAMU' property='fb:app_id'/>
<meta content='ID FACEBOOK PROFILE KAMU' property='fb:admins'/>
<meta content='article' property='og:type'/>
- Penjelasan kode:
- kode berwarna ungu adalah nama situs kamu
- kode berwarna kuning adalah logo aplikasi facebook kamu
- kode berwarna merah adalah kode (ID) aplikasi facebookmu yang tadi kamu dapatkan di langkah sebelumnya
- kode hijau adalah kode (ID) faceboom profile kamu
- Kamu masuk ke Profil kamu lalu kamu lihat alamat di adress bar browser kamu
http://www.facebook.com/yourprofile?v=wall&story_fbid=143315#####1902&ref=notif
- 10 angka setelah kode fbid= (yang berwarna biru) merupakan ID profile kamu
- Simpan template
Selanjutnya adalah tahap pemasangan kotak komentar!
- Kamu expand widget template kamu!
- Cari kode <data:post.body/>
- Lalu paste kode ini dibawahnya
<b:if cond='data:blog.pageType == "item"'>
<div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div><div style='background-color: #FFFFFF;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdcUCOy97uqN2aUkwG3zVVDgST2n6mesh_LVsfIS1sKcqxESt6OJ5BuMJwlsPQGZ8ZyJ9RdFXCD0TuGWL3PR4BJgPuzayqcEgkU_q3bw0Jmmh6eW1i5U14T6FK3m5Cmz1nlCzjDn6w7IM/s400/favicon-16.png' width='16'/> <b><a href='http://cyb3r-w1z4rd.blogspot.com/' target='_blank'>Facebook comments untuk blogger</a> untuk mendapatkannya <a href='http://cyb3r-w1z4rd.blogspot.com/2011/05/memasang-kotak-komentar-facebook-di.html' target='_blank' title='blogger facebook'>Click di sini</a></b></div>
</b:if>
- Kode berwarna orange adalah lebar kotak komentar, ganti sesuai keinginan!
- Simpan template
- Bagi yang menginstal auto readmore, paste kode fecebook tadi tepat dibawah kode auto readmore
Ditulis Oleh : Unknown~Tentang Memasang Kotak Komentar Facebook di Blogspot
Sobat telah membaca artikel tentangMemasang Kotak Komentar Facebook di Blogspot. Yang ditulis oleh Unknown .Pada hari Sabtu, 19 Januari 2013. Jika anda ingin sebarluaskan artikel ini, mohon sertakan Kritik dan saran dapat anda sampaikan melalui kotak komentar. Trimakasih