I’ve been looking for a plugin that I could use to create a lifestream page on my blog, but since Friendfeed already does a great job of aggregating my internet bread crumb trail, I thought I’d try and make use of their embeddable widget and cook one up myself.

First stop – the Tools page, which you can get to here:

Then select Embeddable Widget. The default settings for the widget have a Friendfeed logo, a border and a subscribe button, which will look out of place on a themed blog page, so we need to configure the options, like this:

and then copy the code that which gets generated into a new page on your blog (if you’re using WordPress, you’ll need to select the HTML tab, rather than the Visual tab when you’re editing the page). You should now see something like this:

<script type="text/javascript" src="http://friendfeed.com/embed/widget/yourFriendfeedName?v=3&amp;num=10&amp;hide_logo=1&amp;hide_comments_likes=1&amp;hide_subscribe=1"></script><noscript><a href="http://friendfeed.com/yourFriendfeedName"><img alt="View my FriendFeed" style="border:0;" src="http://friendfeed.com/embed/widget/yourFriendfeedName?v=3&amp;num=10&amp;hide_logo=1&amp;hide_comments_likes=1&amp;hide_subscribe=1&amp;format=png"/></a></noscript>

I’ve highlighted a couple sections in the code snippet that you can change – for my use, I changed the num= variable so the widget displays 20 items instead, and I’ve also removed the code between the <noscript> tags, too (this renders the widget as an image, for anyone running their browser with Javascript disabled).

I wanted the lifestream data to look like it was an organic part of my blog, so had to edit my stylesheet in order to make the background transparent and hide the comments and likes. In WordPress, the stylesheet is located in the wp-content/themes/yourTheme/style.css , which is where the following additions get appended:

.friendfeed {
color:#222222;
font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif !important;
font-size:10pt !important;
}
.friendfeed img {
border:0 none;
}
.friendfeed .header div.inner {
display: none !important;
}
.friendfeed .header img.logo {
display: none !important;
}
.friendfeed .feed {
background-color:transparent !important;
border-color:transparent !important;
}
.friendfeed .feed .entry .comments .comment {
display: none;
}
.friendfeed .feed .entry .likes {
display: none;
}


(For some reason, I had to explicitly define the font-family; the widget wouldn’t inherit from my default style sheet – if anyone can shed some light on the reason, I’d be grateful for the lesson!.)

When I was tinkering with CSS elements, I couldn’t for the life of me get the changes to apply to the page; it was rendering with Friendfeed’s default settings – despite the use of the !important tag. I was banging my head against the wall, until I read this post by Michelle McGinnis over at building43:

There is one important caveat, however: your stylesheet will be cached on the FriendFeed server, so every time you make a change you will need to change the name of the stylesheet. You can do this by adding ?v=1, ?v=2, ?v=3 etc to the end of the link.

I’ve highlighted the field Michelle is referring to in the code snippet copied from the widget generator:

<script src="http://friendfeed.com/embed/widget/yourFriendfeedName?v=3&num=10&hide_logo=1&hide_comments_likes=1&hide_subscribe=1" type="text/javascript">

Once I’d updated the version number, the page rendered itself nicely – thanks Michelle; I really was tearing my hair out with that one!

So there you have it – a themed lifestream page, courtesy of Friendfeed, and I’m pleased with the result, if I do say so myself! If you do this on your blog, let me know; I’d love to hear from you.

He goes on to point out that, while FriendFeed does a fine job of bringing all of that data together, it would be better to have that data on his blog, rather than just at FriendFeed.

I commented on Loic’s post to say that while FriendFeed is a destination today, the development of  their API will turn it into a data source tomorrow. I’m already starting to see this happen – FriendFeed has made my Plaxo Pulse redundant (although Plaxo still does a better job than anyone synchronising my calendars); the same is largely true of  my Facebook mini-feed where I used to have Twitter, Google Reader (via Feedheads), Flickr, Last.fm etc, all posting updates to my mini-feed via their Facebook applications – now I don’t need to; the FriendFeed application does it all instead.

If we take that over to the Loic’s centralised online presence – his blog-, he’ll still have to trust the aggregation task to FriendFeed, but he can get his aggregated data feed back out, via the API, and recentralise it how he wants.

Which brings us to a part of the data portability debate that has been largely overlooked and that is “it’s my data, I want to use it where and how I like”. In this post on TechCrunch, Mike Arrington suggests that DataPortability is somehow a threat to FriendFeed, but I’m not sure that’s the case. Ok, so FriendFeed isn’t about getting social networks to explicitly talk to each other, but unlike Facebook, which is quite happy to let data in while not letting it back out, FriendFeed feeds and comments are available to anyone with a bit of “mad coding skillz“.

If I can feed the same data stream into my blog, into my Facebook or wherever, then isn’t it this early openness that puts FriendFeed ahead of the game? One feed to rule them all in the webness bind them… (I’m sorry; it’s awful, I know, but I couldn’t resist).