Adding Facebook Comment Box To Your Blogger Blog

This weekend, a friend was discussing with me about the Facebook commenting system. She was surfing the net and saw a Facebook comment box on a blog and thought it would also be cool if she had that on her blog as well. She requested for a tutorial but Instead of given her a long private tutorial, I decided to bring it public as my today’s post so she can better understand the implementation process. And also, because I do know that many bloggers out there that uses blogger blog as their platform might also want to know how to implement it on their blogs.

facebook-comment-box

One of the main reasons bloggers uses these social networks commenting system on their blog, is because of the benefits that surrounds them. In all things that has advantages must surely has disadvantages as well, which we all know, right? But I am sure we all know the advantages and disadvantages behind using these comment systems on our blogs… in case you don’t know the good and bad side, I’ll have to make it my next post :).

Must Read: Top 5 Must Have Plugins For A Better WordPress Optimization

Steps to setup your own Facebook commenting system on your blog

Before I continue – this post might be a bit great :), so do pay some attention and please do ask questions in whatever area you do not understand. But not to worry – I will be breaking it down the best way I can :).

Step #1

You will have to create a facebook app for your blog by following the simple step below.

Go to Facebook Developer sign up page by clicking here: Facebook Developer signup page

By clicking the link above, a “create new app” box will appear and if it doesn’t click the “create new app” button manually to bring out the popup box.

Have you done that? Now in the “App Name” Type in the blog name you want to use the app for or you can use any name you which to give the app [See image below]

facebook-comment-box-2

Now click the “Continue” button to take you to a new page where you’ll see your app ID. [Image below]

facebook-comment-box-3

Now copy the “app ID” code because we are going to be using it letter on.

Step #2

Go to you blogger blog dashboard >>> Click Template >>> Click Edit HTML >>> Now you are in you code editor.

Warning: - Please before we start with the main tutorial, make sure you do a proper backup. In case you make any mistake, you can easily revert back.

Now search for the <html> Tag.

Remember: – To make your search more easy, click the code box then simultaneously press the ctrl + F key to bring out a search bar. [See image below]

facebook-comment-box-4

Have you seen the <html> tag? If yes, paste the below code beside it

xmlns:og='http://ogp.me/ns#'

See below image for clarification…

facebook-comment-box-5

Now that we have successfully done that, search for the <body> tag.

Have you seen it? If yes, paste the below code right below the tag

<div id="fb-root"></div>

<script>

window.fbAsyncInit = function() {

FB.init({

appId : 'YOUR_APP_ID',

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>

Have you done that? Now search for the </head> tag and paste the below code right above it.

<meta property="fb:app_id" content="YOUR_APP_ID" />

Having done that, we are going to implement the last step so our commenting system can finally be visible :).

Now search for the <data:post.body/> tag.

Have you seen it? If yes, insert the below code right below the above tag.

<b:if

cond='data:blog.pageType == "item"'>

<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>

</b:if>

Now you have successfully added the Facebook comment box to your blog. You can now get the full advantages that Facebook brings.

Note: Make sure you change the “YOUR_APP_ID” with your main App Id we copied earlier on

Conclusion:

Facebook commenting system is way better compared to the Google plus commenting system. My reason is because you can moderate comment before it goes live on your blog and to be honest with you, nothing beats that :).

I have made the tutorial as simple as ever but in case you still have any issues implementing the codes, just make a comment using the comment box and I will try to solve the problem as soon as possible.

Over To You:

Do you have questions, comment or thought you’d love to share with us? then please do, by using the comment box below. remember that your comments, questions and thoughts are highly welcomed and appreciated.

Let’s be social:

Was the post lovely? then do click the like button, share us and recommend us to friends because you’ll never know who among your friends might be in need of a post like this. Do not forget to subscribe to our feed for your latest updates on the go.

Don't Miss Any Post Again. Subscribe To Our Feed And Be Updated

Enter your email address below:

 

Powered by OnenaijaBlog

Comments

  1. says

    Hi Babanature,

    Informative post yet again :)

    Yes indeed, I do keep seeing some blogs with Facebook commenting system and perhaps they are better than the G+ ones, though the G+ commenting system has the power of ‘Google’ attached to it. I agree, moderation is a concern, though I think you can remove the comments if they aren’t good enough.

    In either of the cases, if you don’t have many people on Facebook or Google who like or share your posts, the comments might never happen – so, you need to be careful of that too. I guess the same tutorial would work for WordPress blogs also, or is there a different way for that, just asking, not that I want to use it on my blog as I’m pretty happy with CommentLuv :)

    Thanks for sharing. Have a nice week in this new month of September :)
    Harleena Singh recently posted…How To Deal With Teenage ProblemsMy Profile

    • says

      Hello Harleena,
      Glad you liked the post :)
      Yes! Google is better than Facebook when you talk of the benefits attached to both platform but the lack of moderation that the G+ has, have discourage me from using it because it is impossible to manually moderate all your blog post comment right? but facebook gave us the chance to moderate our comment before we make it go live and which i feel is great.

      This commenting system do look cool on blogger blog when you combine it with the default comment system. Yes, you can apply same procedure to wordpress but with a slight change.

      Thanks for the great comment, it was surely appreciated… do have a blessed week my friend :)

  2. says

    Hi Baba !
    While i was using the blogger platform , i had added the fb comment box to my blog ..but later removed it because i wanted the visitor to drop a meaningful comment rather than posting Nice Post / Thanks for sharing which appears first as a comment before moderating it .Thanks for sharing this tutorial .

    -Pramod

    • says

      Hello Pramod,
      Facebook comment is great for bloggers who are on the blogger platform that wants to get more natural traffic without them stressing too much to get it. because the people that make comment on your blog using the facebook comment system, it will also reflect on their timeline for their friends to see which will give you traffic.
      You know, this code i dropped is customized and so no post can go live without you approving it. :)
      Thanks for the comment and do have a nice week ahead…

  3. says

    Excellent tutorial Baba,

    For some reasons I have never been a fan of FB comments and I don’t comment on blogs that have FB comments either. :)

    I know you must be wondering what kind of a blogger I am, I kicked against a searchbar, but at least I had some valid points. I always believe comments should be stored in our server.

    Third-party companies could bring out policies anyday that can ruin one’s hard labor. I always try to see things from all angles and try to stick with what I like. Most times, it is never the majority. :)

    Eitherway, it great to see you spending much time here trying to help other bloggers. They will definitely find the piece helpful.

    Do have a great day.
    Nosa E Nosa recently posted…Alibaba Group Takes Over Yahoo ChinaMy Profile

    • says

      Hello Nosa,
      You know – in life, we all have what we like and what we don’t right? I am using the facebook commenting system and the default comment box on one of my blogger blog and i must confess that it is doing some pretty good job when it comes to conversion :)

      I do understand what you’re saying and i also did look in that direction that’s why i gave two option of comment to pick from :).

      Thanks for the comment and do have a nice week ahead :)

    • says

      Hello Timi,
      This post was because of what we discuss and i do hope you liked it and hope it is simple to comprehend? Anyways, thanks for the comment and do have a nice week ahead…

  4. says

    That’s something new for every blogger blog user. Adding Facebook commenting system you can increase your posts share as well as Facebook fans at the same time.

    But I’ve read in MOZ blog that “Google has been using Google+ to discover new content, and many web professionals have discovered that URLs shared on Google+ are crawled and indexed very quickly”. If so, then the G+ commenting system will be the best for increasing SEO.

    • says

      Hello Majharul,
      You are definitely right, the Facebook commenting system do increase traffic from the platform and i’ll say that, that is helpful :)

      No doubt that Google plus commenting system is the best when it comes to the seo benefit because it is owned by Google and Google is the owner of the world wide web :). But i do love the facebook commenting system compared to G+. my reason is because, G+ comment system do not have moderation before the post goes live but the facebook comment system has. ;)

      Thanks for the comment and do have a good week ahead :)

  5. says

    Hi Babanature,

    I do see many bloggers blog with this but I don’t take quick notice of this on wordpress platform. I could still remember vividly when my blog was on blogger platform that other blogs on blogger platform were seriously searching for this trick and thank God the whole searching has come to an end, but I wonder if this can as well work on wordpress platform.

    • says

      Hello Adesanmi,
      When i first started blogging, i did install the facebook commenting system on my blog and i did enjoyed it for some time before the site shutdown. and it did feels good using it as part of my commenting system then :)

      Yes it is possible to integrate it to your wordpress blog or you can just use a plugin for it :)
      Thanks for the comment and do have a nice week ahead… :)

  6. says

    Great post Babanature,

    Facebook comment is okay but I was told that comments on facebook comment system never get indexed by search engine.

    Secondly, I don’t think it is the Ideal comment system for blogs since there is no option to comment as a guest and trust me, not everyone has a facebook account and wants to own one.

    I rather stick with intensedebate or commentluv (It encourages blog comments)

    Nice post and thanks for sharing!

    • says

      Hello Ebenezer,
      The thing is, the Facebook commenting system can be an additional comment system on your blogger blog because the default comment box looks funny. The facebook comment system can drive traffic to your blog when any reader comment using it.

      I do know that it is not everyone that has a facebook account but a larger amount do have an account with them, right?

      Thanks for stopping by and dropping your wonderful comment. do have a nice week ahead… :)

  7. says

    Hi Babanature,

    I have used this fb comment box in my blog. There’s only one risk that other social comment box have … the spammers. The worse thing is just we can control spammers in this comment section

  8. says

    Hi Babanature, I am not a huge facebook fan as you know, so I did not even know this was possible. There are so many ways to comment these days, but I still love the old wordpress with comment luv :> People are encouraged to comment, rewarded, don’t need to have any logins for a specific social media (or disqus or whatever). But everyone has different opinions and needs, and it’s nice to know what the alternatives are

    • says

      Hello Ashley,
      You know, this is for the blogger blog users and you do know how funny the blogger blog comment looks, so adding one more alternate to the default one wont be a bad idea right?
      Thanks for the comment and do have a great week ahead…

  9. says

    Hi Babanature,

    I have two Blogger blogs and I’m using Google + comments on one of them which seems to work out fine. On the other I have Intense Debate with CommentLuv.
    I never thought about adding Facebook comments though. Actually neither one of those blogs are connected with my Facebook page so I’m not sure I would consider it.

    Thanks for the instructions, you never know, I might change my mind one day.
    Ileane recently posted…How NOT to Get Your Guest Post Accepted (and 3 Steps to Take Instead)My Profile

    • says

      Hello Ileane,
      I have never tried commentluv on my blogger blog before. But i do love the default comment system and the facebook comment system as well so readers can choose the one they actually want. The Facebook comment system do help in driving traffic and i have seen it with my case study blog :)

      Thanks for stopping by and dropping your comment. Do have a precious week ahead :)

  10. says

    Awesome tutorial Babanature,
    I have been a long fan of facebook comment system long time ago but anymore, on wordpress blogs you can actually tweak it for google to index it but don’t really know much about that for blogger blogs.

    Even I am to use the blogger platform again I will still prefer the default comment system, intense debate or even the google+ comment system.

    Overall your tutorial was very easy to understand one and will definitely turn out to help a lot of bloggers out there.

    Hope you do have a splendid week buddy

    • says

      Hello Obasi,
      You know, blogger blog has much more seo compared to other blogger platform. my reason is, you do not need any tweaking before you can get some good amount of traffic from Google :). Now combining the facebook traffic and google’s that’s a bad combination right?

      Also note that because you’re adding this to blogger blog doesn’t mean you will remove the default comment system on your blog…
      Thanks for the comment and do have a peaceful week ahead :)

    • says

      Hello Daniel,

      It is so useful to blogger blog and it do help in bringing valuable traffic to ones blog. If it is not working as it says, bloggers will not be using it :)

  11. Jeevan Jacob John says

    Hey Babanature,

    Great Tutorial :)

    Your post brings back memories to me (especially the post body code). I do remember trying to find it within the template code when I was using Blogger.

    Personally, I prefer the default commenting systems, but with blogger, I suppose we can make an exception :D (Blogger really has to improve their commenting system). Plus, SM commenting systems can help us to promote our posts on Social media.

    Anyways, thank you for sharing the tutorial!

    • says

      Hello Jeevan,
      Traffic is what we all want and getting this traffic is definitely not easy but with strategy like this, you are sure to have some good amount of traffic from the social part as well. It is advisable to add the default comment system and the facebook comment system for readers to chose from.

      Thanks for the comment and do have a nice week ahead…

    • says

      Hello Kumar,
      You’re right, Facebook is most popular and can indeed bring traffic to your blog faster, when a Facebook commentator comment on your blog.
      Thanks for the comment and do have a nice weekend ahead :)

  12. says

    Hi Babs,
    This is a well researched article, I had Facebook comment on one of my blog, coupled with the Disqus comment plug in, I had to remove the later because readers find it easy to make comment without inputting all the regular details, provided the reader is logged on i Facebook, commenting becomes easy.

    • says

      Good to hear that Augustus, Facebook comment system is indeed one great way of getting traffic to ones blog effortlessly.
      Thanks for the comment and do have a nice weekend

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge