RealcomBiz
Pin It

Add New Facebook Comment Box To Your Blogger/Blogspot Blog

This facebook comment box is an upgraded version of facebook comment form which enable admin to receive notification directly into there facebook account whenever comment is been drop on your blog/site and provide a reply option. facebook developers introduce this comment box around 2009, but having some little problem in the initial days of the development, but working perfectly well now.
In this tutorial it is not compulsory you disable your blogger comment box, you can use the both comment box to provide different options to your readers commenting on your blog.

Let's Get This Applied To Your Blog/Site

STEP 1= How to GET your Facebook App ID
  • Go to facebook developers page to get your App ID
  • Click "+Create New Application"
  • Click "Go to App" > "+Create New App"
  • A window will pop up enter your desired name and click "Continue" as shown below.

 In the next window that appear, you will need to fill some box as shown in the image below.


  • Enter Blogspot.com to where the red arrow is pointing.
  • Enter your blog/site url to where the purple arrow is pointing, in this format http://www.realcombiz.com/
  • Copy your App ID from where the brown arrow is pointing and paste it into a notepad.
  • Click "Save Changes"
STEP 2= Adding Facebook Comment Box
  • Login to your blogger dashboard
  • Click on "Design" > "Edit HTML" please make sure you back up your template
  • Mark/Tick "Expand Widget Template"
  • Use ctrl F to find <html
  • Give a space after </html tag and paste the code below after it.


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


Note : Give space at both ends of the code above.
Example:  ----***</html xmlns:fb='http://www.facebook.com/2008/fbml' ***---
  • Find the next code <body>, if you can find that, then find
    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
  • Paste the code below immediately after any of the code you find.

<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;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>

  • Replace App ID with your application id which you copied in the first step.
Find the next code </head> and paste the code below Before/Above the </head> tag.

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Realcombiz' property='og:site_name'/>
<meta content='Blog logo url' property='og:image'/>
<meta content='App ID' property='fb:app_id'/>
<meta content='http://www.facebook.com/realcombiz' property='fb:admins'/>
<meta content='article' property='og:type'/>
  • Replace Realcombiz with your blog title
  • Replace Blog logo url with your blog logo image url, this will appear next to your post title when you post is shared by readers.
  • Replace App ID with your application id, which you copied in the first step.
  • Replace http://www.facebook.com/realcombiz with your facebook profile url.
  • Now find the code below


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


Paste the code below immediately below/after the code above.

<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;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.realcombiz.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>Realcombiz.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.realcombiz.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Realcombiz.com</a></b></div></div>
</b:if>
  • To specify the type of background you want, change light above to dark, if you want a dark scheme.
  • To change the comment box size, edit width='520'
  • To change the footer credits size, edit width:510px
  • The difference between the comment box and the footer box should not exceed or below 10px.
  • Click "SAVE TEMPLATE"
Below is the preview of the two type of comment box

LIGHT COMMENT BOX

DARK COMMENT BOX


STEP 3= How To Go About The Notification

The process seems to be long, don't worry we are almost there. To get notification you will need to add to some code your blog, and you will be receiving notification directly into your facebook account as shown below


Let's get this done
  • Login to your blogger dashboard
  • Click on "Design" > "Edit HTML"
  • Mark/Tick "Expand Widget Templates"
  • Use ctrl F to find <b:skin><![CDATA[/ and paste the code below directly Above/Before it.

<meta content='Facebook profile id' property='fb:admins'/>
<meta content='App ID' property='fb:app_id'/>
  • Replace Facebook profile Id with your facebook profile id, read how to get facebook profile id for guidance on how to get that.
  • Replace "App ID" with your application id, which you copied in the first step.
  • Click "SAVE TEMPLATE"
STEP 4=  How To Moderate And Reply To Comment
If you want to hide the blogger default comment box 

Go to "Settings" > "Comments" > Mark the hide button, that's all.
If you have any problem with this don't hesitate to ask, and we ready to render our full support for you, and please don't try to remove the footer credits, to show us appreciation in return.

Do you know you can receive all our great tutorials directly into your email, even if you are offline, so to enable this simply subscribe to this blog now, and share this with friends/followers.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

51 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. I rarely comment on blogs but sincerely speaking your blog rocks. This a whole lot of info. For grabs . Keep it up

    ReplyDelete
  2. Thanks looking pretty. Add Facebook Comment box is not so simple as you explained. But Because of you I am able to do same.
    puff and pie

    ReplyDelete
  3. what if i stop in step 2. will the facebook comment box still appear. I ask bcos I have completed that and saved template but still dont have fb comment box

    ReplyDelete
    Replies
    1. if you stop in step 2, your facebook comment box will still appear, it's just that you won't be able to receive any notification if someone comment on your site using the fb comment box. if you still have any problem, feel free to ask

      Delete
  4. @Durodola Ridwan

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

    when I add the above code after <html before and after as adviced I notice that after I save the code is pushed to the end of the line and does not stay right after <html

    Below is how it appears

    <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>

    (Used HTML encoder as tags are not allowed here)

    Is this a problem. Could this be a reason for the fb comments box not appearing after all the steps have been followed?

    ReplyDelete
    Replies
    1. don't add the code before and <html, just add it only after <html, in this format ----</html xmlns:fb='http://www.facebook.com/2008/fbml' ---, take note of the space between </html and the code and the space after the code. If you still don't get your your fb comment box, then restore your previous backup, and start again following the tutorial carefully.

      Delete
  5. I don't know my blog logo url ... I don't have any special one - can I skip this step?

    ReplyDelete
    Replies
    1. You can skip it, and you can add it later if you wish.

      Delete
  6. when i go to "facebook developers page" i could not find "+Create New Application"
    help me out plz

    ReplyDelete
  7. ~+๐oO[ ลอตเตอรี่ ]Oo๐+~
    --------------------------------
    ~+๐oO[ ลอตเตอรี่ออนไลน์ ]Oo๐+~
    หาไม่เจอ ให้เซิดกูเกิลว่า
    "ลอตเตอรี่ออนไลน์"
    โทร 0863132381/082-0793134
    ragtrixro@yahoo.com
    หรือจำไว้ว่า http://www.ลอตเตอรี่ออนไลน์.com
    --------------------------------
    ~+๐oO[ มีตรวจหวยรางวัลที่1ด้วย ]Oo๐+~
    ~+๐oO[ สลากกินแบ่งรัฐบาล ]Oo๐+~
    ~+๐oO[ เลขเด็ด ]Oo๐+~
    ~+๐oO[ หวย ]Oo๐+~
    ~+๐oO[ facebook ]Oo๐+~
    ~+๐oO[ เกมส์ ]Oo๐+~
    ~+๐oO[ lottery ]Oo๐+~
    ~+๐oO[ หนัง ]Oo๐+~
    ~+๐oO[ รถ ]Oo๐+~
    ~+๐oO[ บ้าน ]Oo๐+~
    ~+๐oO[ งาน ]Oo๐+~
    ~+๐oO[ ขาย ]Oo๐+~
    ~+๐oO[ รูปภาพ ]Oo๐+~
    ~+๐oO[ ข่าว ]Oo๐+~
    ~+๐oO[ คลิบ ]Oo๐+~
    ~+๐oO[ การ์ตูน ]Oo๐+~
    ~+๐oO[ ดวง ]Oo๐+~
    ~+๐oO[ หญิง ]Oo๐+~

    ReplyDelete
  8. thank you very much bro i am very happy for your site and your this post its working very very good i like it bro

    ReplyDelete
  9. Hey, great post and it really helped me get the facebook comments working on my blog. I wanted to get some SEO out of it but the iframe issues (search engines won't crawl iframes) made this impossible and, of course, the only way I could find to pull the text of the comments was through php scripts (which blogger doesn't support). Soooo, i wrote a php script and threw it on my server and then called it as an object on my blogger template and viola! - it worked.

    In kind, I thought I'd share it with you and maybe add a little value to your already great post. Just paste this code in your blogger template above or below the commenting code and it should be good to go. If you want to view the results temporarily change the opening div tag to just <div> and refresh the page(s) to see how Facebook feeds the text. Hope this helps some of you!

    One more note, the php script grabs the referring URL(of wherever you've put the html script) so it should work for any and all posts/pages dynamically (including canonical URLs) - I thought that was a nice touch ;-)

    <!-- BEGIN Graph API comment pull and text insertion in an invisible div for SEO purposes -->

    <div class='separator' style='clear: both; display: none; text-align: center;'><object data='http://sukithookahs.com/get_comment_text.php' height='60px' type='text/html' width='450px'>

    </object></div>

    <!-- END Graph API comment pull and text insertion in an invisible div for SEO purposes -->

    A final note, I AM NOT a programmer so this isn't the prettiest thing in the world, but it works great...

    ReplyDelete
  10. First of all thanks for the article.
    I do everything in steps 1&2 and when I click to save the template or preview it I get the following message: XML error , line 1009, column 24: Element type "meta" must be followed by either attribute specifications, ">" or "/>".
    Can you please help me?
    Thank you

    ReplyDelete
  11. Error

    App Domains: http://yinyangyohackers.blogspot.in should not contain protocol information.
    what to do now ????

    ReplyDelete
    Replies
    1. It means you are making a mistake from the developers page. Check the second screenshot provided for guide on how to fill the data required correctly.

      Delete
  12. unfortunately the notifications are not working for me........

    ReplyDelete
  13. This is really informative and interesting, Its full of information.Thanks for sharing with us...





    Mobile Apps Development Companies

    ReplyDelete
  14. I am not able to get rid of the google comments on my blogger page. Please help, thanks.

    ReplyDelete
  15. This is the error message i gotwen i entered Blogspot.com as the App Domain: ''Error
    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.''

    ReplyDelete
    Replies
    1. having the same ERROR: 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.

      any solutions, please?

      Delete
    2. @Super Steel Africa & Yael
      Under the "App Domain" section, enter blogspot.com only if you don't have custom domain. Enter your custom domain without http://www if you have e.g "realcombiz.com"

      Delete
  16. This comment has been removed by a blog administrator.

    ReplyDelete
  17. hii i purchase a new "Apple iphone 4s 32GB"on EMI from letsbuymobile.com it is a good site of home delivery Cell phones,Laptops and Tablets....so you can choose best one in this site

    ReplyDelete
    Replies
    1. Hey guice I purchase tablets Apple 16GB iPad Mini with Wi-Fi from letsbuymobile.com on EMI.

      Delete
  18. This comment has been removed by a blog administrator.

    ReplyDelete
  19. This comment has been removed by a blog administrator.

    ReplyDelete
  20. It’s necessary to mention that article have expensive worth and E-commerce Solutions is one of the brand trends in Business to Business (B2B) marketing.

    ReplyDelete
  21. Im foto payudara Add Facebook Comment box is not so simple as you explained. But Because of you I am able to do same.

    ReplyDelete
  22. Thanks looking pretty. Add Facebook Comment box is not so simple as you explained. But Because of you I am able to do same.
    Agen Poker Online Indonesia Terpercaya

    ReplyDelete
  23. The information in this blog is extremely useful for the people.
    buy real facebook likes

    ReplyDelete
  24. Now a days it has become impossible to be striving for excellence and if you are looking to be getting the best and the most long lasting results then social media's plays a really devistated role in any of the affordable website design services.

    ReplyDelete
  25. Thanks a lot for your great presentation, i am very interested to your sharing and all post are so nice
    Logo erstellen

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. Excellent quality articles are here. This is good site with useful info.
    facebook likes

    ReplyDelete
  28. This is an excellent blog along with the great knowledge.
    best seo tool

    ReplyDelete
  29. Thank you for providing the information. I would like to see some more blogs on this topicsocial media marketing

    ReplyDelete
  30. Amiable articles and the blogs really helped me a lot, thanks for the valuable information.
    how to become instafamous fast

    ReplyDelete
  31. Cool. I have seen quite a few sites using this alternative. They also use other methods of enabling social media logins on their web properties. It's a mark of progress that people who choose their own web hosting provider can now use the type of commenting system that they want without a hassle.

    ReplyDelete
  32. You can get an OpenVZ VPS for as low as $14.00 a month. You can use our free-of-charge best website hosting hosting Control Panel, which will enable you to host an unmetered number of domains.

    ReplyDelete
  33. Hey enormous stuff or pleasant information you are offering here.

    Buy Vine Likes

    ReplyDelete
  34. Great blog post! I don’t understand how long it will require me to obtain through all of them!
    Full Review

    ReplyDelete
  35. Thanks a lot for publishing the new good stuff for us. I’ll really get the great advantage from your good stuff.
    Buy Vine Revines

    ReplyDelete
  36. Niko is the player himself and the others rise from different backgrounds, mostly gangs and new ethnical groups.
    GTA 5 PC Download

    ReplyDelete
  37. It's been good to see your blog when I always look for such type of blogs. It’s great to discover the post here.

    zenicreative.co.uk

    ReplyDelete
  38. Fastidious blog you’ve got here. I’ve ever been seeing you just about many blogs recently.
    IM Conference

    ReplyDelete
  39. e-photovisualFastidious blog you’ve got here. I’ve ever been seeing you just about many blogs recently.

    ReplyDelete
  40. The blog is good enough I again n again read this. web development

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger