How to Add Facebook Activity Feed Plugin to Your Website

Facebook Activity Feed plugin has been depreciated.

People come visit and enjoy interesting posts or media on your website. As they embrace your content, they will share them on Facebook, like them via Like button and also if you have implemented Facebook Comment plugin, they will tend to comment on your pages if they are fond of Facebook. Imagine you just on Facebook. Wouldn't you look at activities of your interested friends and people? However they almost on your News Feed. So if your friends recommend a content, you may wanna check it out too. But that bounds to Facebook. Hmm... but what if you can show off activities happen on your site and let readers find out what their friends doing on your site?

Facebook Activity Feed plugin enables you to show off recent activities happen on your blog or website via Facebook plugins. It includes recommendations aka likes, comments and shares. If someone logged into Facebook and landed on your site, they will able to see recent activities of their Facebook friends via this plugin too.

However if that particular reader has no friends interacting with your site or logged off from Facebook, the plugin is able to personalize to highlight most trending content on your site. You can personalize this plugin to show activities and recommendations together if you need to. So the users land on your site first time will find this plugin really interesting for them as they can see what are the trending contents and what sort of activities their friends been up to on your site. If you wanna grab more attention for your content, let's proceed and implement Facebook Activity Feed plugin on your site.

Before You Go:

* You need to implement Facebook JavaScript SDK before you proceed with below steps. Read How to Implement Facebook JavaScript SDK on Your Website.

* Make sure you have implemented Facebook like button on your site to appear recommendations on Activity Feed plugin. Read Add Facebook Like Button for Your Website.

Steps:

You just need to add below code snippet to your website. You can either use XFBML code or HTML5 code as you prefer.

Note: If you are a Blogger user and wanna add it as an element, you can add your button code snippet via HTML/JavaScript element. Read How to Add an External Widget or Codes to Blogger. Else if you wanna render it in a Blogger post or page, read How to Embed External Content on Your Blogger Posts or Pages.

XFBML Markup

<fb:activity site="[Your Site URL]" width="[Width in Pixels]" height="[Height in Pixels]" header="[Enable/Disable Header]" colorscheme="[Activity Feed Plugin Color]" linktarget="[Target of Link]" border_color="[Color of Border]" font="[Font Family]" recommendations="[Enable/Disable Recommendations]" max_age="[Maximum Age of URL]"></fb:activity>

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

Color Indication Information:

- Your Site URL

Add your site or blog URL here. In case if it doesn't display any activities, remove preceding http:// from the URL.

i.e: ~~http://~~www.mayura4ever.com

- Width of Facebook Activity Feed Plugin (Pixels)

- Height of Facebook Activity Feed Plugin (Pixels)

- Enable/Disable Header

You can specify whether to display header with the heading "Recent Activities" or not. Specify true or false in this case.

- Plugin Color

Here you can set color scheme for your plugin. Specify dark for plugin with dark background and light for default white background.

- Target of Link

Specify how your links gonna open. Specify _blank to open links in new window and _top or _parent to open links in same window.

- Border Color

You can specify color of the border either by hex color value or color name.

- Font Family

Specify which font family to use in Activity Feed plugin - arial, lucida grande, segoe ui, tahoma, trebuchet ms, verdana.

- Enable/Disable Recommendations

You can display recommendations altogether with activities in Activity Feed plugin. Specify true to display recommendations in the bottom or else set false.

- Maximum Age of URL

This validates the maximum age of an URL/Post by days, to display in Activity Feed plugin. Activity Feed plugin shows the URLs created within last number of days as the number you specify here. You can use values from 1 to 180 or just specify 0 to not to take it into account.

Enjoy :-)

Mayura4Ever

January 5, 2012