Saturday 23 March 2013

Pin It

Widgets

HOW TO ADD FACEBOOK COMMENTS TO BLOGGER BLOG WITH NOTIFICATION ENABLED 2013 (100% WORKING WITH ALL TEMPLATES)


Facebook has released many plugins for blogs and websites.In 2009 Facebook developers introduced their best social plugin called "Facebook Comments Box". This plugin can be embedded in any website or blog. With the Comments Box, Facebook users on your site can comment on your content, post those comments to their profiles, and share them with their friends on Facebook.

How To Add Facebook Comments Box To Blogger

There are about five steps to get this done but chill out, it’s easy, ok?  Just follow the steps and you’ll have a nice Facebook comment box installed on your blog in no time.

Creating a Facebook Application:

1.Go To Facebook Developers Page

2.Enter your app name and name space



3.Fill the required fields,in app domain enter your domain name or blogspot.com if you have no custom domain


4.Scroll down and hit save changes,now you are done with creating facebook application.On the same page copy your App ID and save it in notepad.

Adding codes to your Template

1.Go to Blogger Dashboard -->Template -->Edit Html (Tick Expand Widgets Template)

Note:-Always Backup your template Before proceed.

2.Search(Ctrl+F) for <html  and replace it with the following code.

<html xmlns:fb='http://www.facebook.com/2008/fbml'

3.Find For <body> tag and add the following code just after it.

<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:: Replace YOUR_APP_ID with your app id you just noted down.

4.Now search(Ctrl+F) for </head> and add these open graph meta tags just above it.

<meta expr:content='data:blog.pageTitle' property='og:title'/><meta expr:content='data:blog.url' property='og:url'/><meta content='TechnoClouds Blogger Tutorials' property='og:site_name'/><meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/><meta content='YOUR_APP_ID ' property='fb:app_id'/><meta content='http://www.facebook.com/TechnoClouds' property='fb:admins'/><meta content='article' property='og:type'/>

Note::
i)Replace TechnoClouds Blogger Tutorials with your blog name.
ii)Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.
iii)Replace YOUR_APP_ID with your app id you noted Down.
iv)Replace http://www.facebook.com/TechnoClouds with your Facebook page url.

5.Now Search(Ctrl+F) for this Code.

<data:post.body/>

If you find 3 occurrence of  <data:post.body/> then add the above script after the first occurrence of it.If it doesnot work, try with second occurance.

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='padding:20px 0px 5px 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='550'/></div><div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:550px;'>Facebook Comments Plugin Enhanced by <a href='http://www.technoclouds.blogspot.com' target='_blank'><b>TechnoClouds Blogger Tutorials</b></a></div></div></b:if>

Note::
i)You can change the width of widget by replacing 550 with your desired width.
ii)As you all know you can change the color scheme to light or dark.
iii)Go to blogger dashboard --> Settings --> post and comments and set comment section as HIDE.

6.Save your Template.

If any Problem than Please comment below..............!!!!!

17 comments:

  1. Nice info, i like it, and must to tray 'it!
    Thanks..

    ReplyDelete
  2. very useful post! I think this is something i will show to my blog too. Thanks for the awesome share.
    high quality server rack

    ReplyDelete
  3. don every thing fine .... even its not working for me ...

    Mine is own custom domain , redirected to blogger.

    ReplyDelete
  4. Very Nice, Works Fine.., Thank For The Share.....

    ReplyDelete
  5. very nice post
    i have also wrote about this
    Reagard
    http://inspirational-online.blogspot.com

    ReplyDelete
  6. it appears after every blog posts now, but how can I make it appear under my individual pages too?

    ReplyDelete
  7. soo I just followed every step and this came uppp - Could not load template preview: Error parsing XML, line 3, column 51: Element type "html" must be followed by either attribute specifications, ">" or "/>".


    andddd, when i saved regardless - nothing changed!

    any help appreciated.

    ReplyDelete
  8. Ever wondered how to sell your blogger or blogspot blogs ??
    WEBSFORT is your answer.

    The problem with blogs is that only those blogs are sold which are self-hosted with custom-domains(and selling blogger or wordpresss or tumblr hosted blogs is not impossible as it’s against their privacy and terms).

    But recently I came accross one start-up named WEBSFORT which works in the classified way thus you can post your listing for free and once you find the seller then you can spend few hundreds of dollars on it by buying custom domain and hosting and sell it to the person.

    It’s easy, simple and absolutely free.

    ReplyDelete
  9. I didn't see the comment notification option. Pls help me

    ReplyDelete
  10. yeah Iv done it thanks :)

    ReplyDelete
  11. Really appreciable art work. I have never seen these types of designed chair ever. Very cool and marvelous designing.
    Dell - 15.6" Inspiron Laptop - 6GB Memory - 750GB Hard Drive - Diamond Black (i15RM-4121BK)

    ReplyDelete
  12. Thanks all for sharing the information about Facebook comments but also know facebook likes is daddy of all social media platform.Thanks.

    ReplyDelete
  13. That's really good! same like my company who make softwares like mass notifications

    ReplyDelete
  14. thanks man !!!! it works on me,, http://watchmovie4k.blogspot.com/

    ReplyDelete
  15. Hi,
    Nice work. I've found something new by reading your post. Have you ever tried ColibriTool for keyword research or for backlink monitoring? Probably it's the best SEO tool. I tried many of the free tools over the internet but they couldn't just able to satisfy me. At last I've found colibritool, and still stick to it. You can also find it here (http://colibritool.com).

    ReplyDelete

Complicated?
If you have any question about any Post, Don't hesitate to ask question.You can simply drop a comment below post.Your Feedback always appreciated.