How To Display Your Last Tweet Using Javascript And The Twitter API
Posted on 12. Jun, 2009 by Web Design in Programming
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.
[html]<div id="twitter_update_list">
</div>[/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.
[js]<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
</script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/12345.json?callback=twitterCallback2&count=1">
</script>[/js]
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.
[css]#twitter_update_list li {
list-style-type: none;
}[/css]
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…
[css]#twitter_update_list span {
color: #FFCC00;
background: #000000;
}[/css]
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.
[css]#twitter_update_list span a {
display: inline;
color: #000000;
}
#twitter_update_list span a:hover {
text-decoration: underline;
color: #666666;
}[/css]
I have styled mine using CSS, and come out with something that looks like this…
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!
Loading ...
MateToth
12. Jun, 2009
This is what i was looking for.
Thanks a lot, it was a really useful post.
An other useful elemnt of the code is “count=x”
Write the number of the tweets you want to display.
Carter Cole
26. Jan, 2010
i made some javascript code so you can embed other peoples tweets when they are cool or important for news stories directly into posts and websites
elvi
17. Jun, 2009
i tried doing what you posted there but it gives me a list of clickables that says something like “about 11 hours ago” and so on.
it doesn’t even show me my latest tweet.
Andy
17. Jun, 2009
Hmm, have you tried styling it via css? It might be hiding the last tweet.
Have you got a link you can post to show me?
Nick
20. Jun, 2009
Hi, I was wondering how you can make it show the date and time… I haven’t really tried it yet but I’m in the process of setting up.
Andy
23. Jun, 2009
Have you styled it with any css at all?
Jeff
23. Jun, 2009
Do have any ideas how to replace in-tweet links with an image such as an arrow and hide the actual link?
Andy
24. Jun, 2009
You could try something like this…
#twitter_update_list span a {
display: inline;
font-size: 0px;
width: 16px;
height: 16px;
background: url(/images/arrow.png) no-repeat;
}
#twitter_update_list span a:hover {
text-decoration: none;
}
This would hopefully display a 16 x 16 pixel image instead of links.
Dude
25. Jun, 2009
Hi! Cool post, but I´m kind of confused… I don´t see the “12345.json” in the second line of the code, what do you mean by replacing that? Cheers!
Andy
25. Jun, 2009
Hey, Its in the 3rd line of code…
src=”http://twitter.com/statuses/user_timeline/12345.json?
And you replase 12345 with your twitter username.
Niki
27. Jun, 2009
i have tried this but for nothing is displaying
Niki
27. Jun, 2009
now it shows the tweets but not the latest it shows all the tweet
Andy
27. Jun, 2009
Put this…
&count=1
At the end of your query. Like…
username.json?callback=twitterCallback2&count=1
Nick
30. Jun, 2009
I like the simplicity of the snippet they provide, but I’ve noticed that probably 85% of the time, nothing actually gets loaded. I’m not sure if it’s hitting an API call limit (only up to 100/hr) but that seems unlikely since I’m just testing it in a dev environment (I don’t get that much traffic anyway hehe).
I’ve since used a jQuery based plugin that does a scrape using search.twitter.com. Maybe not ideal, but at least it works.
Anyone else have the same issues with the Twitter provided snippet?
terry
02. Jul, 2009
I get asked for a username password when i test it. Anybody else have this problem?
sriganesh
03. Jul, 2009
ahh. thank you, i will try it. thank you, I WAS LOOKING FOR THIS, TO ADD CUSTOM TWITTER UPDATES.
Jacob
07. Jul, 2009
This works great for me. Only problem I have is it’s displaying all my tweets from my twitter account. How do I only display a set amount? is it the count?
Andy
07. Jul, 2009
Put this…
&count=1
At the end of your query. Like…
username.json?callback=twitterCallback2&count=1
Jacob
07. Jul, 2009
Yep, tried that.
.json?callback=twitterCallback2&count=1
When you take out the ; before the count it no longer displays anything.
Catalin
08. Jul, 2009
Hey thank you for this but a question: how can I minimize the number of tweets because I used count=1 and I get last 20 tweets?
Catalin
08. Jul, 2009
Had to remove the “;” from your initial code line: twitterCallback2&;count=1\
Working fine now
dinsky
09. Jul, 2009
Thanks for providing this, but I can’t get it to display anything at all.
Here’s a link the the page I’m trying to get it to work on. It’s at the bottom of the page in the footer: http://www.viddyworks.ca/v2/index.html
Andy
09. Jul, 2009
Have you put your username in the line of code?
Myfacefriends
10. Jul, 2009
nice tutorial thanks
kees
10. Jul, 2009
Awesome tutorial!,,,,,i have my user name in the script and i have the whole css but it doesn’t work…..i have tried it on a div and on a image but i doesn’t work..? any idea?….something wrong with the API?
Thanks in advance
Kwamepocho
11. Jul, 2009
Worked ok for me…I was having problems until I clicked to view source code icon and recopied the javascript links. Didnt have any issues again…
kees
11. Jul, 2009
It works now!
ote tatsuya
24. Jul, 2009
great tutorial…I’m a newbie on CSS..How can I put a picture like you have done..beside the status’s text..thank you
Sean
29. Jul, 2009
I’ve tried this but it doesn’t seem to be showing any tweets. help?
Keiron Lowe
29. Jul, 2009
Hi, How would I get it to show the users avatar?
And have a space between each tweeet?
debora_brazil
18. Aug, 2009
hi… awesome tutorial.. thats what I’ve been looking for!! thanks!! I used on my website.. check it out http://www.ledevil.com
so… we can change “count=1″ to “count=5″ for example..
but can we use something like “previous/next”? thanks!!
Sue
03. Sep, 2009
Fantastic just what I needed worked first time (doing a redesign of my site at the moment so it’s not live yet)
I tried to get the arrow to show it didn’t work so not sure what to try instead of your suggestion above
any other ideas?
css code reads…………
#twitter_update_list li {
list-style-type: none;
}
#twitter_update_list span {
color: #34545c;
font-size: 13px;
font-weight: normal;
}
#twitter_update_list span a {
display: inline;
font-size: 0px;
width: 16px;
height: 16px;
background: url(/images/bn-rr.gif) no-repeat;
}
#twitter_update_list span a:hover {
text-decoration: none;
}
other than that you have explained it very well thank you
Shaun
20. Sep, 2009
Excellent post. Thanks a million!
koen
04. Oct, 2009
hej,
is there a way.. so the script doesn’t reload the page content??
it messes up the other javascript on my site.
Sean
31. Oct, 2009
Koen, I guess the problem resides in javascript libraries, It’s because which in most cases they are conflicting because most of of the javascript libraries uses $ as an object…
–
Thanks for the sweet share, I’ve been looking for it for AGES!
SwEtS
12. Nov, 2009
hey it really helped me a lot..it works dude..!!!!!!!!!
Moe
28. Nov, 2009
if it asks for your login info..go to your actual twitter account and unprotect your tweets..awesome post thanks
Torque
29. Nov, 2009
For some reason, when I place the code, the page crashes on IE. I think Internet Explorer has a problem with APIs. Is there a work around so that it doesn’t crash?
Alex
02. Dec, 2009
Though its good being able to get the twitter info being able to specify which parts to get/wrap them in spans ect would be good. Though that might be going into the AIP quite a bit more…
Good article though
Creative Ideas
08. Dec, 2009
Nice. Very useful info
Quixotic Media
24. Dec, 2009
Hey, great tutorial. One thing I am having a problem with is setting the hyperlinks a certain color, It seems something I have put in my code is not allowing this. Any ideas? I am designing this for a client on http://one3rdnerd.com see the bottom left of the footer.
Alessandro
05. Jan, 2010
Hi, Thanks for this great tutorial, but as I can see it doesn’t work if there is a “_” in the twitter username.
Does anybody help me?
Thanks a lot
BrockWalker
12. Jan, 2010
I found, that if your username has an underscore in it, you need to change “&count=1″ to “&count=2″ Works for me
dave
08. Jan, 2010
HI, How do i remove the date stamp from the tweet?
Sanjay
14. Jan, 2010
everything works fine but each and everytime it is loading it asks for username and password what to do
greg
14. Jan, 2010
I’ve installed the script and it works great in ff but it only loads properly in ie half the time for some reason. The other half, it loads pretty much just the background and the tweet section of my whole page and says that there’s a java error on the page. Any thoughts?
Tom
02. Feb, 2010
Doesn’t work for me. Nothing comes in. I have set my username, but still nothing
Tom
02. Feb, 2010
when I look at the json call, I see that I’m getting a rate limit error