11
2011
Add Facebook Comment Box in Blogspot Blogs (Blogger)
An article by 
Facebook social plugin enables users to comment on your Blogspot blog using their Facebook credentials. Visitors don’t need to provide any additional identification (name, email, website) nor need to log in everytime. Here I have listed few pros and cons of the Facebook Comment Box, which will help you decide whether or not to replace your old comment system with the Facebook Social Plugin.
Pros:
- Comments made can be posted on your wall and eventually to your friend’s news feed.
- Notification for replies or likes to comments.
- Automatic authentication to all Facebook Comment Box.
- Less possibility of fake comments.
- Spams free.
Cons:
- Facebook Comment Box removes all the previous comments made on your blog. It doesn’t consider the previous comments and once you install this, you start fresh. So it is useful only for new blogs and not recommended for old blogs.
If you still want the Facebook Comment box, I have listed steps to integrate into your Blogger.
Steps:
Create Facebook App ID
To integrate Facebook Comment Box, you need to generate an App ID for your application. Remember that Facebook Comment Box is a Facebook application hosted by you ( you are the admin ), so you need a unique ID to identify your application.
- Go to https://developers.facebook.com/apps/
- It might ask you for authentication and security. Put in user credentials that will moderate the comment box. You can add more moderators (more on that later).
- Click on “Create New App” on top right.
- Pick any “App Display Name” and “App Namespace”. They aren’t important as it won’t show up on your blog. Name the application with some relevant name so that it can be recognized later.
- Once your application is created, you get a number under “App ID/API Key”. Note this down as the App ID is very important.
- After that, you need to add blogspot as your “Appp Domain”. Type out blogspot.com (no http:// or https:// as it didn’t work for me).
- Similarly, write your complete URL in the Site URL: under Website below. (see image)
- Then click on Save Changes on the bottom. Facebook will inform you that it might take sometime to propagate the changes to all servers. Till then you can edit your blogger template.
Site Domain: blogspot.com
Type complete URL of your blogspot.
This will appear when you click on Save Changes.
Problem?
If the above problem appears, it means that you have not followed Step 7. You need to give the complete URL of your blog.
Roles
You can add more moderators (admin) for the comment box from the “Roles” option on the left navigation.
The roles of the admins are:
- Admins can choose to make the default for new comments entered either “visible to everyone” or “has limited visibility”.
- Admins can also blacklist words and ban users.
To moderate your comment box,
- Go to https://developers.facebook.com/tools/comments
- Click on the “App Display Name” of your Comment Box.
- Moderator options will be available.
Edit Blogger Template:
Now lets edit your Blogger Template to integrate the Facebook Comment Box. Backup your template before you make any changes. I have used the Default Blogger Template as an example.
- Go to your Blogger Dashboard.
- Go to Design > Edit HTML
- Tick Expand Widget Templates above large text-box.
- Include this open graph meta tag within the head tag (see image).
<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/>Replace {YOUR_APPLICATION_ID} with the App ID/API Key of your Comment Box Application.
- To moderate, you need to list yourself as an admin. Include this open graph meta tag within the head tag (see image).
- Replace {YOUR_FACEBOOK_USER_ID} with your Facebook ID. To add multiple moderators, separate the uids by comma without spaces.
- Replace the following highlighted terms according to your blog. Place them within the head tag.
- Now, comes placing of the Comment Box. Lets place it right below the Social sharing buttons.
- Search for the term in the code snippet below: ( If this term isn’t present, make sure your have checked “Expand Widget Templates” )
- Place the below code right after the above term: (see image)
- Now, search for the term in the code snippet below. If this term isn’t present, make sure your have checked “Expand Widget Templates”.
- You will see something like this:
- Paste this code at line 2 in the above code snippet.
- Finally it will be something like this:
<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>
<meta content='{ SITE NAME }' property='og:site_name'/>
<meta content='{ SITE IMAGE }' property='og:image'/>
<meta content='article' property='og:type'/>
<body expr:class='"loading" + data:blog.mobileClass'>
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
reference image
<b:includable id='backlinks' var='post'>
<data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if> </b:includable> <b:includable id='backlinks' var='post'> <a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:blog.pageType == "item"'><div class='fb-comments' data-num-posts='10' data-width='500' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id'/></b:if>
<data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if> <b:if cond='data:blog.pageType == "item"'><div class='fb-comments' data-num-posts='10' data-width='500' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id'/></b:if> </b:includable> <b:includable id='backlinks' var='post'> <a name='links'/><h4><data:post.backlinksLabel/></h4>
reference image
The pinch in this code is the data:post.url where we assign a dynamic URL for every Blogger post/page. If you have a static link on this field then the comment box is the same for all posts.
There are few attributes for the fb-comments class provided by Facebook.
• href – the URL for this Comments plugin. News feed stories on Facebook will link to this URL.
• width – the width of the plugin in pixels. Minimum recommended width: 400px.
• colorscheme – the color scheme for the plugin. Options: ‘light’, ‘dark’
• num_posts – the number of comments to show by default. Default: 10. Minimum: 1
• mobile – (beta) whether to show mobile version. Default: false.
Finally, turn off default blogger comment system
- Go to Settings > Comments
- Highlight Comments as “Hide”. Save.
Demo:
Reference: https://developers.facebook.com/docs/reference/plugins/comments/
Let me know if you face problem anywhere.
Subscribe to fortystones.
Follow @fortystones on Twitter.
Get updated from our Facebook Fanpage.
Related Posts
61 Comments + Add Comment
Leave a comment
Fortystones Lab Projects
Categories
- Articles (43)
- Idea (2)
- Review (5)
- Social Media (29)
- Trending Topics (13)
- Collection (29)
- How To (27)
- Linux (28)
- News (15)
- PHP (6)
- Project (2)
- Tutorials (36)
- Java (4)
- Programming (10)
- Wordpress (7)
Popular Posts
- 40 Basic Linux Command-line Tips and Tricks
- Tips and Tricks for Facebook Chat (Save History/ Video Chat/ Send Files)
- 40 Linux Shell Commands for Beginners
- Creating a Simple GUI for Absolute Beginners (Java Tutorials)
- Online Coding Zones for Programmers
- Special: Facebook Smiley, Special Text Symbols and ASCII Arts
- The First on the World Wide Web
Your step by step guides was really useful for me. Thanks. I used your guides about adding Facebook comments to WordPress too and it was excellent too.
Thanks. Appreciate your comment
I’m having a problem mister. i have doneeverything but nothing seems to happen
You can check if you pasted and saved the codes properly. It should work if you have followed all the steps properly.
please help me on step number 7
These tags are used by facebook when some one shares the comment in his/her facebook timeline. Like the name of the blog, the thumbnail on the side that appears in facebook shares.
content = ‘{ SITE NAME }’ is name of your blog.. for this site it would be
content=’fortystones’ so whenever anyone publishes comment in his/her wall, your blog name appears
I will change content=’{ SITE IMAGE }’ to content=’http://www.fortystones.com/wp-content/uploads/2010/08/fortystones_logo5.gif’ as it is the picture that comes as thumbnail if anyone shares comment in facebook. It can be .jpg .png or any pic format.
content=’article’ is just the type of the content you have in your blog. I have mentioned mine as ‘article’.
If you are still having problem, you can skip this or any of the 3! it doesn’t really matter.
Let me know if you have any more problem.
https://developers.facebook.com/docs/opengraph/
I tried it +5 times … but no results
Can you please do this for me? i’ll send you my template, and you add the facebook comments to it …
Please, if you can, contact me in : muut@hotmail.nl , and I’ll send you my template+ the APP ID
Thanks!
sure.. no problem mate.. I’ll do it for you. I’ll ping you in your email.
Problem Fixed. It was because your template didn’t have the ‘share’ div active so pasting it inside the social share div didn’t activate the comment box. So, I pasted the code inside ‘post’ id of b:includable and it worked.. cheers
Hi dude . very clear and easy tutorial you have made !!!
Problem is that when i disable the comment box(hide) on settings none my previous comment or comment box is visible . is is hapen to show when i enable the comment box on setting is it normal or should i fix or i have missed any coding ?
please do reply . thanks
* am gonna follow your site now on wards as i find you have made the tutorials easy and clear
Hi there, can I send my blog template, so you can help in integration of facebook in it… I´m not abble to do it and I tried many times
Need help
Hi can you mail me at swaroop4s@gmail.com ? Im not able to follow your steps and do it, can you pls edit my template for me? i can send you the html
yea.. I’ll ping you and you can send me your template. I’ll try to integrate the fb comment.
Cheers
Hi Thanks for your guide
Very easy to use!
One small problem though, my comment box keep telling me that my blog entry’s url is “unreachable”. (However if i go to my wall and click the newsfeed, it does lead me to the blog)
Once I clicked that warning it link me up to the debug page, it shows me more problem.
Errors that must be fixed
1) Object Invalid Value Object at URL ‘http://alexyapsl.blogspot.com/2012/01/1st-successful-attempt-on-1st-day-of.html’ of type ‘article’ is invalid because the given value ‘{http://img641.imageshack.us/img641/5499/nomadiclifethumb.jpg }’ for property ‘og:image:url’ could not be parsed as type ‘url’.
2)Missing Required Property The og:url property is required, but not present.
3)Missing Required Property The og:type property is required, but not present.
4)Missing Required Property The og:title property is required, but not present.
I wonder if you can give me some advise here
And a Happy new year!
Hi,
I guess I resolved the problem myself
I think I misunderstood your snipet by not replacing the “{}” symbols.
Also, didnt know how to find my facebook user ID.
However the facebook developer page still insists I include the og:title and og:url meta tag, which I am trying to figure out now.
Thanks!
I tried this 3 different times and it still didn’t work… I swear i did it correct too… help
You can send me your theme.. Sometime it happens when you don’t have a conventional theme.
I followed all the steps and its still not showing. Can I please send you my template so you may correct it? email bernie@vivaville.org
Solved the issue. You can check your email. It was pretty straight forward in your template. I believe, you didn’t follow the instruction well.
Here is your test template where I integrated the facebook comment.
http://prashishtestblog.blogspot.com/2011/12/test-post.html
Don’t worry, I will remove the template from my test blog after your acknowledgement
Hi there. I tried it for more than 6 times but I failed. Can you please do it for me. my email tariquldipu@gmail.com
You can send it to me at prashishh[at]gmail. I’ll have a look.
Cheers!
I keep getting this problem
Error parsing XML, line 5, column 44: Open quote is expected for attribute “{1}” associated with an element type “property”.
Did you remove the ‘{ }’ when you posted your appid?
If you have sent me your template for integration but didn’t get any reply back, you can send it to me again. I was busy and could have missed out your email.
Prashish
Hi I followed all your steps but the comment box just won’t show.
Could you help me out?
Many thanks
sure. I’ll try to help you out. You can send me in my mail. I will send you in a couple of days.
Cheers
prashishh[at]gmail
Hello..I am stuck with #13-#14… the line: does not appear on my page instead there’s a script that’s really long…
can i send you my template too?
If you are still unsuccessful, you can send me at prashishh[at]gmail.
Cheers
I cannot seem to get this to work……..
In step #12 the html for me is different in line 1 so I wonder if my template will accept this. Can you help. Also I used my facebook ID # for my fanpage…..can I do that or can I only use my personal profile ID#??????
Hy, can you still moderate the comments with the facebook form?
I’m getting tons of requests to integrate facebook comment in your blogs.. Since, I have my schedules all packed, I will be able to do it in my free time only. I’ll try my best..
Cheers
hi….im having a problem from step 7 and onwards…can i email you my template and app id so you can add the comment box…??
i tried several times but no luck whatsoever…
thx
Great tut! Found out this after a lot of googling. The only instructional tutorial with updated Facebook app center. Good Work guys!
Hi Prashish,
Thanks for your tutorial and I appreciate your detailed step by step guide.
However it seems I can’t get this to work as well, I wonder why?
My blog link: http://www.pillowtalkpromises.blogspot.com
My intention is to implement the comment box after the social bar as you have shown in each and every blog post. Could it be some settings that I have hidden the comment box?
Please enlighten me and I do appreciate your swift reply if you could.
I would like to say thanks a bunch in advance for your help.
Hope to hear from you soon.
Cheers!
Wow! That is great! and your answering to us is a real rarity on the net. Thank you!
I worked it out and my blog is already posting on FB my comments.
I have only 1 small question for you: why, instead of using the pic I chose with the meta tag, as in step 7, my blog publishes a random photo (but always the same)?
keep on with your good work!
Hi there, I’ve been reading all the feedbacks in here and I still can’t make it work for my blog will you please do me a favor??? I will send you my template please do help me. . .Send me back a reply in my email at johnnedelmedriano@mail.com please. . .please. . .please I need your help.
Hey Thank you so much for doing this post to show all of us how to do this. I have been trying to replace my template code with the code that you have listed here, and I have not been able to get this to work. I have the “Awesome” blogger template activated.
Do you have any idea what could be going on?
i tried tried my dear friend plz plz help me plz can i send u my template and edite for me and send me back plz
Hi Prasheesh,
Thank you so much for the detailed tutorial… I’ve followed it step by step (and I’ve tried over a dozen other tutorials for the FB comment box before) and still no luck. It just doesn’t show up below my blog post.
Could you please take a look and help out?
Thanks in advance,
Kind regards,
Louma
*Prashish (sorry about the typo :$)
the box comment does not exist at all post..i tried several times but it doesn’t change..
will you please do me a favor????
i will send my template and sent it back to me..please help me..thank you =(
thanks a lot man, very help full post and i appreciate the effort you put to create something like this
I followed all the steps carefully but the Facebook comment box wont appear. Can you help me? I can send to you my template please
this… half works…
everything runs perfectly until, when i turn off the commenting, both comment system are turn off. i don’t have…
… but i put the comment widget above the…
… and it’s works. half works anyway. doesn’t matter. peeps may choose to comment using fb or blogger system.
thx bro.
When I installed this, I think I only clicked to have it on onlya couple of posts because I didn’t know what I was doing. It worked great for those posts…. but now it won’t show up on my blog, even though I’ve reinstalled it. What do I do? Any help would be GREATLY appreciated.
hy. I followed all the steps but the Facebook comment box wont appear. Can you help me? I can send to you my template please? Thank you.
Nice blog guys…
your article is very good…
visit back on http://www.siberrygames.com
watch online movies on here…
Hi Prashish Rajbhandari
The blog editor Im using is the latest one and Im so confused looking at your instruction using the old blog editor. Can I send you my codes and see if you can help me to intergrate it. FB gave me two sets of codes and both of them I have no idea where to put them.
Send me over at prashishh[@]gmail
great blog sure you are the topper
Sorry for not responding to you few of your guys. I was really busy with my work and couldn’t find time for time. If you still are facin problem, plz send your code over to my gmail. I’ll try reslving your issue. Thanks.
prashishh[@]gmail
i have tried alot but not a 10% result ..please help me..i want this comment box
i will send u my templates to you please you help me.
AC Today
6620 19th Street East Suite 113
Sarasota, FL 34243
941-799-1889
please create a comment box for my blog .i tried much.but i can”t do that.can u do it for me.my e mail is http://www.zineth.lahiru@gmail.com
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
One final note, I AM NOT a programmer so this isn’t the prettiest thing in the world, but it works great…
my last post didn’t accept the html code so I’ll try it this way:
<!– 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 –>
sorry, hopefully this works.
|
|
Lovely Streamer please think of this buddy
Hey Prashish Rajbhandari,
I was wondering if it is possible to take a look at my code. I’ve tried two times but it still doesn’t work for me. It may be the layout, it may be me…
Thanks in advance. Kind regards,
Zmey