Twitter HTML Badge Code

I’ve had a some requests for the code that I use to populate my sidebar with my Twitter status in HTML. Twitter’s default badge offerings are mostly worthless and at this point very ugly. I basically stripped out some JavaScript to parse and display your Twitter JSON file using JavaScript.

If you view source on this page (twitter.html), you can copy and paste the needed parts into your own page.

  1. CSS Style (could be in an external CSS file or in the html head), customize to your liking.
  2. Two JavaScript functions (in the html head).
  3. HTML code – using span id’s to place the parsed data into.
  4. JavaScript command to initiate the functions – I recommend putting this as the last thing on your page before the </body> tag. Sometimes it may take a few seconds to get the data back from Twitter and you don’t want your page waiting on Twitter to finish loading.

Now you need to customize it for your own Twitter account:

  1. Change the “via Twitter” link to point to your Twitter page.
  2. Change the “51373.json” in the last javaScript call to your Twitter ID. To find your Twitter ID, clicking on the RSS link on your Twitter page and look at the number in the URL.

Use and customize as you wish, Enjoy.

UPDATE:

Thanks to Tuamo for pointing out a solution to a JavaScript bug in Internet Explorer. I have updated the sample code linked above. Cheers!

— December 3rd, 2008

10 Responses to “Twitter HTML Badge Code”

  1. Tuomo says:

    Thanks for the effort – your script is exactly what I was looking for! :) The timestamp doesn’t seem to work very well in IE7 though :O I’m getting “really love coding in Flash with AS3 NaN days agovia Twitter”

  2. Paul Mayne says:

    Thanks Tuomo, I took a look on IE, there’s an issue with the Date.parse() function. I can’t spend any more time on it today but I’ll try to look into it later.
    In the meantime, you could just return the date the Twitter was created,
    replace the function with this:
    function relative_time(time_value) {
    return(time_value);
    }

  3. Tuomo says:

    I think I just ran into the solution. Adding three lines of code did the trick: http://delusion.fi/twitter.js I have no idea why it works though :P Thanks again!

  4. Paul Mayne says:

    Thanks again Tuomo. I have updated the sample code posted here. Looks like IE is picky about the spaces when parsing the timecode.

  5. Neluus says:

    Is there a way to display more than just the latest tweet? It seems that changing the number in the &count=1 doesn’t work…

  6. Paul Mayne says:

    There is a way, changing the count will return the last 2 tweets, but you will have to either separately parse through them both, or put the parse functionality into a loop to display them both. I don’t have time to write this right now, but maybe someday.

  7. Neluus says:

    Thanks Paul, but being the impatient guy that I am… i started coding myself. Thanks anyway!

    So basically i’ve now used three different scripts and badgecodes and edited them to get what i wanted.

    Demo can be found on my site.

  8. Paul Mayne says:

    Thanks for sharing Neluus, that looks great.

  9. Nick Read says:

    Works great, thanks for the code!

    Nick

  10. Fred says:

    Is it now possible to show more than one Tweet? It would be very nice if anyone could help me…

    Greetings from Germany!

    Fred