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:
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&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&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?
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:
[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:
[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&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.
really nice work mate. keep it up
Hi Pavel!, thanks a lot! :)
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.
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).
A really good idea!
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!
I want one I want one!
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.
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 :-)
@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?
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 :)
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!
@Katy: wow, that is awesome! Very elegant and clean design. I’m glad my ‘hub site’ inspired you! :D
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!
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 ;-)
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.
@Ryan: hey that looks awesome! Love the light too!
@Grace: hehe cool, keep me posted :)
@Cringe: sorry about that, I edited the post
excellent post. keep it up.
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 ;)
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
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/
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!
You are some kind of god man!
I love this idea! Bookmarked and I’ll give it a shot over the weekend, I’ll report back in a couple of days :)
Pretty good stuff. I’m going to use this stuff.
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