Create an awesome lifestream with FriendFeed

A lifestream is an aggregation of all your online activities that are spread over multiple sites into a single location. In other words it is a log of your internet exploits. There is no way that you can blog about everything that you find interesting on the internet. So, adding a lifestream to your blog can be a way to tell people more about your interests and what you are up to. This gives people a better idea of who you are. Adding a lifestream page to your blog using FriendFeed is pretty easy.

First, sign up for an account on FriendFeed and add all your favorite services to it. FriendFeed only asks for your usernames for these services; you don’t have have to provide your passwords. The whole process will take only a few minutes, even if you have a dozen services.

Next, add a template file called lifestream.php to your Wordpress theme folder. You can declare the template as follows.

<?php
/*
Template Name: Lifestream
*/
?>

The rest of the template can be exactly like your main index.php file.

Next, go to the Embeddable Widgets page on FriendFeed under the Tools section. Select the Feed Widget and configure it as shown below.

FriendFeed Feed Widget


Copy the HTML and change the number of entries from the default 10 to a large number such as 100 or 500. The HTML should look like so.
<script type="text/javascript" src="http://friendfeed.com/embed/widget/cleverdoll?v=2&amp;num=100&amp;hide_logo=1&amp;hide_subscribe=1&amp;width=500"></script><noscript><a href="http://friendfeed.com/cleverdoll"><img alt="View my FriendFeed" style="border:0;" src="http://friendfeed.com/embed/widget/cleverdoll?v=2&amp;num=10&amp;hide_logo=1&amp;hide_subscribe=1&amp;width=500&amp;format=png"/></a></noscript>

Go back to the lifestream.php template and add the HTML in place of your wordpress loop. That is, replace the following section with the HTML.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endif; ?>

Now create a new empty Wordpress Page and select Lifestream as it’s template. Done! Your lifestream should now appear on this page.

Check out my about page to see my Lifestream in action.

The default Feed Widget has a blue border that may look out of place on your page. I recommend adding the following to your stylesheet to remove it.
.friendfeed.widget {
border: none !important;
}

You can modify the widget further using this FriendFeed CSS guide.
See Robert’s post for further CSS changes for making the widget look more at home with the rest of your theme.

  • email
  • Print
  • PDF
  • Google Bookmarks
  • Twitter
  • del.icio.us
  • Digg
  • StumbleUpon
  • Facebook
  • Tumblr
  • LinkedIn
  • FriendFeed
  • Identi.ca
  • Ping.fm
  • Reddit
Previously
    no matches
  • Thanks for that tutorial :)

    One question: How did you resolve it that the names of the comment autors are in the same line as the comment (if there is space enough)?
  • René, that seems to be the default way the author names are displayed, ie. on the same line as the comments if there is enough space. I have not applied any CSS styling to get it that way.
    If you could give me the link to your lifestream page, I might be able to figure out something from the CSS.
    Thanks for dropping by.
  • Wired :-(

    That would be a great idea. Just jump over here: http://renefischer.ws/blog/lifestream/ But keep in mind, that this page is not public yet. Its still under construction.

    Thanks for your help :-)
  • The CSS for your lifestream shows that the anchor tags are displayed as blocks instead of inline.
    This is because of the inherited declaration from line 162 in your master.css:
    .comments a {
    display: block;
    Applying an inline style to anchor tags inside ff comments should fix it:
    .friendfeed.widget .feed .entry .comment a {
    display: inline;
    }
    Alternately, this style may be applied at the widget level:
    .friendfeed.widget a {
    display: inline;
    }
  • YMMD & you are my hero :-)

    Thanks a lot, that solves is perfectely.
  • Thanks for the link back!
  • Huge thank you for this! I built my own lifestream and it came out gorgeously. Feel free to check it out: http://www.eurotransient.com/stream.
  • Hi Joshi.... guess you will be there for the Heavy Metal bloggers meet... great. This is a reminder and it will be great if you can confirm again by putting a comment on http://www.indiblogger.in/bloggermeet.php?id=24 or mail me at anwin at indiblogger dot in or give me a call at 9880518019. Thanks
blog comments powered by Disqus