Facebook Comment for Blogspot.com

Sunday, July 22, 20120 comments

My old Facebook Comment on blognizend is not working properly same post on each post this one is fix

1. Create a Facebook App clickHere

2. Edit this fallowing

3. Save your App ID on a Notepad

4 How to put the facebook comment box

1.Go To Blogger > Design > Edit HTML
2.Backup!! your template is very important
3.Check the "Expand Widget Templates" box
4.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> just after it paste the code given below,

<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>

Replace YOUR_APP_ID with your Facebook application ID that you saved in a notepad.

6.Next search for </head> and just above it paste the following code,

<pre><meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='blogmytuts' 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/Blogmytuts' property='fb:admins'/>
<meta content='article' property='og:type'/</pre>

Make these changes:

    Replace blogmytuts 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,

logo

    Replace YOUR_APP_ID with the your Facebook Application ID that you saved in notepad
    Replace http://www.facebook.com/Blogmytuts with your Facebook user profile link

7.Now Search for this Again you must be Expanded Widget

<b:includable id='comment-form' var='post'>

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='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: Bloggerized by <b><a alt='blogger templates' href='http://blognizend.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>http://blogmytuts.blogspot.com</a></b> Enhanced by <b><a alt='blogger widgets' href='blogmytuts.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>http://blogmytuts.blogspot.com</a></b></div></div>
</b:if>

EDIT if you want:

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

test

Sponsors

Visitors

Labels