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
Copy the code below, type a space after the "html" and paste the code . This adds the xlmns attribute.
-Next up, look for
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
Copy and Paste the following code before it.
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
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
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
<html<body></head><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'/><data:post.body/>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
29 comments:
November 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 ?
November 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.
December 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?
December 28, 2010 at 10:40 PM
p.s. I'm using blogger
December 29, 2010 at 1:58 AM
@markettinggurro: what's the site of your blog?
January 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
January 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!
January 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...
January 27, 2011 at 10:56 AM
Is there a way to display recent comments from facebook comment box on sidebar???
March 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.
April 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
May 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
May 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
June 2, 2011 at 4:45 AM
Its not working in my blog... http://differentangles1.blogspot.com
June 23, 2011 at 2:16 AM
hi, i've been busting my ass to change the color scheme, can you help me ?
July 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/
August 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?
November 9, 2011 at 7:41 AM
No more things like what is shown in the pictures. It's no longer working.
November 23, 2011 at 10:26 PM
Finally!!! Thanks 4 the useful tutorial :-)
November 24, 2011 at 9:47 AM
The comments plugin requires an href parameter.
December 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
December 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
December 14, 2011 at 11:52 PM
sorry, yes it aint working anymore. the updated tutorial can be found here: http://bit.ly/FBCommentsPlugin
December 14, 2011 at 11:53 PM
The updated tutorial is a lot stressful to do. Check it here: http://bit.ly/FBCommentsPlugin
December 14, 2011 at 11:53 PM
The updated tutorial is a lot stressful to do. Check it here: http://bit.ly/FBCommentsPlugin
December 14, 2011 at 11:53 PM
Facebook only allows light and dark.
December 14, 2011 at 11:54 PM
The updated tutorial can be found here: http://bit.ly/FBCommentsPlugin
December 14, 2011 at 11:55 PM
The updated tutorial can be found here: http://bit.ly/FBCommentsPlugin
February 6, 2012 at 10:44 AM
Excelent!!!
Post a Comment