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

I recently redesigned my personal website, www.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:

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?

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

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!

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

About the author:

Jon Phillips is the founder and owner of SpyreStudios and the co-founder of MediaLoot. Jon is a designer, developer, typography lover and musician.

Related Entries:

• 7 Ways To Get Traffic To A New Blog
• Now Would You Please Turn This Thing Off?
• Great Examples Of Coming Soon Pages And How To Create Yours
• 24 Great Tips & Tutorials To Get The Most Out Of WordPress
• How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3