Sunday, 2 September 2012

Pin It

Widgets

How To Add Facebook Comments Box To Blogger With Notifications Enabled

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.


This is how the Facebook Comments box looks like,







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 and click on create new app


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.Press ctrl+F and search for this code

<html

Infront of this add the following code.Be sure to have space before and after this code

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

Be sure to have space before and after this code.Take a look at the example below

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog…………..2005/gml/expr' >

2.Press ctrl+F and search for this code

<body>

3.If you can't find this search for something similar

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

In the next line,paste this code:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APPLICATION ID HERE',
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>

Be sure to Replace YOUR APPLICATION ID HERE with the ID you copied earlier

4. Now, let’s add the open graph meta tag. Search for this code in your template:

</head>

In the line above it paste this code:

<meta property="fb:app_id" content="YOUR_APP_ID" />
Replace YOUR APPLICATION ID  with the ID you copied

Now search for this in your template:

<data:post.body/>


If you’re using a magazine style template, you’re likely to have more than one occurrence of this. Using the wrong one won’t make the comment show up. If you’re not sure about which one to use, search for this instead:

<div class='post-footer-line post-footer-line-1'>

In the line just below it paste this code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.TechnoClouds-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div align='center' class='TechnoClouds-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src=' https://lh4.googleusercontent.com/-UAaBFHbYOz0/UEMOwwRpniI/AAAAAAAAAX4/40xIp36qXkE/h120/comment.png
 '/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id'width='450'/></div><div align='right'><a href='
http://technoclouds.blogspot.in/2012/09/how-to-add-facebook-comments-box-to.html' target='blank'><small>[Facebook Comment For Blogger]</small></a></div></div></p></b:if>

Save your template, the Facebook comment form should now appear. If it looks rather small, replace width=’450′ with width=’600′. This increases the width from 450px to 600px.


Enabling notifications for comments on your posts


- Visit this URL: https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID



- Be sure to replace YOUR_APP_ID with your real application ID



- On the page that opens, click on settings and add yourself as moderator



When someone drops a comment on your blog, you should be notified that instant on Facebook.

Reactions:

17 comments:

  1. Thanks friend it may give us nice looking to our blog. I think Facebook has already given nice set of gadgets.. concern on them.

    ReplyDelete
  2. Thanks for finally talking about > "How To Add Facebook Comments Box To Blogger With Notifications Enabled" < Liked it!
    My site > bing search ads

    ReplyDelete
  3. Nice Share.. I like it..
    Get View back to my Blog.. :D

    ReplyDelete
  4. Its works well on ma blogger blog and am really liking it

    ReplyDelete
  5. i hope you can help me about my blog...i would really appreciate it.

    ReplyDelete
    Replies
    1. Make sure that you have followed all the steps correctly.
      Only edit the code which is in red color.Dont remove the closing tag after width.

      Delete
  6. Its not working for My Pigeons Blog

    Please Check it Out..

    ReplyDelete
  7. oh my!!! this is great. it worked for me. such a great help :))) thanks a lot!

    ReplyDelete
    Replies
    1. Your welcome...
      Keep visiting...:))

      Delete
  8. You did a great job bro..
    I happily used it to my blog.. :)

    ReplyDelete
  9. i got a problem with app domain
    Error
    You have specified an App Domain but have not specified a valid integration URL.
    blogspot.com must be derived from one of: Site URL, Mobile Site URL, Canvas URL, Secure Canvas URL, Page Tab URL or Secure Page Tab URL.

    or

    Error
    App Domains: http://mysite.blogspot.com/ should not contain protocol information.

    how do i fix this?

    ReplyDelete
    Replies
    1. in app domain enter blogspot.com, not http://mysite.blogspot.com

      Delete
  10. hey guys, anyone know how i can add the comment box as a widget so i can add MOBILE="YES" to the widget script.. so i can get the comment box on the mobile site?????????????????????

    Thanks in advance.

    ReplyDelete
  11. The comment box doesn't show when i view in mobile

    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.