Now its time to do embed the comments box in your blog templates. So follow these easy steps,
PS: Please make sure your blogger comment form is embedded below posts. For doing this first go to Blogger > Settings > comments > and then choose embed comments below posts. After doing this follow the tutorial below.
6. Now Search for this,
* If you want to use the light scheme then simply replace dark with light
* 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
And Then Save !! ^^ Good Luck !!
PS: Please make sure your blogger comment form is embedded below posts. For doing this first go to Blogger > Settings > comments > and then choose embed comments below posts. After doing this follow the tutorial below.
- Go To Blogger > Design > Edit HTML
- Backup your template
- Check the "Expand Widget Templates" box
- Search for <html and just after it give a space and add this code,
xmlns:fb='http://www.facebook.com/2008/fbml'5.Next search for
<body>Find any one of these codes and just after it paste the code given below,
<div id='fb-root'/>*Replace YOUR_APP_ID with your Facebook application ID
<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>
<b:includable id='comment-form' var='post'>7. Just after it paste the code given below,
<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='dark' 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: Bloggerized by <b><a alt='blogger templates' href='http://www.centdesign.net/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>centdesign.net</a></b> Powered by <b><a alt='blogger widgets' href='http://www.centdesign.net/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Vin Cent</a></b></div></div>
</b:if>
* If you want to use the light scheme then simply replace dark with light
* 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
And Then Save !! ^^ Good Luck !!
0 comments:
Post a Comment