How to Display Your Last Tweet using Javascript and the Twitter API

The other day I was working on a small project of mine, and it doesn't use a content management system such as wordpress or joomla. Its just all html and css to style the pages. So i wanted to display my last tweet from twitter, and jazz it up using css. Now when people usually want to display their last tweet, and are running wordpress, they usually just install a plugin to do it for them.

Now remember my site is only html and css. So i looked into the Twitter API, and found a way you can display your last tweet using the twitterCallback javascript function. I have summed it up in a few easy to follow steps. And its hardly any code at all! (icon by dryicons)

Step 1:

First, decide where about on your page you want your last tweet to display. Then paste in this line of HTML.

Step 2:

Next you need to put these 2 lines of JavaScript below the code in step 1. On the 2nd line of code where it says 12345.json, you need to replace 12345 with your twitter username. So mine would be Andy92.json.

Now you will have a plain text version of your last tweet being displayed. So simple! Continue reading below to find out how to style your little twitter widget using CSS, and even customize it by playing around with some of the Twitter API Parameters.

(optional styling)

Of course all webdesigners should perform some sort of styling to their last tweet, to jazz it up a little. At the moment your last tweet is displayed as a bullet list. To remove this and make it pure plain text, put this in your CSS Stylesheet.

#twitter_update_list li {
list-style-type: none;
}

Then, you can change the colour of the main tweet text. If I wanted to make the text orange and then background black, i would put…

#twitter_update_list span {
color: #FFCC00;
background: #000000;
}

Then you can style the links within your last tweet, and style when happens when you hover over them. An example would be the following.

#twitter_update_list span a {
display: inline;
color: #000000;
}
#twitter_update_list span a:hover {
text-decoration: underline;
color: #666666;
}

I have styled mine using CSS, and come out with something that looks like this…

How to Display Your Last Tweet using Javascript and the Twitter API

You can play around with the css, and what you want your widget to look like.

(optional customization)

Twitters API is very big. You can play around with many of the different settings for the twitterCallback function. You can view the api documentation over at this link.

http://apiwiki.twitter.com/Twitter-REST-API-Method%3A-statuses-user_timeline

Enjoy!

Tran February 07, 2012 says:

Complain to this comment

Been looking for a simple, straight forward example of how to call JSON.. and here it it.. thanks alot! Excellent post!

Camilo January 18, 2012 says:

Have been this exact post before.... don't know who is stealing content, that's a shame.

roxettecassette November 22, 2011 says:

Thanks, this is great!

One thing though- although i can style the links with css as you've specified, the time stamp text is still blue... how do i style this with css?

your help is really appreciated, thankyou 8-)

Neville July 04, 2011 says:

Why doesn't this show re-tweets?
Does anybody know how to get them to display too?

Alex May 06, 2011 says:

Is there any way to show your last tweets in a single line, one after another (not in a list)?!

Blackout April 29, 2011 says:

Seen this on another site. Who is stealing content... I don't know. But it's not good.

Mik April 14, 2011 says:

Hi, how could I change the font? Thanks!

Tayyab August 09, 2011 says:

Which font and for what....?

LuisP March 19, 2011 says:

Oh thanks so much for this!

kyle March 17, 2011 says:

how do i get rid of the time stamp?

philipp hogg March 22, 2011 says:

the time stamp is in an a tag outside the span so you can format it with #twitter_update_list a
if you want to hide it you have to format it like this

#twitter_update_list a {
display: none;
}

kyle March 23, 2011 says:

thanks for the help, where do I input that code?

Neville May 27, 2011 says:

#twitter_update_list a {
display: none;
}

This removes the anchors not the date, is the date in a seperate class?

sharon actor December 28, 2010 says:

its cos there's a typo - there should be no semi colon before the &count=1

json?callback=twitterCallback2&count=1

Saira September 02, 2010 says:

How to get all your twitter tweets on your web page using using HTML and Javascript. Please help me as soon as possible. I have to submit the assignment within 2 days...

Kiki June 01, 2010 says:

Hi!

Is it possible to add a hash-tag to the request as filter? For example I want to see the last 10 tweets with #Test?

Keri May 22, 2010 says:

Thank you so much! This is so tiny and perfect =)

Glenn March 29, 2010 says:

Try this at the end of the second string:

callback=twitterCallback2&count=3">

Sinko March 06, 2010 says:

Hello,

For some reason I get more or less my last 20 tweets? How do I get to see only one?

dennis February 21, 2011 says:

as someone already replied above, lose the semicolon before the &count=1...