March 18, 2012

How to Add Facebook Comment Social Plugin to Your Website




How do you interact with your visitors or get feedback from them? Absolutely when we think about getting feedback, you will definitely think about commenting feature. It may available by default or you may have already implemented commenting feature on your blog or website for your visitors to send feedback, ask questions or to interact with you regarding your content. However do you like the default commenting feature available on your site? Or looking for adding commenting feature? If so, would you like to give it more stylish look and let your visitors comment via their Facebook login without any sign up process?

Facebook offers various type of social plugins such as Recommended Box, Activity plugin which integrates exclusive social features related to Facebook. As a webmaster, Facebook comment social plugin is another useful plugin if you are looking forward to add stylish and convenient way for your visitors to comment on your website. Facebook is place where most people engaged in and your visitors can comment using their existing accounts. It works as exactly you comment on Facebook and notifications will posted to relevant Facebook user on his news feed. Also Facebook plugin offers more settings such as moderation capabilities, comment using other login providers. So it will increase visitor engagement for your content and as now search engines crawl Facebook comments, visitors will tend to post comments too.

But if you wish to migrate or change your domain, Facebook plugin will not render existing comments as it populates comments only for the URL that comments have been made. And Facebook comment plugin still doesn't provide a way to migrate your existing comments. If it's not a problem or if you are not wishing to migrate, it would be the best option for you to increase engagement of your visitors. However we have already discussed implementing comment plugin in Blogger and if you are on another platform, you can find how to customize and implement it on your blog or website.


Before You Go:

* Make sure you have set up Facebook JavaScript SDK and Open Graph Protocol on your website before implementing Facebook comment plugin.

* If you are a Blogger user, read Add Facebook Comment Social Plugin to Blogger.


Steps:

There is nothing to worry about implementation. You just need to add comment social plugin at the place where you wanna show comment box for your visitors. You can either use XFBML code or HTML5 code to implement the comment plugin.

XFBML Markup

<fb:comments href='[Page URL]' num_posts='4' width='500' colorscheme='light'/>

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

<div class="fb-comments" data-href="[Page URL]" data-num-posts="4" data-width="500" data-colorscheme="light"></div>


Color Indication Information:

   - URL of the Page

Here you can specify a URL for this comment plugin. So the comments posted will be available only for that URL. Else you can leave it as a blank and comment plugin will detect implemented page URL automatically and store comments for that specific URL.

   - Number of posts/comments displayed

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

i.e: num_posts='4'

   - Width of comment plugin, in pixels

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


More Information:

* If you wanna show Facebook comment count along with the comment box, just add below line of code after or before comment plugin code.

<fb:comments-count expr:href='data:post.url'/> Comments

* 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

* If you got any questions not related to this post, please ask it at our Support section.

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

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

* Experiencing problems when commenting? Please report them at our Support section.


Chris said...

Dear Mayura,

I've tried placing the plugin code again, and it's not working. When I place the code where I want, I'll go back to preview the page, only to find that it completely ruins the whole page (it makes the whole page white with plain black text). It looks like this: http://www.chrissyler.com/chrissylerformayura2.html

(IF I DELETE THE <DIV CODES ON THAT CODE, IT WONT MESS IT UP)

I also tried the XFBML and the same thing. I'm going mad.

I'm using SeaMonkey to edit the page, do you think that is the problem ?

Please help me out. I'm going mad !

Mayura De Silva said...

Hi Chris,

Could you please remove your existing JavaScript SDK and add Basic JavaScript SDK from How to Implement Facebook JavaScript SDK on Your Website post?

Then try adding comment social plugin right after the line <div id="content"> and let me know :) XFBML code would be better.

Cheers...

Chris said...

Perfect ! Let me try this...

Mayura De Silva said...

Sure mate :) So I ll move this thread to support section. Respond there with your new updates.

Cheers...

eugeniusgenius said...

Hi there, how are you :) ?

Listen, some of my comments on my articles made through facebook comment box were missing, or so I thought. I finally know why they are not visible.

for instance, a visitor comments while living in Canada, for him my blog link will appear with .ca and not .com

That's why those comment will not be visible while for is .com

Is there a solution for this ?

eugeniusgenius said...

 by the time you read this i might have found a solution on this website

I'll try it and tell you if it works

try it yourself and let the whole world know about it :))

http://www.labnol.org/internet/prevent-blogger-country-redirection/21031/

Mayura De Silva said...

Hi Eugenius,

Facebook comment box shows comment made on specific URL. So even it is same post, as Blogger redirects to country level domains, they will not appear if you are using .com while your reader land on .ca domain.

The solution you found will stop redirecting, and I'm already using it. However as I use Disqus it doesn't matter anymore. Also Blogger comment system works with country level domains. But Facebook likes and comments will add for specific URL.

Cheers...

Jo said...

Hi Mayura, I've followed your advice step by step to add Facebook comments to Blogger. However, the comments are not appearing. I'm in the UK - is it a domain issue? What do i need to do to correct, please?

Mayura De Silva said...

Hi Jo,


You mean, Facebook comment box is working but no comments being rendered? :) Or none of it working?