Mayura4Ever: How to Add Facebook Activity Feed Plugin to Your Website

January 5, 2012

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

27 comments:

Seamus said...: what am I doing wrong:

(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'));; May 22, 2012 at 6:10 PM
Mayura De Silva said...: Hi Seamus,

There are few problems I see mate

i. data-site="http://www.facebook.com/opsres" - You better use your site URL instead of Facebook page URL.

ii. data-width="300" =""> - Remove highlighted text from your code.

iii. - You don't need to use tags mate

If they are not helping, add JavaScript SDK again...

Hope it helps :)

Cheers...; May 22, 2012 at 6:33 PM
Seamus said...: I think I have done as you said but it does not appear to be working:

(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'));

Is there anything else needed.
Thanks
Seamus; May 22, 2012 at 6:51 PM
Mayura De Silva said...: Seems you haven't done mate. Still I see above mentioned problems in your code. Don't use tags in your comment if you don't have them in your code mate.

Follow above instructions exactly and remove current JavaScript SDK and add it again.

And where did you implement this plugin? Drop me your site URL so I can see myself :)

Cheers...; May 22, 2012 at 6:57 PM
Seamus said...: Thanks so much for this: As you see in my code my facebook page is :www.facebook.com/opsres but the site I want show it on is:www.oviuz.com
Please how do I do this?; May 22, 2012 at 7:53 PM
Mayura De Silva said...: Now your code is seems alright except for one. Remove ="" from your code.

I just visit your website but seems you haven't implemented Facebook Activity Feed code on it. Add your code with JavaScript SDK on your website and let me know mate :)

Cheers...; May 22, 2012 at 8:00 PM
Seamus said...: Sorry my code is in www.oviuz.com/oviuz2.html; May 22, 2012 at 8:22 PM
Mayura De Silva said...: Hi Seamus,

I can see your Activity Feed plugin there now :) You did it. But in order to show Facebook activities either users should share your pages on Facebook or like them via like button. Else they won't appear on your Activity Feed mate :)

Cheers...; May 22, 2012 at 8:35 PM
Seamus said...: Mayura,
You made my day - thanks a lot.
Seamus; May 22, 2012 at 9:06 PM
Mayura De Silva said...: You're welcome mate :) Thanks for stopping by and glad to help you out...

Have a great day friend...

Cheers...; May 22, 2012 at 9:08 PM
Seamus said...: Always a question.....
I just need to understand..... is it because i have registered my Facebook page i.e. /opsres to the www.oviuz.com website that the code knows where to look as there is no mention of the facebook page within the code iteself.
Thanks
Seamus; May 22, 2012 at 9:20 PM
Mayura De Silva said...: It doesn't matter you have a Facebook page or not mate :) Code looks for the Facebook shares or likes happened on your specified site. In your code you have specified Ovious site address. So it will show up all Facebook activity happens on your site. If you change specified site into another, it will show Facebook activity for new specified site. That's what the plugin responsible for.

Cheers...; May 22, 2012 at 9:27 PM
puja said...: Hi,
I have added the Recent plugin in my code as:

(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'));

But it is showing only the recent activity box .Not showing the recent activity .
Please help me; July 20, 2012 at 10:57 AM
Mayura De Silva said...: Hi Puja,

You need to replace [My Site Name] with your actual site URL to display activity on Facebook.

Cheers...; July 20, 2012 at 11:03 AM
Puja said...: Hi,
Thanks for reply.
I have put my site name in this place
but it is not working.
Please help; July 20, 2012 at 3:36 PM
Mayura De Silva said...: Hi Puja,

Not site name, but site URL :) Anyway can you send me your site URL here. Make sure you have already added Activity Feed code to your site.

Cheers...; July 20, 2012 at 8:37 PM
Puja said...: I want to add this code to my salesforce page( its just like a website ) i have added
(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...";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));; July 21, 2012 at 5:25 PM
Mayura De Silva said...: Hi Puja,

I've checked your site. Seems any of your pages not being shared by others on Facebook. So Activity Feed plugin has no activities to show on it. So nothing wrong with plugin and activities will show up once someone share your pages on Facebook. However Activity Feed is best suite for blogs rather than product or service websites.

Cheers...; July 21, 2012 at 9:32 PM
Heather Pinson said...: Hi all, hope this isn't considered spammy but I just wanted to mention that there is another tool for embedding Facebook feeds in your site that can also aggregate content from other channels like Instagram and Twitter, and it's kind of pretty. At the risk of appearing spammy, here's the link: www.postano.com/solutions/for-websites/ Look, no hyperlink! Haha, seriously though, it's a nice tool so y'all should check it out. Thanks for the article Mayura!; October 6, 2012 at 4:19 AM
Mayura De Silva said...: Hi Heather,

That sounds cool if someone wanna show off content on whole page dear :) Sidebar widgets are premium features where costs money. Thanks for mentioning about it for ones find it useful.

Cheers...; October 6, 2012 at 7:39 AM
Don said...: Great information but how can I remove the "Sign Up" button / section from the Activity Feed? FB documentation is not very clear.
Thanks; April 24, 2013 at 5:48 PM
Mayura De Silva said...: Hi Don,

Sign up button is coming with official Facebook plugins and rendered only when you are not signed into your Facebook profile mate :) The code has no option to get rid of it though.

Cheers...; April 27, 2013 at 4:38 AM
Mayura De Silva said...: Hi John,

Activity Feed plugin shows activity happens on Facebook only and it doesn't show comments in there though. Do you need to add Facebook Activity Feed and Comment plugin?

Cheers...; May 22, 2013 at 3:01 PM
Luis Martinez said...: Hi I hope you can guide me..

I have this website:

http://gaga.com/com/

its a basic table and at the bottom left I put this code from facebook

(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'));

and in that cell I put

with the goal being that whenever someone posts something on my facebook page then that post will appear in the website http://gaga.com/com/ ..

So I uploaded the file to the server and I only get no activity to display..

Thanks for any advice.; August 1, 2013 at 7:26 AM
Mayura De Silva said...: Hi Luis,

First I'd recommend adding the script you inserted at bottom left, just after the body tag.

Facebook Activity Feed shows off activity happening happening on the Facebook related to your website. For example, if someone likes a page of yours on your website, it will be displayed in the feed. You need to have Facebook Like buttons on your pages for that scenario.

If you wanna show stuff you post on your Facebook fan page, you need to install Facebook Like Box instead :)

Cheers...; August 1, 2013 at 5:43 PM
Luis Martinez said...: Mayura thanks for answering..

I did as you said and I think its cool that all the people that like that page show up. as you can see

http://ralphirosario.com/index2013.htm

but what i am looking for is lets say i post something on his facebook page like "hi this is a test"..

Can that comment show on his website? What plugin would I need? Or is it even possible?

Thanks; August 2, 2013 at 7:39 AM
Mayura De Silva said...: No Luis :) That's not possible. Only you can show the Facebook posts by your page via Like Box only.

Cheers...; August 2, 2013 at 11:13 AM

January 5, 2012

How to Add Facebook Activity Feed Plugin to Your Website

XFBML Markup

HTML5 Markup

27 comments:

Post a Comment