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 :-)

201 comments:

«Oldest   ‹Older   201 – 201 of 201
Anonymous said...

На днях увидела удивительную рыжую кошку с зелеными глазами! Просто волшебное сочетание цветов! Хочу поделиться этим волшебством с вами. Посмотрите на эту красоту на фото по ссылке рыжая кошка с зелеными глазами. Не могу налюбоваться этой прелестью!

«Oldest ‹Older   201 – 201 of 201   Newer› Newest»

Post a Comment