About FriendFeed and FriendFeedBadge – present your FriendFeed in your own web site

Ok, so some of you must think I'm slightly retarded in regards to discovering new internet services. The thing is, though, that I usually test a lot of them as soon as they surface, then wait to see if they become popular, and if yes, hops on the train as everyone else. This time around, the turn has come to FriendFeed and the FriendFeedBadge.

What it is

FriendFeed is basically a service for collecting the content from all the other services you use online. You specify what you want to share from desired services - be it Flickr, Twitter, Tumblr, blog posts etc - and then have it all presented in the same view (web version) or feed view.

Follow me!

For anyone interesting in what I write, tweet and pictures I publish, I'd recommend following me on FriendFeed (just create an account, if you don't already have one). The upside is that you only need one place to keep track of, as opposed to Flickr feed, Twitter feed and so on. Another upside is, from what I've seen so far at least, tremendously good performance. It updates your services instantly, and it's built by a number of really talented people, where most of them have a background in creating some of Google's super-popular services.

Introducing the FriendFeedBadge

Like many others, I felt the need to publish the last items in my FriendFeed here in my own web site, to give people a broader feel of who I am, and at the same time offering them to find out more. I took a look at the official ways to embed FriendFeed, but immediately realized that their scripts were just in line with all other crappy document.write badges you've seen all over the web. On top of that, their code made a number of superfluous HTTp requests, getting a lot more content than I was interested in for a simple badge, so I set out to create FriendFeedBadge.

How FriendFeedBadge works

FriendFeedBadge is a basic badge script, which uses the excellent FriendFeed API to get my feed data as JSON. That way, I can create an accessible fallback for non-script visitors, avoid delaying the loading of my entire web site with a document.write script, and instead use JSON to retrieve my feed data. As soon as the rest of the page is loaded, it gets the JSON and traverses it to create a nice little badge (which currently resides in the column to the right of this post).

FriendFeedBadge settings

There are a number of settings to make sure your badge suit your needs. You can:
  • Control for what user you want to present the feed (naturally).
  • Number of items to show.
  • HTML element to insert the badge code into.
  • Size of images.
  • Whether to get each service's icon from the FriendFeed web site or not. An option is to have those icons on your own web server, and instead use CSS classes to apply them (each list item will get a class with the service name to hook into).
  • How long to wait for JSON data, before canceling the request, hence just presenting your fallback.
This is how the settings look like:
var settings = {
	userName : "robertnyman", // Your Friendfeed user name
	itemsToShow : 5, // Number of Friendfreed items to retrieve
	itemToAddBadgeTo : "friendfeed-badge", // Id of HTML element to put badge code into
	imageSize : 100, // Suggested values: 75, 100, 250, 400 or 500
	showServiceIcons : true, // Apply icons for each service from Friendfeed. Each list item get a service class name, for custom CSS styling
	timeToWait : 2000 // Milliseconds, 1000 = 1 second
};
Some suggested CSS to get you started as well:
.friendfeed {
	width: 150px;
}

.friendfeed li {
	margin-bottom: 1em;
	padding-left: 25px;
}

.friendfeed img {
	display: block;
	margin-bottom: 0.5em;
}

.friendfeed .friendfeed-post-date{
	display: block;
	font-size: 0.9em;
	margin-top: 0.25em;
}

Download FriendFeedBadge

If you've ever felt the need to present your FriendFeed banner in your web site, in an unobtrusive and suitable technical way, go download FriendFeedBadge now! I mean, hell, I use it! :-)
Posted in Developing,JavaScript,Personal/life,Technology |

8 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>