How To Add Facebook Comment Box Plugin To Blogger?

facebook comments box in blogger

In 2009 Facebook Developers introduced their best social plugin is “Facebook Comment Box”.This plugin can be embedded into any blog,websites and also in google blogger.In the starting of this plugin embedded in websites make some difficult work and sometimes it don’t work.Our senior blogger Max (founder of Allblogtools) made this easy to work perfect on any bloggers blogs.Using below option you can also save previous comments.


1.Login to your Facebook.
2.Then go to Developers Page
3.Select “Create App”
facebook comments box in blogger
4.Now you will see pop-up window as below
facebook comments box in blogger
5.In App Name-write your blog title
6.Leave App Namespace and Web Hosting
7.and click on continue.
facebook comments box in blogger
8.Enter Captcha and click on Submit.
9.In the new window click on Edit App
facebook comments box in blogger
10.Fill required fields as below image
facebook comments box in blogger
11.Save changes.
12.Now copy the App Id code to notepad
facebook comments box in blogger


1.Log in to blogger.
2.Template >> Edit Html
3.Tick at Expand Widgets.
4.Search for <html and just after it give a space and add this code,
5.Next Search For any of the codes
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
6.Just after it paste below code

<div id='fb-root'/>
    window.fbAsyncInit = function() {
      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;//;;
    e.async = true;

7.Replace App Id with that you saved in Notepad.

8.Next search for </head> and just above it add below code

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Blogger Tricks' property='og:site_name'/>
<meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='' property='fb:admins'/>
<meta content='article' property='og:type'/>

9.Make these changes(customizations):

a.Replace Blogger Trickswith Title  of your blog

b.BLOG-LOGO-IMAGE-LINK' with Your blog logo.

c.Replace 'YOUR_APP_ID with that code saved in notepad.

d.Change with facebook page id.

10Now,search for the code

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

11.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=''/>
<div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='' 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='' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'></a></b> Enhanced by <b><a alt='blogger widgets' href='' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'></a></b></div></div>

12.Save template and you are done.

1 comment:

  1. I tried but does not work in this site.


Please comment the message if you like post or any trouble