June 4, 2011

Add Facebook Comment Social Plugin to Blogger




Blogger offers you a default comment form for your blog to get feedback from your readers. It has moderation and threaded commenting feature too. Mostly comment form is vital as it allows your visitors to ask questions and provide their ideas and thoughts on your content. It's where conversation begins. However default comment form is not the only way you can make use of. If you need you can add third party commenting platforms on your blog. So what do you think, beyond default comment form, if you can add stylish comment plugin to your blog easily? Also what if your comment form can give more exposure to your content in addition to commenting?


It has Social Features


Facebook is a successive and popular social media platform on the web right now. Beyond the social media capability at Facebook, it offers series of social plugins for webmasters to use on external blogs and websites. Facebook comment box is such a useful and search engine friendly plugin offered by Facebook for webmasters. It follows the way how commenting happens at Facebook social networking website itself. It is stylish and enable users to share comment stories on user's Facebook wall with the link back to your content. So in addition to commenting, it will add more exposure to your content on Facebook too. As there are most users already on Facebook, most of your readers don't need to sign up to comment on your blog too.


Limitations


However before you implement Facebook comment plugin, you need to keep in mind that if you are wish to migrate your blog to another domain, existing comments made via Facebook comment plugin will no longer displayed after the migration. So it is recommended to make sure that you are not gonna migrate to another domain later on, as Facebook comment plugin doesn't provide a way to migrate your existing comments. Also remember that if you revert back to Blogger default comment form, you will lose existing Facebook comments too.


Implementation...


Eventhough Facebook offers comment plugin code officially, you may find it difficult when you implement it in Blogger. If so you can learn how to implement comment plugin for each post after going through this post. In addition, here you can learn how to add moderation capability for your comment box too. Moderation allows you to moderate comments and to find in which pages the recent comments were happened. So you can use Facebook comment plugin more efficiently and productively in your blog. Are you ready to get Facebook comment plugin in your blog?


Before You Go:

* If you wanna implement this plugin on your website, read How to Add Facebook Comment Social Plugin to Your Website.

* Decide whether you keep or disable default comment feature on Blogger. If you wanna disable comment feature on your blog, read How to Enable or Disable Comments in Blogger.

* Set up Facebook JavaScript SDK and Open Graph Protocol on your blog.


Steps:

1. Go to Blogger Dashboard.

2. Click on your Blog Title.

3. Navigate to Template from left pane.


Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Now click Edit HTML button.


5. Now search for <data:post.body/> in your template and add below comment plugin code after that. You can either use XFBML code or HTML5 code to implement XFBML version of comment plugin.

Notes:

* Adding below <data:post.body/> will place your comment plugin under the post. If you need to place it elsewhere on post page, read How to Position Elements on a Blogger Post Page.

* You may encounter two search results for <data:post.body/>. Add this code right after the first resulted line of code.

XFBML Markup

<b:if cond='data:blog.pageType == "item"'>
<fb:comments id='fbcomments' expr:href='data:post.url' expr:title='data:post.title' num_posts='2' width='500' colorscheme='light'/>
</b:if>

Note: The XFBML markup of this plugin may not support earlier versions of Internet Explorer. In order to enhance compatibility with older Internet Explorer versions, add below XML namespace to your root HTML tag.

xmlns:fb="http://ogp.me/ns/fb#"

i.e: <html b:version='2' ..... xmlns:fb="http://ogp.me/ns/fb#">


HTML5 Markup

<b:if cond='data:blog.pageType == "item"'>
<div class="fb-comments" id='fbcomments' expr:data-href="data:post.url" expr:data-title='data:post.title' data-num-posts="2" data-width="500" data-colorscheme="light"></div>
</b:if>


Color Indication Information:

   - Number of posts/comments displayed

This will set default number of comments to be displayed under Facebook comment box and other comments will be collapsed. If you wanna show all comments under the comment box, then remove this value with the attribute completely.

i.e: num_posts='2'

   - Width of comment plugin, in pixels

   - The color scheme of your comment plugin, specify light or dark.

   - Conditional Statement

This line validates your page and manage to show comment box only on post pages. If you need to show your comment box also on homepage for each post, then replace this line with line of code below.

<b:if cond='data:blog.pageType != "static_page"'>

Note: If you wanna customize the visibility of comment box on pages, read How to Show/Hide Elements on Different Pages in Blogger.

6. Now Save your template and check for new comment plugin under posts.


More Information:

* Now you are done with adding Facebook Comment plugin. If you would like to show Facebook comment count along with the comment box, just add below line of code after or before comment plugin code.

<a expr:href='data:post.url + "#fbcomments"'><fb:comments-count expr:href='data:post.url'/> Comments</a>

* Your comment moderation tools and settings will be displayed as follows with comment box, or you can access them via Facebook Comment Moderation Tool site.



* You can find more insights for your comments at Facebook Insights page.


Enjoy :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Pranav said...

Hi,

I am trying to add the facebook social plugin in my blog at http://hollywoodrasigan.blogspot.com/ along with the default blogger comments. Is it possible in any way? Thanks.

Mayura De Silva said...

Hi Pranav,

Yep... You can add Facebook comment plugin in addition to default Blogger comment form. Just follow the tutorial up here...

Cheers...

Unknown said...

Hello, been trying to make FB comments on my blog work. Have tried many different tutorials but to no avail. Going crazy here. Can't for the life of me figure out what I'm doing wrong. Any help would be appreciated. :D

Mayura De Silva said...

Hi Marcel,

Did you implemented JavaScript SDK and OpenGraph meta tags? :) If so, keep your implemented code and drop me your blog URL here.

Cheers...

Anonymous said...

Hello,
I have this blog and I just got those Facebook comments on it. It was quite a pain to get them though. But then i realized it's the same comments on every post. Any help to that? I want different comments for different posts.
Blog: http://hawk-wants-rock.blogspot.in/

Thank You.

Mayura De Silva said...

Hi Dave,

Just place Facebook comment box code as exactly in this post. Don't change any values except for highlighted ones. This code optimized only for Blogger :)

Cheers...

Anonymous said...

Hey Mayura,
I seemed to have fixed it up and it's how i want it now.
It would be good if you still take a look.

Your Blog really helps man! Thanks!

Mayura De Silva said...

Perfect :) Now your problem has been solved. Everything is alright there with comment box.

Welcome to Mayura4Ever mate :)

Cheers...

Unknown said...

Hey Mayura,

I've been trying every tutorial I can find but I can't seem to get this plug-in right. The only way I can get blogger to even accept the code is like this:

div class='fb-comments' data-href='www.isocialitemedia.com/' data-num-posts='2' data-width='430'/>

I had to put that code underneath the post-footer line 3 code. It's the only way the plug-in even displays. If i try to add any more codes, or put the code somewhere else I always get an error. The above code is the only one I have for facebook. I can't get the other codes to work.

If you check out my site: www.isocialitemedia.com.. it shows the comments on the homepage and it's the same comments through out. I tried the "data:post-url" thing, but that didn't work either.

Help please!

Mayura De Silva said...

Hi Jasmine,

Just copy and paste XFBML markup to your template as instructed and let me know afterwards :) I ll check it out...

Cheers...

Mt Place said...

Hi, I really need some help here. I can't find , search results are 0. How can I sort this out? THX

Mayura De Silva said...

Ohw I'm sorry. I've recently updated this post and one step went missing. Now refresh the page and check step 6 :)

Sorry for the inconvenience...

Cheers...

Mt Place said...

It finally worked, thnx again.
Also, I tried to introduce the share Facebook button, but when I did that, the comment box disappeared. So, i deleted the share button, and the comment box reappeared. It's weird..

:)

Surbhi said...

somehow,its not working for me :(
im not a very tech savvy girl.can you pls have a look where im going wrong?
http://www.flickr.com/photos/77616367@N04/6965894354/

Mayura De Silva said...

Hi Surbhi,

Thanks for making it easy with screenshot :) There's another <data:post.body/> tag in your template dear. Find it in your template and add Facebook comment plugin code right after that :) And make sure you have already added Facebook JavaScript SDK and Open Graph tags as I mentioned in Before You Go section.

Cheers...

Beth @ UnskinnyBoppy said...

Hi Mayura! I'm having some troubles and wondered if you could help me please. I have put this facebook comment box into my blog, but now I want it removed because I feel it's too confusing to my readers. I cannot seem to find the correct code to delete. I thought I had gotten all the code out but the fb comment box is still showing on my posts. My blog is www.unskinnyboppy.com.

Any help is greatly appreciated.

Beth @ UnskinnyBoppy said...

Ok, I found the code to remove the fb comment box, but when I try to save my template it says there is a missing and a missing needed before I can save it. Any help? www.unskinnyboppy.com

Beth @ UnskinnyBoppy said...

ah, your comments won't take my code- that's a closed p and a closed div that are missing.

Beth @ UnskinnyBoppy said...

Ok, I think I have figured it out! I hope. :) Thanks for this great wealth of info. I'm going to stop messing with my code before I get into deeper trouble. :D

Mayura De Silva said...

Oops... Sorry Beth I was away so long to respond to your query. As I look into your blog, you have already removed it successfully :) Glad you figure it out with no help.

Cheers...

lifeasastitcher said...

thanks for sharing this cool trick!
however, the like button didn't show up on top of the FB comment box
hope you can help me out.

lifeasastitcher said...

hi again, also can you show me how you did your feeback form? "Did you like this article"thing.
Thanks a heap!

Mayura De Silva said...

Hi Jinky,

Here like button doesn't show up with comment box. You have to follow Add Facebook Like Button for Blogger Posts to add like button on your blog.

Thanks for stopping by and for your compliments...

Cheers...

Mayura De Silva said...

That's Blogger reactions, typically you see on post footer. I've designed and played with HTML and CSS styles to implement that.

Cheers...

Jarvis Black said...

Hi Mayura, your tutorial worked perfectly. Thank you!

I have one question though. The code: " Comments" shows the comment count on the post and the main page, but it does not link to the post itself. Is there a way to do that?

Mayura De Silva said...

Hi Heckle,

Oops... yeah, it shows comment count but not link with post comment section mate.

Thank you very much for bringing me that query and I just updated this post with new changes. So it can link with your post now on. Replace your comment box and comment count code snippets with updated ones :)

Thanks for your compliments and helping me add something more to this post :)

Cheers...

Jarvis Black said...

Works perfectly! You are awesome! Thanks!

Mayura De Silva said...

You're welcome mate :) Glad to help you out and thanks for bringing it in.

Cheers...

pinay thrillseeker said...

Hi Mayura, first of all, thanks for this easy to follow tutorial. I successfully installed a facebook comment box in my blog.

One question though, when moderating the application comments using my facebook admin account, I couldn't see for what post were the comments made. Hence, I could not trace what the readers are actually asking for. Is there a way to find out for what post are comments specifically made for when using the moderate application comments as a facebook admin? Thank you.

pinay thrillseeker said...

my name is Cris Reyes, by the way (figuring out how to change my display name to my real name but I can't seem to do it, too, hopefully my reply doesn't fall into the spammy category because of it). And hopefully you could help me with my question. I have no idea on which posts the comments fall under when using facebook to moderate application comments. Thanks.

Mayura De Silva said...

I get your problem mate :) Facebook should've show at least post title. However you can find corresponding URL this way,

On the comment moderation page, underneath the comment, you will see the date it has been made. Just click on it and it will direct your to the relevant page. However date on replies are not clickable. You have to click on first comment made.

Hope it helps :)

Cheers...

Vijay Pal gusain said...

wow that was really usefull thanks

pinay thrillseeker said...

Thank you so much and thanks to Google for directing me here a couple of months ago.:) Been thinking of it for awhile now. Mayura, I want you to know I've only been relying on your tutorials to get my blog connected to Facebook since Day 1. Back then, I didn't have a hard time distinguishing for what posts were the comments made since I haven't written anything much, it only became a trouble lately.:) Your tutorials on adding a Facebook comment box and like box are the easiest to follow tutorials I've ever found. Again, thank you! :)

Mayura De Silva said...

You're welcome mate :) Glad to help you out and excited to know how my tutorials helping you to work out your blog. It's always a pleasure to know my posts helping people and I'm really happy you share your compliments here with me. That's the best thing I can happen :)

Enjoy blogging mate...Cheers...

Mira hacia Asia said...

thank you!!! i've finally made it work with your tutorial :)

Mayura De Silva said...

You're welcome :) Yippy, I'm glad you've made it referring to this tutorial.

Thanks for your comment and compliments...

Cheers...

Mariann said...

Hi, I have added the plugin, and now it shows both facebook and Blogger Comment feed. Can you help how I can integrate the two feeds into one?
This is my blog:
http://tinygirlwithbigbag.blogspot.hu/
Thanks so much for the help!

Mayura De Silva said...

Hi Mariann,

Unfortunately you can't migrate your Blogger comments to Facebook comment plugin or vice versa dear. So you have to keep both or stick to one. As you are yet on blogspot domain, if you move to a custom domain later, you will lose all Facebook comments made on blogspot domain.

Also Blogger follow country level redirection. Simply users can access your blog via tinygirlwithbigbag.blogspot.hu and tinygirlwithbigbag.blogspot.com. So a comment made on .com URL will not visible in .hu address. I recommend if you wish to go to a custom domain, use Facebook comment box after moving to custom domain. Else stick in to Blogger comment form or use a third party comment box which let you migrate easily.

Hope it helps :)

Cheers...

Mariann said...

Thank you Mayura. For the time being I deleted your plug in, and hope to find it again when I change to custom domain :)
Cheers, Mariann

Mayura De Silva said...

Hi Mariann,

That's a good decision you've made. So you don't wanna lose comments when you move to a custom domain. Comments add value to a post :) Alrighty, come back when you move to a custom domain. You're welcome here :)

Cheers...

Food Trips said...

i didn't work. I'm sure that I followed the steps one by one. 

Mayura De Silva said...

Hi Van,

Owkies :) Did you implemented JavaScript SDK as on Before You Go section dear? If you did it and already added Facebook comment plugin code to your template, just drop your blog URL, so I ll check it out.

Cheers...

Food Trips said...

Yes I did it. I got this error 
Error parsing XML, line 1559, column 7: The element type "b:if" must be terminated by the matching end-tag "" 

after doing all the steps. here's my url.
www.foodtripsph.blogspot.com

thank you :)

Mayura De Silva said...

Hi Van,

Just checked it out :) But I couldn't find either JavaScript SDK or Facebook comment box code there. Can you follow these two things,

i. Add JavaScript SDK code and save template.

ii. Add Facebook comment box code and save template.

Let me know in which step you get the error when saving template :) Don't add both code once, just one by one as I listed above, right?

Cheers...

Food Trips said...

alright. I'll do it. thank you. i'll let you know what will happen.

Food Trips said...

i didn't have any problem saving the javascriptSDK.
But after pasting the Facebook comment box code, I got this errorError parsing XML, line 1559, column 7: The element type "b:if" must be terminated by the matching end-tag "".

Mayura De Silva said...

Yup :) I can see JavaScript SDK now. The error may impose if code snippet missing some code. I hope you just copy and paste Facebook comment box code here. I just implemented it another blog and works perfectly.

Anyway after what line of code you placed comment box code dear? Did you use XFBML or HTML5 code?

Cheers...

Food Trips said...

I'm sure that I copy and paste the code. I tried XFBML and HTML5 one at a time. but both didn't work. I placed the code after the first 

Mayura De Silva said...

Are you using customized template dear? Anyway can you just add after in your template? :) Just for testing.

IL Chi Eric said...

This is AWESOME! I'll add it to my blog later.

Mayura De Silva said...

Hi Eric,

You're welcome mate :) Hope you would love to have it on your blog and keep the limitations in mind too mate...

Thanks for coming over and commenting mate :)

Cheers...

Aliyy Oke said...

Hello Mayura,
I have successfully implemented the open grah, javascript sdk and facebook comment as prompted but still the comment box doesn't show up on my pages. pls help. my site at http://aliotzone4techplus.blogspot.com

Mayura De Silva said...

Hi Alliyy,

Yeah, you have successfully implemented prerequisites :) Try following step #7 again. 'cause as there are 2 occurrences, you might have added the code after second one.

Cheers...

Aliotz said...

Hello Mayura,
Thank you very much for the help. Of course there are two codes on the template, but what really confused was that the first code has tags. Nontheless, I have successfully implemented it, I pasted it below the one that has the paragraph tags and it worked. Thank you once again, I appreciate your good work.
From
Aliyy Oke.

Mayura De Silva said...

Hi Aliyy,



Glad to hear you have made it and oh yeah, in some templates there could be paragraph tags though mate. I didn't wanna confuse by adding it all here as still anyone can comment and ask about it. Anyway, you've got it with no questions :)

Thanks for coming by and sharing your experience on adding Facebook comment plugin mate :)


Cheers...

Annisa Steviani said...

hi mayura, thank you for the tutorial! i successfully add the facebook comment box but it only appear on desktop version not in mobile. do i need to add some code to make it appear in mobile version? thank you!

Mayura De Silva said...

Hi Annisa,

You're welcome and glad to hear you could implement the Facebook comment box as well :)

That's a very good question and unfortunately, the comment box doesn't render on Blogger mobile templates though. I've been trying several possible workarounds, but no luck so far.

In that case you may have to disable your mobile template until we figure out a workaround :) I'm sorry, I have no solution so far, but I'll update this post and let you know if I can find a working solution.

Cheers...