SpyreStudios

Web-Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

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

May 29, 2008 by Jon 43 Comments

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:

[html]
<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>
[/html]

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:

[html]
<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>
[/html]

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:

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

StumbleUpon:

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

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:

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

Digg:

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

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:

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

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

[html]
<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>>
[/html]

Digg

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

StumbleUpon

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

Del.Icio.Us

[html]
<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>
[/html]

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

Author: Jon

http://www.24alta.ru
Online roulette Canada.

Filed Under: Design, Tutorial

Comments

  1. pavel says

    May 29, 2008 at 1:14 am

    really nice work mate. keep it up

  2. Jon Phillips says

    May 29, 2008 at 1:15 am

    Hi Pavel!, thanks a lot! :)

  3. liam says

    May 29, 2008 at 1:21 am

    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.

  4. Barney says

    May 29, 2008 at 5:38 am

    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).

  5. Rémian says

    May 29, 2008 at 7:49 am

    A really good idea!

  6. Pat says

    May 29, 2008 at 8:01 am

    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!

  7. Zasta says

    May 29, 2008 at 9:25 am

    I want one I want one!

  8. milo says

    May 29, 2008 at 10:06 am

    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.

  9. Grace Smith | Postscript5 says

    May 30, 2008 at 2:04 am

    Jon fantastic tutorial! I have had my domain http://www.gracesmith.co.uk for a year or so now and really didnt know what to do with it, as i really just bought it so no one else could! This is something i am definitely going to implement on it, cheers :-)

  10. Jon Phillips says

    May 31, 2008 at 12:47 pm

    @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?

  11. Jon Phillips says

    May 31, 2008 at 2:19 pm

    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 :)

  12. Katy Castro says

    June 3, 2008 at 12:16 pm

    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!

  13. Jon Phillips says

    June 3, 2008 at 1:28 pm

    @Katy: wow, that is awesome! Very elegant and clean design. I’m glad my ‘hub site’ inspired you! :D

  14. Ryan Parr says

    June 5, 2008 at 8:29 am

    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!

  15. Grace Smith | Postscript5 says

    June 8, 2008 at 3:34 am

    Hey Jon, its going well, i am about to start building it. I can’t give a launch date but im hoping to have it built within the next few weeks, time permitting ;-)

  16. Cringe says

    July 12, 2008 at 8:28 pm

    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.

  17. Jon Phillips says

    July 13, 2008 at 12:19 pm

    @Ryan: hey that looks awesome! Love the light too!

    @Grace: hehe cool, keep me posted :)

    @Cringe: sorry about that, I edited the post

  18. tom says

    August 12, 2008 at 6:36 am

    excellent post. keep it up.

  19. Lostkore says

    September 12, 2008 at 10:28 am

    Great idea! Lifestream is now appearing in a huge variety of weblogs.
    I wrote a while ago a tutorial on how to get and use the last.fm feeds to display them in your blog/website. So it would it could be another addition to your lifestream collection ;)

  20. Curvball says

    October 9, 2008 at 8:11 am

    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

  21. marty says

    October 13, 2008 at 2:50 am

    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/

  22. Jon Phillips says

    October 13, 2008 at 11:40 am

    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!

  23. Tomas says

    October 22, 2008 at 1:48 pm

    You are some kind of god man!

  24. Matt Sawyer says

    October 24, 2008 at 2:05 pm

    I love this idea! Bookmarked and I’ll give it a shot over the weekend, I’ll report back in a couple of days :)

  25. Roppa says

    December 7, 2009 at 4:57 am

    Pretty good stuff. I’m going to use this stuff.

  26. Craig Hiscoe says

    January 29, 2010 at 10:08 am

    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

Leave a Reply Cancel reply

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

Please prove you're human *

Search SpyreStudios

Web Design Jobs

Development & Programming Jobs

Graphic Design Jobs

Computer & IT Jobs

UX Design Jobs

LiquidWeb

Level up professionally!

Coursera - Hundreds of Specializations and courses in business, computer science, data science, and more

Envato

SpyreStudios © 2021