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:

friendfeed-borderAs 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:

friendfeed-no-borderIt 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:

friendfeed-lifestream

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.

8 thoughts on “Use FriendFeed As A Lifestream

  1. Roy

    Nice work on the design and an interesting concept – a mini blog contained within a blog, telling the story of a life outside a blog.

    Reply
  2. Lorenzo

    Hi Justin. I like how you got yours to appear. I can’t get the services’ logos to appear and I just want to see if I’m doing it right. I pasted the code from the friendfeed.com site into my wordpress self hosted site as an html widget and then made the adjustments you said in my CSS file and yet no logos (even when I added the line “.friendfeed .services { margin-top: 10px; } under #friendfeed”) and the hr line appears as a bar. Can you help?

    Reply
    1. Glenn Hilton

      Hi Lorenzo (or Justin) were you able to find out how to add the services logos/icons? I’m having the same problem on my blog. I notice it seems to work for you. Did you have to do an extra step? If not then I think it may be something to do with my theme.

      Reply
      1. Lorenzo

        I was able to get the icons but not with these directions. I googled another set of directions and that made it work. Unfortunately I lost the link, otherwise I’d post it. I just don’t like the formatting of it. I guess if I knew more CSS I could customize it.

        Reply

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>