How to add Facebook Comment Box in blog
same like this
\/
There are about five step to get this done but chill out, it's easy, ok? :] just follow the steps and you'll have a nice facebook comment box installed on your blog in no time
1.Creating a Facebook Application
i. head on to Facebook developer page, you should create a new app by clicking the followed link facebook developer
ii. Enter your application name and namespace,input the capcha code and proceed.
iii. On the next page, enter your custom domain name (if you're using blogspot sub domain)
iv. Scroll down a bit and hit the save changes button
you should see your application ID copy it and save somewhere
be need it.
Now let's head to your blog and finish this up
2.Adding the codes to your template
We're adding four sets of codes into your template to make this work the way we want, aight?
For doing this first go to Blogger>settings>comment> and then choose emped comments below posts. After doing this follow the tutorial below.
Log in to your blogger account and click on template>Edit HTML
i. press Ctrl+F And search for <html and just after it give a space and add this code
xmlns:fb='http://www.facebook.com/2008/fbml'
ii. Press Ctrl+F on key bord and search for <body>
Note: in new Blogger desighned templates the same code look like this
<body expr:class='"loading" + data:blog.mobileClass'>
Find any one of these codes and just after it paste the code given below,
<div id="fb-root"></div>
<script>
window.fbAsyncInit = functionundefined) {
FB.initundefined{
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
});
};
undefinedfunctionundefined) {
var e = document.createElementundefined'script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementByIdundefined'fb-root').appendChildundefinede);
}undefined));
</script>
♥ Replace YOUR APPLICATION ID HERE with your facebook application ID that you saved
iii. Now press ctrl+f and search </head> and just abow paste following code,
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Dr:mobifix' property='og:site_name'/>
<meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/mazhavilforyou' property='fb:admins'/>
<meta content='article' property='og:type'/>
Replace Dr:mobifix with your blog title/Name.
Replace BLOG-LOGO-IMAGE-LINK with the image link of your logo. Your logo will look good if it is in gif format and having this size -> 40px by 40px . This logo will appear next to your post title on Facebook profiles of your visitors like this,
Replace YOUR_APP_ID with the your Facebook Application ID that you saved in
notepad
Replace http://www.facebook.com/mazhavilforyou with your Facebook user profile link
iv Now Press Ctrl+F and Search for this,
<b:includable id='comment-form' var='post'>
<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='520'/></div> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: By <b><a alt='Jabir velom' href='http://www.drmobifix.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='jabir velom'>fb.com/jabir.parappil.7</a></b></div></div> </b:if>
- If you want to use the dark scheme then simply replace light with dark
- To change the Comments box size, change this value width='520'
- To change the footer credits size, change this value width:510px
- Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to width='600' then set footer-size to width:590px
Posted by Unknown
How to add Facebook Comment Box in blog
same like this
\/
There are about five step to get this done but chill out, it's easy, ok? :] just follow the steps and you'll have a nice facebook comment box installed on your blog in no time
1.Creating a Facebook Application
i. head on to Facebook developer page, you should create a new app by clicking the followed link facebook developer
ii. Enter your application name and namespace,input the capcha code and proceed.
iii. On the next page, enter your custom domain name (if you're using blogspot sub domain)
iv. Scroll down a bit and hit the save changes button
you should see your application ID copy it and save somewhere
be need it.
Now let's head to your blog and finish this up
2.Adding the codes to your template
We're adding four sets of codes into your template to make this work the way we want, aight?
For doing this first go to Blogger>settings>comment> and then choose emped comments below posts. After doing this follow the tutorial below.
Log in to your blogger account and click on template>Edit HTML
i. press Ctrl+F And search for <html and just after it give a space and add this code
xmlns:fb='http://www.facebook.com/2008/fbml'
ii. Press Ctrl+F on key bord and search for <body>
Note: in new Blogger desighned templates the same code look like this
<body expr:class='"loading" + data:blog.mobileClass'>
Find any one of these codes and just after it paste the code given below,
<div id="fb-root"></div>
<script>
window.fbAsyncInit = functionundefined) {
FB.initundefined{
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
});
};
undefinedfunctionundefined) {
var e = document.createElementundefined'script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementByIdundefined'fb-root').appendChildundefinede);
}undefined));
</script>
♥ Replace YOUR APPLICATION ID HERE with your facebook application ID that you saved
iii. Now press ctrl+f and search </head> and just abow paste following code,
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Dr:mobifix' property='og:site_name'/>
<meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/mazhavilforyou' property='fb:admins'/>
<meta content='article' property='og:type'/>
Replace Dr:mobifix with your blog title/Name.
Replace BLOG-LOGO-IMAGE-LINK with the image link of your logo. Your logo will look good if it is in gif format and having this size -> 40px by 40px . This logo will appear next to your post title on Facebook profiles of your visitors like this,
Replace YOUR_APP_ID with the your Facebook Application ID that you saved in
notepad
Replace http://www.facebook.com/mazhavilforyou with your Facebook user profile link
iv Now Press Ctrl+F and Search for this,
<b:includable id='comment-form' var='post'>
<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='520'/></div> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: By <b><a alt='Jabir velom' href='http://www.drmobifix.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='jabir velom'>fb.com/jabir.parappil.7</a></b></div></div> </b:if>
- If you want to use the dark scheme then simply replace light with dark
- To change the Comments box size, change this value width='520'
- To change the footer credits size, change this value width:510px
- Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to width='600' then set footer-size to width:590px
