Use Friendfeed to create a lifestream page on your blog

July 2, 2009

Update – following the acquisition of Friendfeed, I’m anticipating that their API will either be closed entirely or severely restricted soon. The lifestream page you’ll see now is powered by David Cramer’s Lifestream plugin.

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.

Posted in FriendFeed, blogging, development, wordpress