127

How To Display Your Last Tweet Using Javascript And The Twitter API

title
Share!

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. It’s 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 webdesigndev.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…

twit

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!

Get Free Email Updates!

Sign up now and receive an email when we publish new content.

We will never give away, trade or sell your email address. You can unsubscribe at any time.

About the Author

Iggy Ko

Facebook Twitter Google+

I am the owner and main person behind WebDesignDev. I blog about all kinds of web design topics.

Iggy KoHow To Display Your Last Tweet Using Javascript And The Twitter API

Comments 127

  1. MateToth

    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.

  2. elvi

    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.

    1. Andy

      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?

  3. Nick

    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.

  4. Jeff

    Do have any ideas how to replace in-tweet links with an image such as an arrow and hide the actual link?

    1. Andy

      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.

  5. Dude

    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!

      1. Andy

        Put this…

        &count=1

        At the end of your query. Like…

        username.json?callback=twitterCallback2&count=1

  6. Nick

    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?

    1. aShocka

      read the twitter’s instructions – it says you have to have a public profile. when you unlock it in your settings, it will show.

  7. sriganesh

    ahh. thank you, i will try it. thank you, I WAS LOOKING FOR THIS, TO ADD CUSTOM TWITTER UPDATES.

  8. Jacob

    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?

    1. Andy

      Put this…

      &count=1

      At the end of your query. Like…

      username.json?callback=twitterCallback2&count=1

      1. Jacob

        Yep, tried that.
        .json?callback=twitterCallback2&count=1

        When you take out the ; before the count it no longer displays anything.

  9. Catalin

    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?

    1. Catalin

      Had to remove the “;” from your initial code line: twitterCallback2&;count=1\
      Working fine now :)

  10. kees

    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

  11. Kwamepocho

    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…

  12. ote tatsuya

    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

  13. Keiron Lowe

    Hi, How would I get it to show the users avatar?
    And have a space between each tweeet?

  14. Sue

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

  15. koen

    hej,

    is there a way.. so the script doesn’t reload the page content??
    it messes up the other javascript on my site.

  16. Sean

    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!

  17. Torque

    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?

  18. Alex

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

  19. Quixotic Media

    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.

  20. BrockWalker

    I found, that if your username has an underscore in it, you need to change “&count=1″ to “&count=2″ Works for me :)

  21. Sanjay

    everything works fine but each and everytime it is loading it asks for username and password what to do

  22. joe

    thanks for the post,

    its working for me fine, however… the “45 mins ago” doesnt get restyled when i apply css to the links but names in the twitter do?? any reason for this? I have changed the page defaults for links to over come that and match them to my desired styling but would prefer to keep things tidy and all in css for the widget itself. any ideas?

    also when i am displaying 3 counts there is no padding between posts for they are really tight on top of each other… i have tried to add padding-bottom to a variety of things but all of what i try doesn’t seem to effect the end display??? any clues?

    Also, with rate limits and javascript issues… is this a reliable method? have people that are using this method live on their sites had any problems ?

    thanks

  23. Greg6

    This works great, thanks!

    A question: I’ve noticed that when the call doesn’t return anything b/c Twitter’s servers are overloaded (happens often!), then it prevents any remaining HTML of loading.. Is there a way to force it to load the rest of the page even if Twitter servers don’t respond?

    That would be really useful.

  24. BornA

    hi
    Great article man
    We can’t access to twitter in our country :(
    can I access my tweets from other api or url and then import it to my self-hosted wordpress blog?!

  25. Neil

    Can’t get it to work in any version of IE. Works great in Firefox though. Anyone else had the same problem?

    Is there a fix? Thanks

  26. Pingback: Wordpress: come mostrare gli ultimi status di Twitter | Gioxx's Wall

  27. tim

    great tutorial,

    i dont have enough space to display the entire tweet, is it possible to only display for example 100 characters with … at the end?

    thanks in advance

    Tim

  28. Programmer

    Hi,

    I can’t get it to work in IE but it works great in Firefox though??

    I notice that it sometimes displays in IE, but most of the time it doesn’t.!

    Is these problems related to API and hitting call limit?

    Is there a fix? Thanks

  29. Patrick

    Hi, awesome code and great tutorial. Only took about 5 minutes and works really well in Chrome.

    Here is mine: http://www.patricktayloredwards.com. Its relatively simple at the moment but I will work on it.

    Joe:
    padding between individual tweets: (put this in the css)

    #twitter_update_list li {
    padding-bottom: 10px;
    }

    I’m also trying to work out how to put a to have the timestamp on a new line and in a smaller text.

    Cheers

  30. Ivanet

    Really cool, I have inserted in my blog and it works fantastically. Also you can style the list mode directly from the DIV without editing your CSS ;-)

  31. Patrick

    It is technically possible to remove the date / time stamp.

    Twitter reads the time stamp as a link so you could put this in your css:

    #twitter_update_list li a {
    display: none;
    }

    this simply hides the links from the list withing the div named twitter_update_list

    Though this does work, it will also hide any links or ‘@something’ that are in your tweets.

    So it is not ideal, but if we knew the exact name twitter gives to the timestamp then it should be possible. I think it is ‘entry-date’ but I have not got anything to work yet.

    Cheers

  32. shikkaba

    My server was being stupid and not letting me use PHP to call Twitter. The Twitter official ap wasn’t customizable, really. So this helped a lot. Seriously, thank you.

  33. Sean

    THANK YOU! Finally – I have been looking far and wide for this and this is the first one that works!

  34. Adam

    When I paste the code in DreamWeaver throws the following error:

    “The documents current encoding can not correctly save all of the characters within the document. You way want to change to UTF-8 or encoding the supports the special characters in this document.”

    Can anyone help me out?

  35. Jon

    Adam – the problem is probably that copy/paste is introducing funky quotation marks that DreamWeaver doesn’t like. Try typing the code directly into DreamWeaver rather than copy/pasting it.

  36. Ronald

    love this script but i got a problem, when twitter is over capacity then my page stucks and dont load the rest of the page… can i implement something like maximal execution time?

  37. Mathias Vagni

    It works great when I use my twitter profile (@disengised) but it somehow stops working when I use my clients twitter (@soasdebate). Any Ideas?

  38. Gergely

    Thank you for the article, it is very useful. I am going to implement on my site. :P

    I have one tiny observation: I learnt that using hyphens (-) instead of underscores (_) in the class names is better practice. Apparently Google likes this standard. :)

    Cheers

  39. Lee

    This doesn’t work. I tried it with different usernames, put it on a page by itself tried it on a local server and a remote server, tried it with the javascript in the header and in the body. Nothing. Does anybody else have a problem with this code?

  40. Jeff

    Ronald,
    The problem with your page not displaying when twitter is over capacity is due to the placement of the js in step 2. You definitely do not want to add it after the code in step 1… else your page load will always depend on twitter. You want to put it at the end of your markup, right before the closing body tag in your page.

    Thanks.

  41. Jeff

    And Lee.. it’s dependent on the twitter API. Just like facebooks, flickrs and everyone elses.. if it’s down your code won’t show. Mine goes down from time to time as well, so you were likely testing in that window.

  42. Jeff

    And Lee.. the code didn’t work for me either. I had to add a twitter_div before the twitter_update_list, which had to be surrounded in ul tags. Twitter’s likely changed something since this was originally posted.. since it’s well over a year and a half old. You can hit me up on my site if you need my exact code.
    Thanks.

  43. Filipe

    I don’t want to display the time the tweet was made how can I do that and if I wanted to keep it how can I style it with css does it have a class or id

    thanks

  44. Justin

    I am having trouble. The links to do not change color to match my site. I don’t know what I’m doing wrong; I’m doing everything this site says to do but it’s not working. The links are the standard blue colored if unclicked and the standard purple for clicked links.

    Can anyone help me with this problem? Like I said, I’m doing everything this tutorial says to do and it’s not working. Thanks.

  45. Mikebmuller

    Thanks so much. I usually use wordpress plugins for this. I was so happy I found this so quickly. Thank you very much.
    P.S. any idea how to customize a link after the tweet. ie “Follow Me” instead of “2 days ago”

    1. Damir

      I’m trying now to add scroll to this, with arrows left/right so visitors can view older tweets if they want, and still keep it simple. That would be nice.

  46. Brandon

    Finally, I’m tired of all these idiots making huge scripts and complex systems to just display a Tweet, you did it in 3 lines of code.

  47. Brandon

    Also, for anyone who’s wondering why this is no longer working, you must use this HTML code now:

    And if you want to remove the “– hours ago…” text, just add this to your stylesheet:

    #twitter_div ul a {
    display: none;
    }

    1. Brent

      Can you paste the HTML again? It looks like it was stripped from the comment. Try including in tags? Or escaped?

  48. Daniel

    I can confirm this works :) And like a charm..

    One question:

    .json?callback=twitterCallback2&count=1 <–This number, is it not the count of tweets one want?

    All my tweets are loaded..(693) days ago.

    Only need like 2-3 tweets :)

    Thanks.

  49. Jiten

    Hi there ! thanks a lot for this tutorial, however I’d like to know how to display my tweets along with its date (and time if possible)… how do I do it ?

  50. Alex

    You say to paste Step 2 below Step 1. After the HTML? It doesn’t work for me if I post Step 2 within the div.

  51. Allen

    Anyone that CANT get the above code to work. I had the same issue..

    You must type it out not copy and paste!

    1. PJM

      Reason is the quotation marks i.e “something”.Here they are slanted so if you copy/paste,your browser cant interpret that.If you are using notepad++ just find/replace the slanted ” with the normal “.

  52. Eddie

    to remove the “# days ago” thing…

    add

    [css]#twitter_update_list a {
    display:none;
    }
    }[/css]

    notice the lack of “span”

  53. Gitesh

    As of 7th July 2011 this no longer seems to work, the JSON string returned is:

    twitterCallback2([]);

    Can anyone else confirm?

  54. FCL

    Tweets & Hashtags…

    Is there any possibility to show just tweets from a specific #hashtag?
    Thanks for help.

    Cheers

  55. hamlet

    Codes work fine, but it wont work if viewed in blackberry browser.
    Any idea, so I can put codes in my mobile version website for blackberry users?

  56. TFisker

    I have changed the “….twitterCallback2&count=1″ to 5, to get the five latest tweets. This works very well, but how do I get an empty line (linebreak I guess) between each tweet?
    Right now all five tweets are shown in a “solid” chunk.

    @TFisker

  57. Jonas

    I am having problems with retweets. Whenever i try to retweet on twitter it does not display at al on my webpage with this function. Any ideas?

  58. Jason

    I am having the same problem as the previous post. Whenever I retweet something, the number of tweets that I have set to display it displays 1 less if you get me.

    For example if I set the number to 3 and if I retweet something then it will only display 2 tweets. If I reweet 2 things it will only display 1 tweet on my website.

    Any ideas??

  59. Richard

    Do you have any suggestions, your CSS code isn’t working on my site… any help would be great!

    Richard

  60. PJM

    I see all my tweets,but I just need my last one.Is there a way to do that?

    And is there a method to do this same thing with facebook,I’ve googled but there doesnt seem to be anything straight up.

  61. Dylan

    Hi, I did excactly what you typed. But nothing seems to show up at my website. Even the plain text won’t show up.

    What am I doing wrong? Or is the code old? Already tried the code from Alfredo..

  62. mike thornley

    I only want my most recent tweet displayed and when I change the count to 1, nothing renders. If I have 2, it works fine. Why is this?.

  63. Devender

    is it possible to embed multiple users tweets on same page? Its working only for one twitter user which are on same page. May be it is DIV ID.

    Cheers

  64. koffertje

    If you want the link at the end of the line “1 day ago”
    you can set the “display: inherit; and delete the word span like below.

    #twitter_update_list a {
    display: inherit;
    color: #000000;
    }

  65. Arnold

    I set this the first time yesterday and it worked fine. Today it is not working in all of a sudden. Any idea?

  66. MattiWell

    Hello guys !!!

    I read all your post and nobody have my problem. Here is mine. When I added the code the software telling me that “blogger.js” and “12345.json” are remote and cannot be edited. My question is, do you know what’s going on and who can I fix it ?? Thanks for your time and thank you for the post. it’s really helpful.

  67. penile extender

    WOW just what I was searching for. Came here by searching for connect to twitter user timeline

  68. Darren

    Is there any way to display the tweet in the “twitter_update_list” div, and then have the full name of the place (geographic location) associated with that tweet display in a different div? When I go to the url, the data is there for both the tweet and the place; I’d love to be able to display both separately. I can’t seem to find documentation to do this in the API docs.

  69. neilcreagh

    Any idea how to call the SECOND most recent tweet – I have a layout to build where the latest two tweets are shown separately in absolute positions – so I can easily call the first/latest one but how would I call the second one separately? Any ideas would be greatly appreciated, thanks.
    Neil

  70. Daniel Wakefield

    Hey guys

    Ive been reading through the comments and it seems to me that most the problems such as tweet count etc are probably being caused by copying and pasting.

    Problem 1

    If you copy the sample code you will need to replace quotation marks “” as they are not utf endoded on this site.

    That should sort the twet count not working.

    Problem 2

    The list items are not wrapped in tags

    Dont have a solution for this bit or a particular problem but its definatelly not right, im going to look into it now and post back later.

    Hope this helps
    D

  71. oliver

    [js]

    [/js]

    hi, this is no longer working…wondering if you know the fix? Mostly a front end designer, trying to make sense of the twitter dev jargon :|

    thanks!

  72. Richard

    Hey Guys,

    I’ve followed the code closely and for some reason I cannot get any of my feeds to appear.

    my code is:

    I was hoping if someone could shed some light on this for me. I’ve read through the other comments, but I still cant it to work :(

  73. Cero2k

    any idea if this technique is still working, I had it in my site a while ago and it stopped working. I’ve been to other sites that i know use something like this or similar and they don’t seem to be working either.

Leave a Reply

Your email address will not be published. Required fields are marked *