Facebook Comment for Blogspot.com

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

1. Create a Facebook App click Here




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  : &#39;YOUR_APP_ID&#39;,
      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(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).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 == &quot;item&quot;'>
<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


Just Updated in case of fb comment did not show .. check your comment setting in your blog must be embedded..




The owner of blogmytut.blogspot.com will not be liable for any errors or omissions in this information nor for the availability of this information. The owner will not be liable for any losses, injuries, or damages from the display or use of this information.Report any Broken Download link on Blogmytuts Facebook Page
Share on Google Plus

About Chucks

A Freelance Computer Tech with knowledge about computer, router and mobile phones, especially in Upgrade and Downgrade OS, Software and Hardware troubleshooting. fallow me at Google+
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment