Tuesday, 6 November 2012

How to Add Facebook Comment Box to Blogspot Blogs

Blogspottutz.blogspot.comFacebook have released many of the resources and plugins for bloggers. In the whole plugins of Facebook, LIKE and Share were the most inspired one. Now they have released Facebook comment form for bloggers on which I am going to give the tutorial today. It helps Bloggers to get more exposure to from Social MediaThis Facebook comment plugin looks simple, cool and it allows users to comment on your blog by logging into Facebook, Yahoo, AOL and Hotmail.Lets Move on to The Tutorial.

                                                                Live Demo                                                   


How to add Facebook Comments form to Blogger

Create an App on Facebook

1.Go to Facebook Developers page to Create a New App
2.Create a New app with sufficient Details as Shown Below

3.Note Down your Facebook App Id which is shown like this

Java Script SDK for Comment Box

4.Go to Blogger Dashboard -->Template -->Edit Html (Tick Expand Widgets Template)
Note:-Always Backup your template Before proceed.
5.Search(Ctrl+F) for <html  and replace it with the following code.
<html xmlns:fb='http://www.facebook.com/2008/fbml'
6.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.

Facebook open Graph Tags

7.Now search 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='Best 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/BlogspotTutorials' property='fb:admins'/><meta content='article' property='og:type'/>
Note::
  • Replace Best Blogger Tutorials with your blog name.
  • Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.
  • Replace YOUR_APP_ID with your app id you noted Down.
  • Replace http://www.facebook.com/BlogspotTutorials with your Facebook page url.

Comment Box Widget Code

8.Now Search for this Code.
<data:post.body/>
Add the following code just below it.
<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.blogspottutz.blogspot.com' target='_blank'><b>Best Blogger Tutorials</b></a></div></div></b:if>
Note::
  • You can change the width of widget by replacing 550 with your desired width.
  • As you all know you can change the color scheme to light or dark.
  • Go to blogger dashboard --> Settings --> post and comments and set comment section as HIDE.
  • If you find 3 occurrence of  <data:post.body/> then add the above script after the first occurrence of it.
9.Save your Template.

If any Problem than Please Let us Know..............!!!!!

Get free daily email updates!

Follow us!

Like Us.... Receive updates on your Facebook wall!!!!

58 comments:

  1. Hi ,
    I enjoyed reading your blog with my partner. She love style and read so many fashion related news. I got your link from her. This is an excellent piece of writing.

    Webzemini
    Money Market Software,Money Marketing Software

    ReplyDelete
  2. Yes.Facebook have released many of the resources and plugins for bloggers.This is an excellent piece of writing.blog with my partner.


    ReplyDelete
  3. cįŗ£m Ę”n bįŗ”n mƬnh cÅ©ng đang mįŗÆc phįŗ£i trĘ°į»ng hį»£p nhĘ° cį»§a bįŗ”n

    truyen sex | truyen sex | truyen sex moi | phim sex | phim sex | anh sex

    ReplyDelete
  4. Australia is known to have a very large population of players of pokies.
    The name pokies originated from the game poker though in Australia it is generally used to mean all forms of slots.
    Online pokies provide complete comfort to players. With these, you don’t have to leave your house so that you can play.
    Many casinos in Australia now provide their members with the chance to play pokies online hence the players are able to
    enjoy their favourite games from the comfort of their home. In fact, the online casino Australia population can now enjoy
    playing virtually all their favourite casino games from an online casino in the region.
    you need more info visit this link
    www.casinopokies777.com
    lisƤtietoja

    ReplyDelete
  5. 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 just remove the div tags and give the object some width/height parameters. 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='' type='text/html' width=''>

    </object></div>

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

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

    ReplyDelete
  6. onlinekasinoking.co.uk Visit Online Kasino King now to find safe and secure online casinos games including exclusive bonus offers.

    ReplyDelete
  7. casinosroom.co.uk Play online casinos for free, Best uk casino rooms just far a click.

    ReplyDelete
  8. casinobonusguide.co.uk Play online games for free, Online Casino Bonus Guide offers more than 400+ online games including free bonuses.

    ReplyDelete
  9. casinospromotion.co.uk find best online casinopromotion just a click away casinospromotion.co.uk

    ReplyDelete
  10. livecasinogaming.co.uk LiveCasinoGaming.co.uk offer play online casinos around europe and guide them to internet casinos playable in uk and europe.

    ReplyDelete
  11. online-casinouk.co.uk Find the best UK online casinos, reviews, bonus codes, guides and news about online casino UK - Online Casino UK.

    ReplyDelete
  12. online-live-casino.co.uk Play Live and Online Casino games at Online-Live-Casino - and enjoy a bonus of up to £2000.

    ReplyDelete
  13. onlinecasinoeurope.co.uk Onlinecasinoeurope.co.uk, Europe's favorite online casino gaming website, where play casino games with huge no deposit bonuses and much more fun.

    ReplyDelete
  14. kasinogames.co.uk Rich Reels Casino provides the most entertaining online gambling experience available on the internet.

    ReplyDelete
  15. online-kasino.co.uk These sites can be categorized in different ways like the onlinecasino directories, onlinecasino review sites and the affiliate marketing sites and the onlinecasino sites.

    ReplyDelete
  16. popularcasinogames.co.uk The onlinecasinos have become quite popular with the emergence of the internet.

    ReplyDelete
  17. realcasinobonuses.co.uk Browse the latest casinobonuses offers & how claim them, Read review, type of bonuses & much more about casinobonuses from UK casinosites.

    ReplyDelete
  18. instantcasinobonuses.co.uk Instant Casino Bonuses - Real Money UK Internet Casinos Bonuses - £000 Welcome Bonus

    ReplyDelete
  19. bestcasinopayouts.co.uk Top online casinos with best payout rates, browse our listed casinos and get highest percentage of payouts.

    ReplyDelete
  20. onlincasinogame.co.uk The sites like onlinecasingame.co.uk are offering the information related to casino games to support the players in selecting the appropriate online casino.

    ReplyDelete
  21. Very nice post, I was expecting something like this from you. keep up the good work.

    ReplyDelete
  22. Great topic, Top online casinos with best payout rates, browse our listed casinos and get highest percentage of payouts.

    ReplyDelete
  23. I did all the steps then it work thanks :)

    ReplyDelete
  24. Smart ways to make money. don't miss it.......visithttp://xupmoney.blogspot.com/

    ReplyDelete
  25. Thank you for your comments i hope you will share the blog with others.

    ReplyDelete
  26. Comment box would be great on my web site Live Casinos but it's made by pure html and css no cms system, data bases etc... so I would probably need to change this first to be able to add comment box?

    ReplyDelete
  27. This game was amazing to play in online.
    Pogo Help

    ReplyDelete
  28. very useful tip for newbies, thanks for sharing.
    university essay writing

    ReplyDelete
  29. Thank you for your comments i hope you will share the blog with others. reference site

    ReplyDelete
  30. use full information you have shared about blogs. http://www.allsizejackets.com

    ReplyDelete
  31. nice very use full blog for learning n imformative thank you for sharing.
    order essay online

    ReplyDelete
  32. Who doesn’t want to get an A+ grade in the class? All students, whether in the high school, college or university, want to see their academic career filled with A+ and A’s. So why don’t you get along as well through learning how to write a good composition!

    essay writing help

    ReplyDelete
  33. This blog is very nice. I glad to see it. Thanks assignment writing service

    ReplyDelete
  34. Nice post. I really enjoyed reading it. Keep up the good work and God bless you. assingment paper writing

    ReplyDelete
  35. Great Article! very useful tip for newbies, thanks for sharing. speech writing

    ReplyDelete
  36. Nice post. I really enjoyed reading it. Keep up the good work and God bless you. Write Research Paper For Me

    ReplyDelete
  37. great site thanks for sharing such an informative post.Help me write my paper


    ReplyDelete
  38. InformativŠµ article, just what Iwanted to findPay For Essay

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

    ReplyDelete
  40. I am delighted to find some more informationAssignment Writing

    ReplyDelete
  41. i m glad to see this great blog thank you for sharing. research paper

    ReplyDelete
  42. Thanks for sharing this Precious Information and I will share this with my friends too. Best Coursework Writing Services

    ReplyDelete
  43. Amazing work and interesting site and there very useful articles I like your blog... Thesis Writing

    ReplyDelete
  44. great article about student training .this is a nice and informative blog.
    paper writing site

    ReplyDelete
  45. Nice post, I am very happy to be here because this is a very good site that provides lots of information.
    Robin Southwell

    ReplyDelete
  46. IPL Live Useful and well written post. Thanks for the share. Continue your good work

    ReplyDelete
  47. IPL 2017 Useful and well written post. Thanks for the share. Continue your good work

    ReplyDelete
  48. Great Article! very useful tip for newbies, thanks for sharing.

    www.golden-slot.com
    gclub
    GCLUB CASINO

    ReplyDelete
  49. Personally it seems to me that the standard form of commenting is much more convenient than the analogue of Facebook. For example, when I had to write a custom term paper I often asked for the help at the different blogs and this type of comments helped me a lot.

    ReplyDelete
  50. Nice and informative article. keep it up your good work
    Please visit: TBI Technologies

    ReplyDelete