Retrieving latest tweets using javascript might not be as sweet as using PHP because visitors might have their javascript turned off. Anyway, who turn javascript off these days? :)

1. Create a container for twitter statuses

Loading Tweets..

2. Javascript that retrieve the statuses

Paste this right after the <ul> in step 1.

IMPORTANT NOTE :
Replace the “zenverse” in …./zenverse.json?call…. with your twitter username
Replace the “5″ in ….&count=5…. with number of tweet to be displayed

So, after step 1 and 2, here’s how my HTML Code looks like:

Loading Tweets..

3. Need some decorations?

Before we know how to style our tweet list, we need to know the structure of the output from the javascript. Well, this is it : (this is how the codes “changed” after the javascript finished loading)

YOUR STATUS 1 about 4 hours ago
YOUR STATUS 2 about 8 hours ago

4. Styling the twitter statuses using CSS

#twitter_update_list {
/* the main container */
}

#twitter_update_list li {
/* wraps a single list */
}

#twitter_update_list li span {
/* wraps the tweet */
}

#twitter_update_list li a {
/* wraps the link to the tweet */
/* by default it have 85% font-size therefore you might want to change it like below */
font-size:100% !important;
font-size:13px !important;
}

Easy huh? That’s it.
Thank you for reading :)