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.
- CSS Style (could be in an external CSS file or in the html head), customize to your liking.
- Two JavaScript functions (in the html head).
- HTML code – using span id’s to place the parsed data into.
- 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:
- Change the “via Twitter” link to point to your Twitter page.
- 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!




