A. Langkah pertama: Anda perlu create App di Facebook. Caranya:
1. Layari Facebook developers page untuk create app.baru.
2. Create app baru dengan detail blog anda seperti di tunjukkan di bawah.
3. Jangan lupa tulis Facebook app id seperti ditunjukkan di bawah.
B. Menambah Comment Box Code di Blogger Template:
4. Sekarang pergi ke blogger dashboard --> template --> Edit Html (jangan lupa tanda Tick expand widget template option).
5. Cari (Ctrl+F) <html dan tukar dengan kod di bawah.
<html xmlns:fb='http://www.facebook.com/2008/fbml'
6. Cari <body> tag dan tambah kod berikut betul-betul dibawahnya (selepasnya).
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_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>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_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>
Nota: Tukar YOUR_APP_ID dengan app id yang anda tulis tadi.
7. sekarang cari </head> dan tambah open graph meta tags ini betul-betul di atasnya.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Homestay Kesidang Di Bandar Melaka' property='og:site_name'/>
<meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/kesidanghomestay' property='fb:admins'/>
<meta content='article' property='og:type'/>
Nota:
Tukar Homestay Kesidang Di Bandar Melaka dengan nama blog anda.
Tukar YOUR_BLOG_LOGO_IMAGE_LINK dengan url blog logo image anda (atau biarkan sahaja).
Tukar YOUR_APP_ID dengan app id.anda
Tukar http://www.facebook.com/kesidanghomestay dengan Facebook page url. anda.
8. Sekarang cari kod seperti di bawah.
<b:includable id='comment-form' var='post'>
Tambah kod berikut betul-betul di bawahnya.
<b:if cond='data:blog.pageType == "item"'> <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='500'/></div></div> </b:if>
Note::
- Anda boleh tukar width 500 dengan width yang anda suka
- Anda juga boleh tukar color scheme antara light atau dark.
9. Save Template anda.
http://www.bloggertricks.biz/2012/05/add-facebook-comments-box-for-blogger.html
0 Comments
Rakan pengunjung yang baik hati. Komen anda amat dihargai.