Line25

How to Create a Lifestream of Your Online Activities

Read the full post

A lifestream is a simple website that compiles your online activity in real time and displays it in chronological order. These days all the cool kids have personal lifestream sites, so let’s take a look at creating our own website that pulls in a range of RSS feeds through SimplePie and displays them together in a cool design.

Personal Lifestream

View a demo

The majority of tech or web folks will be involved with a range of social websites, such as StumbleUpon, Digg, Last.FM and Twitter, not to mention their own blogs and website feeds.
The personal lifestream makes use of the RSS feeds available from all of these services and combines them to create a novelty site that allows anyone to follow their latest online activity.
Here’s an example of the site we’ll be creating, it’s a simple one page design with subtle texture in the background. The main heading is main up of a name, and individual entries are automatically added to the stack whenever a new activity is conducted. Each post has a time and date stamp, as well as the title or message relating to the entry. Finally each entry has a link to the source of the entry, whether it’s a Delicious bookmark or other social profile.

Producing the Visual Concept


Start work by opening up Adobe Photoshop, the first job will be fleshing out the visual concept of the site. Create a document at 1280×1024 pixels and 72dpi in the RGB color mode.


Fill the background with a light grey, then go to Filter > Noise > Add Noise. Enter a small amount such as 1.4% to give a very subtle textured effect.


Open up a concrete or metal texture and place it onto the document. Desaturate the design and blend out the edges using a Layer Mask and rough Photoshop Brushes.


Type out your name in your favourite font, here I’ve used the Rockwell typeface and adjusted the tracking to give really tight wording. The slab-serif font really helps emphasise the robust and heavy theme we’re aiming for with the texture.


Align the text to the center of the document, use guides to highlight the main content area. Change the blending mode of the text to Soft Light and duplicate to bring the texture of the background through into the text for a real roughed up style.


Lay out the panels that hold each lifestream entry with semi-transparent backgrounds.


Mock up the textual content in Photoshop, flesh out the ideas for the size and colours of each element, giving prominence to the more important elements.


Continue fleshing out the visuals for each lifestream entry, tweak the sizes and colours for each element until you’re happy with the layout and appearance.


The visual concept can then be finished off with some generic content, take a step back and review the design.

Coding up the Design into XHTML/CSS


Once the design is ready to go, export all the images ready for inclusion in the code. Draw a selection around the large background texture and Save for Web with suitable compression to balance between image quality and file size.


Being a simple design, only a few image elements are required, a selection of the repeating background texture, small swatches of black and white transparency and the main heading will all need saving. The title and colour swatches in particular will require the PNG-24 file type to allow for their transparency properties to be maintained.


The original SimplePie package can be downloaded from SimplePie.org, but also check out the fantastic screencast from CSS-Tricks – Adding RSS Content with SimplePie. Chris Coyier talks us through the details of adding the SimplePie code as well as offering a prebuilt example that can be downloaded.


Set up an index.php file with Doctype and basic structure, choose a suitable title and descrption for the page.


With reference to the layout of the concept, write out the HTML structure of the page. Choose the most natural elements to represent the page objects, for example the collection of lifestream entries would be well suited to being created as a HTML list, while the titles of each would be H2 tags after the main page title is set in a H1.


Set up a separate CSS file with a simple reset to remove the browser defaults from each element. Begin styling up the site with font style and colours. The background textures can be added as a repeating image to the BODY, and as a static image attached to an additional DIV named page-wrap.
The H1 tag can then be styled using the CSS image replacement technique so that the title image is displayed in its place.


So far we have the page background and main title styled, as well as the content centred on the page in a container. Next, let’s continue styling up the lifestream list and content.


Add CSS styling to the list items and subsequent elements to bring them into line with the original concept. Take measurements from the concept and use them in the code along with rules such as float and margin to recreate the visual effects through the browser.
The font styling can also be added to give the text the grey appearance in place of the default blue link colour.


We’re getting there! Now the coded site is beginning to look like the visual concept, the text is in place and styled correctly. Next let’s look at the code used to finish up the source text.


With some CSS trickery the entry source box can be positioned to the bottom of the panel, using a negative margin helps pull the element into position.


Now the XHTML and CSS is in place, we can strip out that dummy content in order for SimplePie to automatically bring in the lifestream entries.

Adding the SimplePie Functionality


Add the SimplePie PHP code to the top of your document and enter your feed details in the array. Other options such as the caching time and number of items to be displayed can also be tweaked.


With the main SimplePie code in place, the individual snippets can be added to the content to output specific elements. Surrounding the LIs is a foreach statement that tells the site to ‘do the following for each of the list items’. Therefore adding a new list item per RSS entry.
Information such as the time, title and permalink are all added to their specific places in the code.

Personal Lifestream
The finished site can them be uploaded and tested, all the feeds entered in the array will be rendered in time order, each one displaying entry time, the title and date of the activity as well as the favicon of the source website.
This makes the personal lifestream complete, simply set it free to self-update whenever you bookmark a link, share a tweet or listen to a new song!

View a demo

Download the files

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

84 Comments

  1. Gordymac says:

    Chris this is awesome! I can’t wait to implement this myself. Thanks for showing us this handy trick!

  2. Awesome stuff Chris! I’m really intrigued by SimplePie for a bunch of reasons, but can’t seem to get it to work in any of my WordPress themes and I have trouble with getting the SimplePie WordPress plugin installed. Any advice?

    • What kind of trouble are you having with the SimplePie WordPress plugin?

      I’m afraid I’m personally not too hot with the technical side of SimplePie either, but thankfully there’s some ready made examples and demos on the SimplePie.org website for general usage.

      • Actually, the SimplePie plugin itself activates fine, but then when I go to activate the SimplePie Core Plugin, I get
        “Error 500 – Internal server error
        An internal server error has occured!
        Please try again later.”
        But that’s been the error for weeks, so I’m assuming by “later” they mean never.

  3. Jonny Haynes says:

    Hi Chris, great article. Have you seen Sweetcron?

    Its more for a site dedicated to a lifestream rather than an added section on your site.

    Your mate has a tutorial for it! http://css-tricks.com/lifestream-website-with-sweetcron/

    I’m thinking of mnoving off of WordPress onto it!

  4. Gaya says:

    Nice tutorial!
    I prefer using SimpleXML though. SimplePie works great too, been playing around with it in WordPress.

  5. martin says:

    Easy way for lifestreams is soup.io. But this tutorial is better, thanks!

  6. Stellar tutorial, Chris! I’ve never used lifestreaming code before, but it looks interesting.

  7. GZstudio says:

    This is superb :)
    look interesting… think I should give it a try

  8. i’m gonna try something like this when I have the time!

  9. The Producer says:

    Thanks for the great tutorial! I am going to have to try this out!

  10. Dennis says:

    Hi Chris,

    Great work men !

    How did you implemented twitter, did you use a api? because my wont work i think there is a problem with the authentication?

  11. Silas says:

    Wow, Amazing tutorial, can’t wait to try it out.

  12. David Perel says:

    I like your tabbing in CSS. Very neat and the first person I have seen do it.

  13. Art says:

    Thank u awesome and lengthy tutorial :)

  14. Marco says:

    Very nice article! I did a similar thing a while ago but used Yahoo! Pipes to create an aggregate feed with all my stuff and some PHP code of my own. I added pagination too.

    End result:

    http://www.i-marco.nl/stalker/

  15. tim says:

    Fantastic article.

  16. Idemium says:

    Thanks, this is very helpfull. Maybe you can convert it in a wordpress plugin. ;)

  17. Preston Lee says:

    So good, Chris. Thanks! I have been wondering about something like this for a while now ut haven’t had much time to dive into it. Thanks so much for making my life easier. Nice post.

  18. Stijn says:

    fantastic, was looking for this solution a long time!

  19. Igor says:

    I think it’s awesome!
    Thanks!

  20. Good job. Thanks for excellent tutorial

  21. Eric says:

    Nice work. I would like to get going on a lifestream for my own site. perhaps in a sidebar or a footer would work.

  22. Stephen says:

    Thanks for the tut. I’m fairly new at this and your tutorial was really helpful. I started with pretty much exactly yours and I’ve started adding/removing/changing bits. Next up’s the background and colors. No-one likes a straight copy :-)

  23. T-Law says:

    Really great tutorial and fantastic result. Thanks Chris

  24. Technogati says:

    Really good tips.

  25. Jan says:

    Thank you, Chris! This is very helpful!

  26. really i love this article
    thanks mr. spooner

  27. Bas Roding says:

    Great tutorial. As always you’re a great inspiration Chris.

  28. You’re doing an excellent job with these posts! I’m excited.

    Best regards!

  29. Matthew says:

    I was finally able to get this to work, and I’m looking forward to customizing it so it isn’t a complete copy of your design. ;)

    Thanks so much for the great tutorial – but I was curious if there was a simple fix for icons that don’t show up on IE? last.fm, stumbleupon, etc?

    Thanks again.

  30. Dean says:

    This is all fantastic. I have worked with simple pie on something similar a couple of times (although never through to completion). Are you aware of any way to store the entries in a database, and then paginate the results for posterity? I guess that would mean creating essentially a CMS just for this though

  31. Oridusartic says:

    After reading the tutorial, I think it looks quite easy. I think I should try to make one too. Thanks for the helpful tutorial. =)

  32. tasarhane says:

    rally nice tutorial.. thanks.

  33. WinGer says:

    Hi, I have tried to implement all this code and seems to work fine, the RSS I’ve added worked but at the top of the web it shows
    Warning: cache/8daa719c286fdcd4064a2b89315f614a.spc is not writeable in /home/jocpw33m/public_html/blog/Lifestream/simplepie.inc on line 1769

    Could you help me?

  34. Ivy says:

    Awesome tutorial. It’s very clear. Thanks!

  35. I’ve been doing this on my personal site for a while. I use a combination of Wordress, The P2 Theme, and Ping.fm that posts to a WP plugin’s custom URL. It’s great because I don’t spam up my blog with my Twitter conversations (the lifestream is inline with blog posts).

  36. Vikas SN says:

    Wow! Amazing Tutorial Chris. I can’t wait to implement this on my personal blog.

  37. WoW, thank you very much for this tutorial, I need soemthing like this… You ROCK Chris!

  38. Bethan Evans says:

    Great tutorial! Thanks!

  39. Julio Menendez says:

    Really good tutorial. I’m already thinking in the design for mine.

  40. Perfect! Just a tip, you can change

    $feed = $item->get_feed(); echo $feed->get_permalink();

    to

    $item->get_feed()->get_permalink();

    ;)

  41. Siddharth Ashok says:

    Awesome, Thank you!

  42. Nuno Andrade says:

    I love you Chris. As much as a man is allowed to love another man that is not related to him.

    And Winger, I had the same error when I uploaded so I just removed lines 1766 to 1771 from simplepie.inc.

  43. Motyar says:

    Hi
    can we do this with js?
    please reply.

  44. hey Chris, great tut! I had a quick question about the favicon. Can this image be replaced with my own “custom” image? This will also solve the problem with SimplePie not being able to pick up every favicon… thanks.

Sorry, comments are now closed