Artikel ini terpikirkan Setelah saya menulis tentang membuat kotak komentar facebook sebelumnya yang saya posting, karena kebanyakan tidak dapat mengatur lebar dari kotak komentar facebook agar sesuai dengan lebar postingan dan templatenya, berikut adalah solusinya :
1. Login dulu ke facebook
2. Masuk ke Facebook Developer Page
3. Masukan data anda
- Masukan Nama Aplikasi
- URL situs /blog anda
4. Nah copy no ID blog/aplikasi anda
5. Sekarang LoginLah ke Account Blogger sobat
Silahkan Menuju Layout ( Rancangan )> Edit HTML dan check Expand Widget Templates. Cari code berikut (Ctrl+F):
<body>
Lalu masukan kode ini dibawahnya :
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '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 App Id dengan ID Aplikasi/Blog teman
Lalu cari kode :
</head>
Masukan ini dibawahnya :
<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='URL Blog' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='APP ID' property='fb:app_id'/>
<meta content='Profile ID Facebook' property='fb:admins'/>
<meta content='article' property='og:type'/>
- Ganti URL Blog dengan URL/alamat blog teman
- APP ID ganti dengan ID Aplikasi/Blog Teman
- Profile ID Facebook ganti dengan ID Profil teman (untuk mengetahuinya masuk facebook > profile > lihat di addres bar contoh . . .id=. ID Profile )
Yang terakhir cari kode :
<data:post.body/>
Masukan ini dibawahnya :
<b:if cond='data:blog.pageType == "item"'><br/> <p align='left'><a href='http://iciw-iciw.blogspot.com/2011/03/cara-membuat-kotak-komentar-facebook-di.html' target='new'><img border='0' src='http://grosirhandukmurah.com/wp-content/themes/swift/images/icons/facebook.png'/></a></p><div><fb:comments expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id' width='500'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b> Mau <a href='http://iciw-iciw.blogspot.com/2011/03/cara-membuat-kotak-komentar-facebook-di.html' target='_blank' title='Facebook Comment'>Facebook Comment Seperti Ini</a></b></div></b:if><br/>
Simpan dan selesai lihatlah hasilnya.
NB:
- http://grosirhandukmurah.com/wp-content/themes/swift/images/icons/facebook.png adalah lokasi gambar yang tampil dikotak komentar, ganti link gambar jika ingin menggantinya.
- 500 adalah lebar kotak komentar facebook ubah jika ingin menyesuaikannya.
aneh banged, di blog q code koq gak ada, ditunggu balasanya
ReplyDeleteCoba di centang Expand Widget Templates nya, , semua templates InsyaAllah ada. . . .
ReplyDeleteini kayaknya dulu pakai komentar fb tapi kok sekarang balik ke yang lama lagi? kalo ganti di fb hilang apa gak ya komentar-komentar yang lama?
ReplyDeleteIya gan emang dulu pake, tapi sekarang balik lagi karena aga berat, terus dari SEO saya pikir kurang menguntungkan.. :).. jadi pake bawaan blogger ja deh..
ReplyDelete