Step 1. Disable/nonatifkan komentar default blog
Kenapa ? karena nanti tampilan blogmu akan rancu kalau ada 2 kotak komentar.Cara Disable : Buka Akun blogger → setting → comments → Pilih "Hide" → Save Setting.
Step 2. Membuat aplikasi facebook untuk komentar blog
Masuk ke link Facebook Developers → Buat Aplikasi → Masukkan Nama Aplikasi (terserah anda) → tandai "SETUJU" → klik "Create Application"Nah aplikasi selesai, tinggal kita konekin ke blog kita, masuk ke tab "Situs Web" lihat gambar
 |
| Klik Untuk Memperbesar |
 |
| KLIK UNTUK MEMPERBESAR GAMBAR |
Step 3. Memasukkan Kode Ke Template Blog
Masuk ke akun blogger → Layout → Edit HTML → Expand Widget Templatecari kode ini <html
Kalu sudah ketemu, tambahkan kode dibawah ini
xmlns:fb='http://www.facebook.com/2008/fbml'Harus ada Spasi diantara kode tersebut, ini contohnya
<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog......2005/gml/expr' >Langkah selanjutnya, Cari kode <body>
Setelah kode atau dibawah kode diatas masukkan script dibawah ini
<div id="fb-root"></div>Selanjutnya, Memasang Open Graph Protocol Tags
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'ID Aplikasi 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);
}());
</script>
<b:if cond='data:blog.pageType == "item"'>Sesuaikan Tulisan yang berwarna merah diatas dengan blog anda dan facebook anda
<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='URL LOGO BLOG ANDA.gif' property='og:image'/>
<meta content='ID APLIKASI ANDA' property='fb:app_id'/>
<meta content='ID FACEBOOK ANDA' property='fb:admins'/>
<meta content='article' property='og:type'/>
setelah merubah/mengedit script diatas, cari kode </head>, lalu simpan script diatas sebelum tag tersebut atau diatasnya.
Step 4. Menambahkan kotak komentar facebook.
cari kode <data:post.body/> kemudian masukkan script dibawah ini kebawah kode tersebut.<b:if cond='data:blog.pageType == "item"'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' colorscheme='dark' expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='om-dayz.blogspot.com' class='icon-action' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKFbtWuBk1YwxHsAgNcrY5pYKE_ZdIoTRPb3U5ydRpOwaCHGLgpJYpu9Bmn-1g_UceZ-vdbbHjZeWUC2o5ZLHHeggyaP5utJDPs0h4Xt5j8fBnqhjrANIumU1qeXzA08P8tWke7pKiI2k/s1600/logo2.gif' width='16'/> <b><a href='http://www.om-dayz.blogspot.com/' target='_blank' title='blogger templates, blogger tutorials, om-dayz'>Om-Dayz Comments For Blogger</a> Mau Pasang Kotak Kmentar Facebook Seperti Ini ? Klik Link ini !<a href='http://om-dayz.blogspot.com/2011/10/memasang-kotak-komentar-facebook.html'>Om-Dayz Facebook Comment Tutorial</a></b></div>
</b:if>
Tulisan yang berwarna merah edit sesuai dengan blog anda, Untuk Colorscheme hanya ada 2 pilihan warna, yaitu Dark dan Light!
0 komentar:
Post a Comment