Follow us on Facebook

How to Use Facebook Comments Box Plugin in Blogger/Blogspot Blogs


Facebook introduced "Facebook Comments Box" in 2009 which is one of the best plugin created by them for blogs and web pages. One of the best thing about this plugin is, any one can leave comment using Yahoo!, Facebook, AOL, Hotmail etc. Normally, blog readers feel lazy while leaving a comment anywhere because of a long comment form, Facebook Comments Box is very simple to use and people can easily leave comment using this commenting system. Here is how you can use this commenting system in your blogspot blogs.

There can be so many reasons for using Facebook Comments Box on Your blogger/blogspot blog such as
  • Neat and Clean Comments System
  • Easier for Blog readers to leave comments
  • Multiple options to leave comments such as using Facebook, Yahoo, Hotmail etc
  • Comment Moderation i.e. Delete unwanted/spam comments
  • Have a Look at DEMO

1- Creating Facebook Comment Widget


  • Go to Facebook Developer's website
  • Submit Your blog name and Blog URL (blog address) and click on "Create App"


  • Facebook will ask you to enter Security word "captcha", just DO IT and click on "Submit"
  • Now, you will be navigated to new page, where you will see facebook will show you comment form details such as App ID, App Secret, Code Sample etc. Save App ID (in notepad or somewhere else) because we will be using this code later.


  •  Now, click on "Developer Dashboard" from the same page


  • Then Click on "Edit"


  • Click on "Web" and write blogspot.com in "Site Domain" box and click on Save Changes.


  • Thats it, step1 is done!

2- Adding the Facebook comments Box to Your Blog

  • Go to Blogger Account > Dashboard > Design > Edit HTML
  • Backup your template and check "Expand Widget Templates"


  • Search for this code
<html
  • Replace it with
<html xmlns:fb='http://www.facebook.com/2008/fbml'

  • Now Search for 
<body
  • Paste below given code Just Before <body
<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>
Note: Change YOUR_APP_ID with your APP ID

  • Search for this code
</head>
  • Place this code just Before </head>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='FOLSOL.com' 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/folsol' property='fb:admins'/>
<meta content='article' property='og:type'/>
Note: Change highlighted parameters with yours
1- FOLSOL.com with your widget name
2- BLOG-LOGO-IMAGE-LINK with your logo link
3- YOUR_APP_ID with your app id
4- http://www.facebook.com/folsol with your Facebook profile URL

  • Now, Search for;
<b:includable id='comment-form' var='post'>
  • Place new code just After <b:includable id='comment-form' var='post'>.
<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;'><a alt='Facebook Blogger Comment Box' href='http://www.folsol.com/2011/08/how-to-use-facebook-comments-box-in.html' style='text-decoration:underline; color:#fff;' target='_blank' title='Facebook Blogger Comment Box'>Facebook Comments Box for Blogger</a> Plugin by <b><a alt='blogger tips' href='http://www.folsol.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger tips'>FOLSOL.com</a></b></div></div>
</b:if>
Note: Change Highlighted parameters with desired parameters.
light: You can replace it with dark if you want to use black background.
width='520': If you want to change the Comments box size, change this value.
width='510': If you want to change the width of footer links.

  • Save Your Template and its Done!

Troubleshoot ?

If you face any problem while implementing Facebook Comments plugin in your blogger/blogspot blog, Dont hesitate, Just let me know via comments. I will help you within short span of time.

2 comments:

  1. As an Alkaloid supplement food adults preferably after meals, or in the doctor under the instructions of edible

    ReplyDelete
  2. Thanks for this read mate. Well, this is my first visit to your blog!SEO NEwbury

    ReplyDelete

About

Followers

Like Us

Labels

Donate us For Furture