Use FriendFeed As A Lifestream

If you haven’t noticed, I’ve been doing some cleaning up on my blog over the last week and a half. I’ve removed a few things from my single post pages, as well as made some changes to my sidebar. The main thing I did with the sidebar is integrated a lifestream showing all my updates from various websites and social networks. Here’s how I did it:

1. Decided Which Tool To Use For The Content

There are a few programs out there that will create a lifestream for your blog or website. However, none of them are as easy to use as a simple FriendFeed widget. I actually used the same widget I was using in the past, which looked exactly like this:

As you can see, it’s a bit ugly. The border didn’t match anything else in my sidebar and it looked a little out of place. The major drawback to using the FriendFeed widget it that it doesn’t give you many options for customizing it when you set it up. Luckily they do have some custom CSS settings you can use. Which leads us to the next step.

2. Styled The FriendFeed Widget

The next step was a little tricky since I couldn’t get it to work at first. FriendFeed gives you some CSS codes to use, which can be added to your active WordPress theme stylesheet. I messed around with it for awhile and ended up adding the follow code to my stylesheet:

#friendfeed { border: 0px !important }
.widget { border: 0px !important; font-family: Georgia, "Times New Roman", Times;}
.feed { border: 0px !important; font-family: Georgia, "Times New Roman", Times;}
.body { border: 0px !important }
.logo { border: 0px !important }

As you can see, I went a little overboard with the “border: 0px” but it managed to remove it. I also added the font-family my theme uses so it matches the rest of my site.

Here’s what the finished widget looks like:

It looks a lot better in my opinion. I’m a big fan of no borders because it makes it look a lot cleaner.

3: Added Some Links Below The Widget

As you can see in the picture above, I also added some links below the widget. This was simple html code that I added directly below the widget. For the subscribe link, I simply pointed it to my FriendFeed page since I prefer people going there. You could also make the link go directly to the RSS feed of your FriendFeed.

I also decided to add a “view full lifestream” link, which I’ll talk about in the next step.

4: Created A Lifestream Page

After debating for awhile about whether or not I wanted to have a lifestream page, I decided to go with it. It allows me to list a lot more content for those who want to view it without forcing everyone to see my super long sidebar on every page.

To do this, I simply created a page titled Lifestream. I then embeded the same widget code I used for my sidebar into the page, which looks like this:

<script src="http://friendfeed.com/embed/widget/USERNAME?v=2&amp;num=300
&amp;hide_logo=1&amp;hide_comments_likes=1&amp;hide_subscribe=1" type=
"text/javascript"></script>

(If you want to use the code, make sure to remove the line breaks.)

If you look closely, you’ll notice I set the number (num) to 300. This will set the widget to list 300 of your latest items. However, I have noticed there seems to be a limit on how many items you can list. I’m not even sure if it’s listing all 300 of my latest items or not. Either way, it’s listing a lot more than I am on my sidebar.

Here’s what the finished product looks like:

Of course, the main page lists a lot more stuff. Overall, it looks pretty cool.

All Done!

So that’s everything I did to get my lifestream up and running. It’s fairly simple to implement and makes a good addition to your blog or website. As to how useful it is, we will see. I’m not real sure how many people really use lifestreams but I figured it was worth a shot.

Feel free to leave a comment if you have any questions. I’ll try and help you out.

Published on July 9th, 2009. And don't forget to check out my book, Life After the Cubicle.