How-To Create A Life-Stream & Social Media Hub

NOTE: This post was written in 2008 and I’ve since changed the design (and domain name) of my personal site – this tutorial is still quite relevant though, and I invite you to use it to create your own life streaming site. You can still check out my lifestream/social media hub (I put it on a sub-domain on my personal site). Cheers!

I recently redesigned my personal website, jonphillips.ca, and I thought it’d be nice to write a little something about it. I’m really used to designing blogs using WordPress and sometimes other CMS, but this time I wanted something really different. Something that would be easy to update and not be too time-consuming.

What I did was to create sorta like a personal social media hub and life-streaming site. I’m very active on sites like StumbleUpon, Digg, Del.Icio.Us and Twitter, so I thought I’d turn my personal site (which was once a frequently updated blog) into something interesting. It is, of course, an experiment. :)

The Idea Behind The Site + The Design

It took me a little less than a day to come up with the design (mock-up in Fireworks), slice it, code it and validate everything. My goal was to create a minimalist 1 page design that would display my latest social media activity and tweets.

Here it is:

Jon Phillips - Streaming

If you check out the live site (subdomain here on SpyreStudios) you’ll see I got 4 boxes on the left that display my recent social media activity and a right sidebar with my Flickr pictures. In the left column I put Twitter first because I update several times a day, then you got my recent Digg submissions, my Del.Icio.Us bookmarks and the 4th box is my StumbleUpon feed.

The Code

First of all, the site still runs on WordPress, and it’s CSS and HTML valid (except for the lightbox plugin which I gotta fix, but apart from that it’s all good).

I won’t write an in depth tutorial on how I coded it, it’s just basic CSS and HTML + the WordPress part! But you may be wondering why I decided to run WordPress since it’s just a 1 page site… 3 reasons:

  • I want to eventually add a sideblog – with WordPress already installed and working it’ll be super easy
  • I used some WordPress plugins – why not use WordPress plugins since I’m gonna use WP anyway for the sideblog? :)
  • WordPress makes updating so freakin’ easy and fast – say I want to add another social media site to the list, no need to FTP or anything… Just login to WP and add some code.

Adding The Content

Twitter Code

When you go to your Twitter homepage, you’ll notice in the right sidebar there’s a link that says ‘Put your updates on your site‘, click that link! Then you’ll have 4 options, you can grab the code to display your tweets on your myspace page, blogger blog, facebook profile or ‘other‘. Chose the ‘other‘ option, and then on the next page you’ll be able to decide whether you want the default Twitter badge, the ‘nicer looking‘ one with avatars, or just plain html/javascript. You want the html/javascript one! Then select the number of tweets you want display (that can be changed later) and then select ‘no title‘. Then copy that code.

It should look something like this:

<div id="twitter_div"><ul id="twitter_update_list"></ul></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/jophillips.json?callback=twitterCallback2&amp;count=8"></script>

Paste that code where you want it on your page. In my case that was inside a div called ‘boxcontent‘. And voila! Of course you have to style the unordered list and list items so it looks nice. But that’s for another post! :)

So, now you should have your latest tweets, and you can style them the way you like.

The only thing I noticed is that the Twitter code doesn’t validate because of an empty ul tag, here’s how I fixed it:

<div id="twitter_div"><ul id="twitter_update_list"><li>Twitter Updates</li></ul></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/jophillips.json?callback=twitterCallback2&amp;count=8"></script>

As you can see in the code above I added the ‘Twitter Updates’ part inside a list (li). When the page loads you’ll see ‘Twitter Updates‘, but once it’s done loading it’ll be replaced with your tweets, so I guess that’s fine. :)

Oh and you’ll also notice on my site I added Twitter, Digg, Del.Icio.Us and StumbleUpon icons, and linked them to my profiles on each site so people can ‘friend me‘ and check out my profiles.

Now The Social Sites

Now for the 3 social media/networking sites I used the ‘boxcontent‘ div again and simply pasted some code inside each one.

I used the WP-RSSImport plugin (note that their site is in German, but still it’s very straight forward: download, unzip, upload to wp-content/plugins, activate, and you’re ready to go). You can download it from the WordPress plugin directory too!

This plugin allows you to display RSS feeds on your blog, here’s the code for Digg and StumbleUpon:

Digg:

< ?php RSSImport(10, "http://digg.com/users/jophillips/history/submissions.rss", false, false); ?>

StumbleUpon:

< ?php RSSImport(10, "http://feeds.feedburner.com/JonPhillipsStumbleuponBlog", false, false); ?>

I added my SU feed to my feedburner account so I can keep track of how many subscribers I have. Would you believe that 38 people are subscribed to my StumbleUpon feed?

The code is formatted like this:

(# of items, “url of the RSS feed”, show excerpt, cut the title to 30 characters)

I set the last 2 to ‘false‘ cause I don’t want the excerpts and I want the full titles.

So I wrapped the code inside a boxcontent div, and it looks something like this:

StumbleUpon:

<div class="boxcontent">
< ?php RSSImport(10, "http://feeds.feedburner.com/JonPhillipsStumbleuponBlog", false, false); ?>
</div>

Digg:

<div class="boxcontent">
< ?php RSSImport(10, "http://digg.com/users/jophillips/history/submissions.rss", false, false); ?>
</div>

Now, where do you find your Digg and StumbleUpon RSS feed URLs?

StumbleUpon: Go to your SU profile, and look in your address bar, you should see a RSS button, click on it and select ‘reviews and blogs‘ or ‘favorites‘. Easy heh?

Stumble Upon RSS Feed

Digg: Go to your profile, click the ‘history’ tab, and then click on ‘submissions’ in the menu on the right. Then you’ll see a drop-down menu called ‘all sections’, right next to it there should be an RSS icon, grab that URL and voila! :)

Digg RSS Feed

Adding The Del.Icio.Us Code

This part was also pretty easy! Login to your Del.Icio.Us account, then right next to your name around the top right corner click on ‘settings’, then in the ‘blogging’ section click on the ‘link rolls’ link. Then you’ll have a couple options:

  • show # of items – I set that to 10 but it can be changed later
  • remove the title
  • uncheck the ‘show tags’ and ‘show notes’ checkboxes if they’re not already
  • icon: none
  • bullets: none
  • sort: chronologically
  • only these tags – write nothing there unless you want to display links from certain categories/tags
  • show your del.icio.us username: nope!
  • show ‘add me to your network’ link: no thanks!

Then grab the javascript code at the top, copy paste that inside the div you previously created (i.e.: my ‘boxcontent‘ div)

You should have something like this:

<div class="boxcontent">
<script type="text/javascript" src="http://feeds.delicious.com/v2/js/jon.phillips?count=10&sort=date"></script>
</div>

See the ‘count=10’ part? That’s where you can change the number of links displayed.

Flickr Stuff

It doesn’t get any easier than this! The FlickrRSS plugin does all the work. You can download it from Eightface. It’s really a nice plugin!

Once you activate it just follow the instructions, and add the code to your site, style everything and voila! :)

Summary

Here are the codes again:

Twitter

<div class="boxcontent">
<div id="twitter_div"><ul id="twitter_update_list"><li>Twitter Updates</li></ul></div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/jophillips.json?callback=twitterCallback2&amp;count=8"></script>
</div>>

Digg

<div class="boxcontent">
< ?php RSSImport(10, "http://digg.com/users/jophillips/history/submissions.rss", false, false); ?>
</div>

StumbleUpon

<div class="boxcontent">
< ?php RSSImport(10, "http://feeds.feedburner.com/JonPhillipsStumbleuponBlog", false, false); ?>
</div>

Del.Icio.Us

<div class="boxcontent">
<script type="text/javascript" src="http://del.icio.us/feeds/js/jon.phillips/?count=10"></script>
<noscript><a href="http://del.icio.us/jon.phillips/">my del.icio.us</a></noscript>
</div>

As I said at the begining of this post, it takes some knowledge of CSS and HTML to get a nice result, but the key is to experiment. You could, for example, create more sections and display the latest headlines from your favorite blogs. Sorta like a personal feed reader.

I hope you found this post useful! :)
Please share your thoughts in the comment section below!

Crowd-funded gadgets, tech, games and other awesome Kickstarter products at the Forevergeek Kickstarter Store

Comments

  1. says

    Wow, really, your new Site is stunning. I love the idea of using your social media links as the main content it just works so well. I love the typography at the top and the colours are amazing. Very impressive work, best of luck.

  2. says

    Nice one Jon, I’ve been looking into this a lot myself recently. Check out my homepage for an absolutely pathetic version of what you’ve got going (mind my stupid Javascript only works in FF and the latest Opera).

  3. says

    This is PERFECT for what I was hoping to do. I really don’t need the coding as I know most of it, but it was great to see a working example of what I really want to do with patdryburgh.net.

    Congrats and good luck with the experiment. I’ll try to remember to come back and let you know what I come up with on my own!

  4. says

    You might use the built in native WordPress RSS functions file, this way you don’t need any plugin or js script.
    WP can handle all itself.

    For further info, just click my name, article link.

  5. says

    @liam: Thanks a ton! Happy you like it :)

    @Barney: Hey thanks! I actually like the ‘more/less’ links you got on your site, that’s pretty cool!

    @Pat: Awesome, lemme know for sure! I’d love to see what you come up with! :)

    @Zasta: hehe, I know! ;)

    @milo: Thanks for the infos, I completely forgot I could do that (did it before on another site), I’ll make some changes to my site soon. Cheers!

    @Grace: Hey Grace, thanks a bunch! Yeah I really had no idea what to do with my jonphillips.ca site.. I blogged on this domain for almost 2 years (well not exactly… 1 post every 3-4 months lol), and thought I’d do something that would update itself automatically. By the way, howz the Postscript5 redesign going?

  6. says

    Quick update: I added lightbox for the Flickr pics. So now they open in lightbox instead of going directly to the Flickr page. Looks cool too :)

  7. says

    Thank you for the tutorial Jon! I was envious and inspired when I saw your site. And thanks to you, I have put together Katy In Las Vegas (linked to my name).

    Fabulous site you created and I’ll be linking both in an upcoming post on I’m Blogging That!

  8. says

    I have kinda done the same thing but combined my flickr feed and twitter feed into one. I send updates from my iphone to flickr than post to twitter simultaneously and combine them on my site. A live blogging platform per say…You can see it here: http://www.parrfolio.com/

    I was proud of myself. :) I really like what you have done. This is great!

  9. Cringe says

    Great idea, I’m trying this out myself now.
    PS: please correct where you post the note that the site is in Dutch…. It’s German, we are a proud nation.

  10. says

    Awesome! Been meaning to tweak my personal site like this. Thanks to your post I’ve got to now get my ass in gear and sort it out.

    Nice design and layout of both your lifestream page and your site ;)
    Got here through stunningcss.com

  11. says

    I loved this so much i thought id give it a try..

    only a few issues so far,,
    Digg feed would crash after i removed my tags even thought the feed produceds its own ul and li
    this would cause php errors.. saying it cant find the file etc..but when i put the tags back in would be fine so the code would read

    feed
    feed

    not sure about that one..

    but feel free to have a look

    http://www.martin-gardner.co.uk/more-of-me/

  12. says

    Thanks for all the great comments guyz! :)

    @marty: I’m not sure exactly why it does that for you. You’re using the WP-RSSImport plugin? If so it should work pretty much right out of the box with the code I have in this post. You could always use the unstyled Digg widget thing (http://digg.com/add-digg) though. But if you use the WP-RSSImport plugin it should work the same as SU, DelIcioUs or basically any other RSS feed. Hope that helps!

  13. says

    We just built one for a local hockey team…www.ottawa67shub.com

    Its perfect for fans as they can now access all the teams sm content from one site

    Anyways, wanted to give you kudos for thinking of this over a year and half ago!

    Cheers

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *