Peronalised Twitter Status feed on your website

I'm going to run you through how I created the Twitter status feed on mohunky.com home page, go take a look at my homepage to see the final version.

As you can see, a pretty clean and simple design consisting of a bordered wrapper with a background colour and a bit of text styling. If you checked out the live version on my home page you may have also noticed a sneaky animated loading .gif and caption hiding in there as well.

The HTML

First thing, we need to get the basics in place. There's four main elements to my Twitter feed, a <div> wrapper, an <h5> heading, a <ul> that will contain the status' and a <a> 'Follow Me' link. Coded up it looks a little like this:

<div class="TwitterWrapper">
    <h5>Fresh from twitter</h5>
    <ul id="twitter_update_list">
        <p>Waiting on Twitter!<br />
            <img alt="Loading Tweets" src="/media/images/layout/loading.gif" />
        </p>
    </ul>
    <a href="http://twitter.com/mohunky" class="TwitterFeedLink">Follow Me</a>
</div><!-- TwitterWrapper -->

As you can see, the <div> wraps the whole lot, and I've given it a class so I can style it later. The <h5> comes next, you can use any <h> tag, my feed was a lower priority on the page and I'd already styled my headings so <h5> did the job. The 'Follow Me' link sits at the bottom just before I closed the wrapper <div>, I've also given this a class so I can style it later. The <ul> and its contents need a little more detail.

Some of you may be wondering what that <p> and <img> are doing in the middle of an unordered list. Basically the <ul> has two states, a loading state and a live state. The loading state will show while the Javascript and browser are politely asking Twitter for your latest tweets, it also comes in handy if Twitter is having one of its 'over capacity' moments as it'll fill the blank gap. Once Twitter has kindly handed over the tweets everything within the <ul> will be overwritten creating the live state. I've added a caption 'Waiting on Twitter!' and a simple animated loading .gif just to let the user know something is going on.

Lastly, but possibly most important in this section, watch out for the ID on the <ul>, it should be id="twitter_update_list". This is the ID that the Javascript looks for.

Make the HTML your own

That's all good but I'm sure you want to make it your own, there's four elements to change in the HTML to customise it. First up are the heading and paragraph elements, swap 'Fresh from Twitter' to whatever you want your heading to be and  replace the 'waiting on twitter!' to whatever you want your loading caption to be.

Next up is the loading .gif, you can grab mine from here, or head on over to ajaxload.info and create your own custom loader.

Lastly is the 'Follow me' link, you can switch out the text to anything you like, then just replace my username in the link with your own.

    <a href="http://twitter.com/YourUsernameHere" class="TwitterFeedLink">Follow Me</a>

If you preview this now, you'll see the unstyled twitter feed in the loading state, a bit like this:

The Javascript

This is the bit of code that goes and asks Twitter for your status. In the same file that you just added HTML too, scroll to the bottom and add the following code just before the </body>: (It's important to put this at the bottom because if Twitter is having a bad day it can stall the rest of your page loading, if this is at the bottom then everything else should be loaded already.)

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/Mohunky.json?callback=twitterCallback2&amp;count=2"></script>

Personalise the Javascript

There's two things to change in the JS, firstly, look for this bit of code in the middle of the 2nd line:

/user_timeline/Mohunky.json?callback

See where it says Mohunky? replace this with your own Twitter username.

The next part is also on the 2nd line but right at the end:

Callback2&amp;count=2"></script>

Basically that 'count=2' is how you control the number of tweets you pull through from Twitter. I have my last two tweets pulled through, change this number to suit.

Quick regroup

The feed should now look something a little like this: (the live state)

Looks sexy huh?! but at least its now functional. Lets make it look pretty.

The CSS

.TwitterWrapper {   float:left; width:200px; margin:0 0 20px 0; padding:19px; overflow:hidden; border: 1px solid #d6d6d5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #e4e4e4; behavior: url(/media/css/PIE.htc);   }
#twitter_update_list           {   float:left; width:200px; margin:0; padding:0; font: 1.1em 'DejaVuSansBook', Arial, sans-serif;   }
#twitter_update_list li        {   list-style:none; margin:10px 0 10px 0; overflow:hidden;   }
#twitter_update_list span      {   display:block; float:left; padding-bottom:5px; clear:both; line-height:170%;    }
#twitter_update_list span a    {   display:inline; float:none; clear:none; line-height:170%;    }
#twitter_update_list p         {   display:block; width:180px; padding:10px; text-align:center;   }
#twitter_update_list img       {   padding:10px;   }
#twitter_update_list a         {   width:100%; display:block; float:left; text-align:right; clear:both;   }
a.TwitterFeedLink         {   margin-top:10px; font: 1.3em 'KozukaGothicProRegular', Arial, sans-serif; color:#4065af;   }
a.TwitterFeedLink:link    {   text-decoration:none; color:#4065af;   }
a.TwitterFeedLink:visited {   text-decoration:none; color:#4065af;   }
a.TwitterFeedLink:hover   {   text-decoration:none; color:#262626;   }
a.TwitterFeedLink:active  {   text-decoration:none; color:#4065af;   }

You'll want to style the feed to match your own site so this is more of a reference to show the selectors I've used and how I've controlled each element. Lets go into a little more detail into each selector.

.TwitterWrapper {   float:left; width:200px; margin:0 0 20px 0; padding:19px; overflow:hidden; border: 1px solid #d6d6d5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #e4e4e4; behavior: url(/media/css/PIE.htc);   } 

This controls the <div> that wraps the whole lot, so I've used this class to position the feed, add the background colour and the border.

#twitter_update_list           {   float:left; width:200px; margin:0; padding:0; font: 1.1em 'DejaVuSansBook', Arial, sans-serif;   }

This controls the <ul> unordered list, its good to reset the default margin and padding using this selector.

#twitter_update_list li        {   list-style:none; margin:10px 0 10px 0; overflow:hidden;   }

Use this to control each <li> under the <ul> or in English, this controls each tweet in your feed.

#twitter_update_list span      {   display:block; float:left; padding-bottom:5px; clear:both; line-height:170%;    }
#twitter_update_list span a    {   display:inline; float:none; clear:none; line-height:170%;    }

Use these two for extra control over each tweet and any links a tweet may contain.

#twitter_update_list p         {   display:block; width:180px; padding:10px; text-align:center;   }
#twitter_update_list img       {   padding:10px;   }

These two control the loading state <p> and <img>.

#twitter_update_list a         {   width:100%; display:block; float:left; text-align:right; clear:both;   }

This selector controls the time stamp for each tweet.

a.TwitterFeedLink         {   margin-top:10px; font: 1.3em 'KozukaGothicProRegular', Arial, sans-serif; color:#4065af;   }
a.TwitterFeedLink:link    {   text-decoration:none; color:#4065af;   }
a.TwitterFeedLink:visited {   text-decoration:none; color:#4065af;   }
a.TwitterFeedLink:hover   {   text-decoration:none; color:#262626;   }
a.TwitterFeedLink:active  {   text-decoration:none; color:#4065af;   }

And lastly I use this little lot to control the 'Follow Me' link at the bottom of the feed.

Tweet

This post was written by

Rob Mayes

Freelance Designer, into downhill biking, basketball, gaming and cider. Love to learn and fan of general randomness.