Get & Display Latest Tweets (Twitter Status) using Javascript

Post image of Get & Display Latest Tweets (Twitter Status) using Javascript
Posted in Web Development on 18 June 2009 22 comments

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

<ul id="twitter_update_list">
<li>Loading Tweets..</li>
</ul>

2. Javascript that retrieve the statuses

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

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

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:

<ul id="twitter_update_list">
<li>Loading Tweets..</li>
</ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/zenverse.json?callback=twitterCallback2&count=5"></script>

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)

<ul id="twitter_update_list">
<li><span>YOUR STATUS 1</span> <a style="font-size: 85%;" href="LINK TO YOUR STATUS 1">about 4 hours ago</a></li>
<li><span>YOUR STATUS 2</span> <a style="font-size: 85%;" href="LINK TO YOUR STATUS 2">about 8 hours ago</a></li>
</ul>

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

 

Posted by Zen on 18 June 2009 • 29,656 visits 22 comments
Tags : , , ,


or Subscribe to specific category only :




  - 22 Comments


Kawaldip says:

Thanks for sharing the code.. i m going to try it

Mel says:

Thanks. Is there any way I can style the about … hours ago to go underneath the tweet?

zen says:

I think yes, you can download the blogger.js and edit the javascript source. Then change the javascript source URL to your edited one.

len says:

your code is very useful for our final course project.. you are a great help b^^d

Tom says:

Fantastic neat little bit of code, thanks a lot! I needed to remember to put the code in the footer so it didn’t hold up loading the rest of the site.

Rafael says:

Thanks, killer snippet of code that of yours ;-)

rys says:

you can also refer to this site on how to display the latest tweet, using twitter API..

as easy as 1 2 3..

http://www.ryscript.co.cc/web/how-to-display-latest-tweets-using-javascript-and-twitter-api/

thanks

John M. says:

Great (and simple) code! It appears to not work in Chrome though. Has anyone else noticed this? Is there a fix?

tiredcoder says:

THANK YOU!!!
THANK YOU!!!

I have read through around 20 different ways of doing this and this is the first I have got to work. THANK YOU!!

Jimmy says:

Hi, I have try the code, and why it doesn’t work?
Just showing the text “Loading tweet…” and there is no action after that?
Am I have to adding some code to its?
Thanks..

zen says:

did you load the external javascript files? Another possibility is the twitter account you specified is protected (private)

Jimmy says:

Thanks for the solution..
I changed the privacy mode and it’s work! =D

Nice sharing, Zen! ^^

negrelja says:

Why question is in reference to this:
“Replace the “5″ in ….&count=5…. with number of tweet to be displayed”

Any idea as to why I have to double this number to get the desired number of tweets.

e.g. If the number is “10″ I only get 5 tweets. If the number is “5″ I am only getting 2 tweets.

Any help would be much appreciated. Thanks.

zen says:

This is weird, if I put 5, I get 5 tweets. Are you still having the problem now?

Senthilkumar says:

This code only display your tweets not retweets…

Andy says:

Hi

Im also having trouble with the &count=. No matter what number I put in it just shows all tweets?

Thanks

Gustavo says:

Muchas Gracias! Excelente tutorial :)

Craig says:

Hi,

Is it possible to have this code skip the very latest by 3 tweets.?
for example, in two table cells I’d like in the left cell the latest 3 and in the next cell, the three after that.
Would I just need to have the text flow into the next cell somehow?

Thanks

SB says:

tanks with the tweets code its awesome and short

Remco says:

Can you also share a version for the Twitter search API?

Trackbacks

  1. ZenVerse – Get and decorate latest tweets (Twitter Status) using …

Leave a Reply

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Previous Post
«
Next Post
»