Thursday, July 1, 2010

How To Add The Facebook Comments Box Social Plug-in On Blogger

Despite current privacy concerns over Facebook, Google announced that Facebook is the most popular website nowadays with 570 billion page views and more than 2 percent of the world's population as its members.
When I started TechEncounter.Net, I promoted the site by automatic notes submission and Twitterfeed on Facebook. Says Mark Zuckerberg, “If you’re building a website, there’s a good chance that most of your users are on Facebook,and if they’re not, they will be soon.”

Now, to further expand the viewership of TechEncounter.Net and encourage comments , I implemented the Facebook Comments Box Social Plug-in.

Click HERE for the updated tutorial on HOW TO ADD THE FACEBOOK COMMENTS PLUGIN ON BLOGGER

Click HERE for the SOLUTION TO 'SPECIFYING AN EXPLICIT 'HREF' WARNING FOR FACEBOOK COMMENTS PLUGIN

Click HERE for the tutorial on HOW TO  MODERATE COMMENTS USING THE FACEBOOK COMMENT MODERATION TOOL WEBSITE

1. Generate Your Facebook App ID
-Login to your Facebook account and head on to the Facebook Developers page.
-Click on "+ Set Up New Application"
-Fill up the "Essential Information" page
After saving the changes, you will now be provided with your Application ID and other details.
-On the menu on the left side, click on "Connect."

On the Facebook Connect Settings, enter your blog URL ending with a slash (i.e. http://www.techencounter.blogspot.com/), else you'll get an invalid URL warning.
Type in "blogspot.com" in Base Domain. If you already have a customized URL, leave this blank.
From here on, you'll just be needing the Application ID (from step 1). Copy your Application ID and do the following steps.
2. Add The Following Codes To Your Blogger Template. -Login to your Blogger Account and select your blog. Go to Design then Edit HTML and remember to check Expand Widget Templates. -Look for 
<html
Copy the code below, type a space after the "html" and paste the code . This adds the xlmns attribute.

-Next up, look for 
<body>
Copy and paste the following code below it. This adds the SDK script. Remember to change FACEBOOK APP ID with your Application ID
-Next, find 
</head>
Copy and Paste the following code before it.
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
<meta   content='MY-SITE-NAME' property='og:site_name'/>
<meta content='YOUR-APP-ID'   property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>
Change MY-SITE-NAME to any name you would like to appear when a user likes a page. Change YOUR-APP-ID with your Facebook Application ID number (from step 1). Change YOUR-FACEBOOK-PROFILE-ID with your Facebook user profile ID. If you still don't have a Facebook user profile ID, proceed to http://www.facebook.com/username/ 3. Now, to add and incorporate the Facebook Comments Box to your Blogger template. -So finally, look for 
<data:post.body/>
Copy and Paste the following code below it. This adds the Open Graph protocol tags. Edit the width to suit your tastes. Save Template and that's it! Enjoy your Facebook Comments Box. Did the tutorial work for you? Are there easier or better ways of doing this? We would like to know! The default Blogger comments box is still activated on TechEncounter.Net for non-Facebook users.


Click HERE for the updated tutorial on HOW TO ADD THE FACEBOOK COMMENTS PLUGIN ON BLOGGER

Click HERE for the SOLUTION TO 'SPECIFYING AN EXPLICIT 'HREF' WARNING FOR FACEBOOK COMMENTS PLUGIN

Click HERE for the tutorial on HOW TO  MODERATE COMMENTS USING THE FACEBOOK COMMENT MODERATION TOOL WEBSITE
at

29 comments:

  1. eerstkoffieNovember 10, 2010 at 2:56 AM

    Followed your clear directions and comment box works. However, posting a new article gives me 9 likes right away :-) I remember the 9 likes belong to the main site, not to a specific (newe) post. Other, older posts got the likes they received in a correct way. As far as I can see, this only happens with a fresh post. What could this be ?

    ReplyDelete
  2. ianpNovember 11, 2010 at 12:53 AM

    Thanks for the feedback @eerstkoffie

    Fortunately, I faced this problem before. ^^,

    remember this line (from the last part on step 2)? < meta content='MY-SITE-NAME' property='og:site_name'/ >

    Remove it. Sometimes it works, sometimes it doesn't depending on how the blog was coded.

    ReplyDelete
  3. UnknownDecember 28, 2010 at 10:39 PM

    when I use this code nothing shows up and my official facebook like box stops showing up all together. I've had this problem with every other third party html I've use though also, what ma I doing wrong?

    ReplyDelete
  4. UnknownDecember 28, 2010 at 10:40 PM

    p.s. I'm using blogger

    ReplyDelete
  5. IAnnDecember 29, 2010 at 1:58 AM

    @markettinggurro: what's the site of your blog?

    ReplyDelete
  6. OgbongeblogJanuary 3, 2011 at 4:50 AM

    The comment form is working on my blog, though restricted only to the post pages. You can read how I did it at facebook comment form for blogger

    ReplyDelete
  7. AnonymousJanuary 17, 2011 at 5:07 AM

    hi yeah I have the same problem, working fine but only show up on the post pages, how do I get it to show up on my main page under the posts? Thankyoou!

    ReplyDelete
  8. IAnnJanuary 17, 2011 at 9:03 PM

    @GusGus

    in the third step, delete the lines < b:if cond='data:blog.pageType == "item"'> and the closing code < /b:if>

    It should now show on your main page...

    ReplyDelete
  9. Simon L InfimateJanuary 27, 2011 at 10:56 AM

    Is there a way to display recent comments from facebook comment box on sidebar???

    ReplyDelete
  10. UnknownMarch 14, 2011 at 10:48 PM

    We are one of the renowned manufacturers and suppliers of Agriculture Machinery Parts which are used in manufacturing various agricultural related machines such as tractors and combines harvester machined parts.

    ReplyDelete
  11. facebook appsApril 15, 2011 at 11:23 AM

    I understand the new Facebook application is available now for free in the Android Market and is currently at a 3 out of 5 star rating. It gives you the following functionality

    ReplyDelete
  12. איתי דרורי - Itay DroryMay 4, 2011 at 12:24 PM

    I have a problem and I can't find the "<"body">" line.
    also used the windows search + manual word by word...It's just not there...
    My blog is : itaydrory.blogspot.com

    ReplyDelete
  13. CreativColorMay 24, 2011 at 9:50 AM

    thanks for this awesome tutorials... ive set up my FB comment plugin in my blog! http://www.creativcolor.blogspot.com

    ReplyDelete
  14. AnonymousJune 2, 2011 at 4:45 AM

    Its not working in my blog... http://differentangles1.blogspot.com

    ReplyDelete
  15. UnknownJune 23, 2011 at 2:16 AM

    hi, i've been busting my ass to change the color scheme, can you help me ?

    ReplyDelete
  16. Antti ArahJuly 28, 2011 at 10:16 AM

    I'we done this on my blog but the box isn't there! I've lost my like buttons and old comment bar. Help me out! What can I do? http://maailmamme.blogspot.com/

    ReplyDelete
  17. Emilia JaneAugust 1, 2011 at 9:51 AM

    I'm great up to step 3, I don't have a in my html... what should I do?

    ReplyDelete
  18. Three_DyNovember 9, 2011 at 7:41 AM

    No more things like what is shown in the pictures. It's no longer working.

    ReplyDelete
  19. ms.kuriosNovember 23, 2011 at 10:26 PM

    Finally!!! Thanks 4 the useful tutorial :-)

    ReplyDelete
  20. UnknownNovember 24, 2011 at 9:47 AM

    The comments plugin requires an href parameter.

    ReplyDelete
  21. iann puruggananDecember 14, 2011 at 11:50 PM

    you will have to comply with Facebook's new tag identifier. Read more on this here: http://bit.ly/FBspecifyHREF

    ReplyDelete
  22. iann puruggananDecember 14, 2011 at 11:51 PM

    this is an old tutorial. the updated tutorial is a lot stressful to do. Check it here: http://bit.ly/FBCommentsPlugin

    ReplyDelete
  23. iann puruggananDecember 14, 2011 at 11:52 PM

    sorry, yes it aint working anymore. the updated tutorial can be found here: http://bit.ly/FBCommentsPlugin

    ReplyDelete
  24. iann puruggananDecember 14, 2011 at 11:53 PM

    The updated tutorial is a lot stressful to do. Check it here: http://bit.ly/FBCommentsPlugin

    ReplyDelete
  25. iann puruggananDecember 14, 2011 at 11:53 PM

    The updated tutorial is a lot stressful to do. Check it here: http://bit.ly/FBCommentsPlugin

    ReplyDelete
  26. iann puruggananDecember 14, 2011 at 11:53 PM

    Facebook only allows light and dark.

    ReplyDelete
  27. iann puruggananDecember 14, 2011 at 11:54 PM

    The updated tutorial can be found here: http://bit.ly/FBCommentsPlugin

    ReplyDelete
  28. iann puruggananDecember 14, 2011 at 11:55 PM

    The updated tutorial can be found here: http://bit.ly/FBCommentsPlugin

    ReplyDelete
  29. Alan CoelhoFebruary 6, 2012 at 10:44 AM

    Excelent!!!

    ReplyDelete