Step 1. Create an App on Facebook Developer.
Step 2. Click on "Apps" and select "Create a New App".
Step 3. Enter your App Display Name, Namespace and Category.
Step 4. Your will be prompted by a message for verification purposes. Just enter the code.
Step 5. Once code is accepted, go to "Settings". Make sure that all information are filled in. For App Domain enter your domain name without "https://".
Step 6. Click on Add Platform > Website. Fill in your site URL and mobile site URL.
Step 7. Navigate to "Status & Review" and select "Yes".
Step 8. Go to your blogger template and find "<html". Then insert the code below.
xmlns:fb='http://www.facebook.com/2008/fbml'
It should look like this.
<html xmlns:fb='http://www.facebook.com/2008/fbml' b:version='2' class='v2'.....
Step 9. Find /head and placed this code on the top/before the /head. Make sure that you have edited the red text.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Zakyri Tricks' property='og:site_name'/>
<meta content='Image-Link-Of-Blog-Logo' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/zakyri2012' property='fb:admins'/>
<meta content='article' property='og:type'/>
Step 10. Find <body or <body expr:class='"loading" + data:blog.mobileClass'>.
Put this code below it.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'Your APPLICATION ID HERE',
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>
Just make sure that you have set your Application ID.
Step 11. Find <data:post.body/>. Probably there is 3-6 of these, you just need to placed the code below on the first one.
<b:if cond='data:blog.pageType == "item"'>
<div style='background: #F8F8F8;margin-top: 20px;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='600'/></div>
<div align='right'><a href='http://www.zakyri.com/2014/09/how-to-add-facebook-comment-box-on.html' target='blank'><small>[Comment Box for Blogger]</small></a></div>
</div>
</b:if>
Step 12. Click on Save Template.
Check your blog and have a great smile.
0 comments:
Post a Comment