Tuesday 6 November 2012

How to Add Facebook Comment Box to Blogspot Blogs

by Rohit Malik
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 Media. This 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. Ahman9 January 2013 at 00:43

    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. virtual tours provider20 January 2013 at 23:14

    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. Unknown28 February 2013 at 17:52

    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. bogra4208 March 2013 at 00:47

    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. Unknown14 March 2013 at 21:46

    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. Unknown17 March 2013 at 20:20

    thanks post
    truyen sex | phim sex | truyen nguoi lon | truyen sex moi | phim sex moi | phim | xem phim | phim sex

    ReplyDelete
  7. onlinekasinoking.co.uk21 April 2013 at 21:09

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

    ReplyDelete
  8. casinosroom.co.uk21 April 2013 at 21:10

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

    ReplyDelete
  9. casinobonusguide.co.uk21 April 2013 at 21:11

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

    ReplyDelete
  10. casinospromotion.co.uk21 April 2013 at 21:11

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

    ReplyDelete
  11. livecasinogaming.co.uk21 April 2013 at 21:12

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

    ReplyDelete
  12. online-casinouk.co.uk21 April 2013 at 21:13

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

    ReplyDelete
  13. online-live-casino.co.uk21 April 2013 at 21:13

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

    ReplyDelete
  14. onlinecasinoeurope.co.uk21 April 2013 at 21:14

    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
  15. kasinogames.co.uk21 April 2013 at 21:14

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

    ReplyDelete
  16. online-kasino.co.uk21 April 2013 at 21:16

    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
  17. popularcasinogames.co.uk21 April 2013 at 21:17

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

    ReplyDelete
  18. realcasinobonuses.co.uk21 April 2013 at 21:18

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

    ReplyDelete
  19. instantcasinobonuses.co.uk21 April 2013 at 21:19

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

    ReplyDelete
  20. bestcasinopayouts.co.uk21 April 2013 at 21:19

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

    ReplyDelete
  21. onlincasinogame.co.uk21 April 2013 at 21: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
  22. price per head1 May 2013 at 05:05

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

    ReplyDelete
  23. Leon Alex12 May 2013 at 16:06

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

    ReplyDelete
  24. iMade20 June 2013 at 09:24

    I did all the steps then it work thanks :)

    ReplyDelete
  25. Xupmoney27 June 2013 at 04:33

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

    ReplyDelete
  26. Unknown1 July 2013 at 21:53

    thank for sharing
    Piala Dunia 2014

    ReplyDelete
  27. wagering software13 August 2013 at 21:54

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

    ReplyDelete
  28. Unknown21 August 2013 at 01:13

    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
  29. Unknown10 March 2014 at 23:14

    This game was amazing to play in online.
    Pogo Help

    ReplyDelete
  30. Unknown19 March 2014 at 04:38

    Thanks for sharing. Homework Helper

    ReplyDelete
  31. Unknown20 March 2014 at 04:00

    The post is absolutely fantastic. professional writing a paper

    ReplyDelete
  32. Unknown15 May 2014 at 02:30

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

    ReplyDelete
  33. Unknown17 May 2014 at 00:09

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

    ReplyDelete
  34. Unknown2 June 2014 at 01:22

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

    ReplyDelete
  35. Unknown2 June 2014 at 23:40

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

    ReplyDelete
  36. Unknown7 June 2014 at 01:47

    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
  37. Unknown8 June 2014 at 21:56

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

    ReplyDelete
  38. Unknown9 June 2014 at 22:33

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

    ReplyDelete
  39. Anonymous10 June 2014 at 00:02

    Thanks a lot ..

    paid essay writing

    ReplyDelete
  40. Unknown10 June 2014 at 05:16

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

    ReplyDelete
  41. Unknown11 June 2014 at 23:17

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

    ReplyDelete
  42. Unknown24 June 2014 at 23:40

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


    ReplyDelete
  43. Unknown24 June 2014 at 23:52

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

    ReplyDelete
  44. Unknown25 June 2014 at 00:42

    This comment has been removed by the author.

    ReplyDelete
  45. Unknown25 June 2014 at 00:56

    I am delighted to find some more informationAssignment Writing

    ReplyDelete
  46. Unknown26 June 2014 at 02:52

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

    ReplyDelete
  47. Unknown29 June 2014 at 23:43

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

    ReplyDelete
  48. Unknown30 June 2014 at 00:06

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

    ReplyDelete
  49. Unknown30 June 2014 at 01:32

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

    ReplyDelete
  50. Unknown21 August 2014 at 02:33

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

    ReplyDelete
  51. Unknown21 August 2014 at 22:31

    Awesome post! Keep up the good work. top gun leather bomber jacket

    ReplyDelete
  52. micheal james1 October 2014 at 00:54

    nice post keep sharing..
    fast essay writing service

    ReplyDelete
  53. Unknown2 October 2014 at 04:56

    Good information! Nice post... mba essay writing service

    ReplyDelete
  54. Unknown17 March 2017 at 08:04

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

    ReplyDelete
  55. Unknown17 March 2017 at 08:07

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

    ReplyDelete
  56. Yang Kuo8 June 2017 at 08:33

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

    www.golden-slot.com
    gclub
    GCLUB CASINO

    ReplyDelete
  57. Unknown17 June 2017 at 21:51

    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
  58. Unknown1 June 2018 at 03:55

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

    ReplyDelete