A (better) Javascript badge for Twitter

Here you are a HTML/Javascript badge for showing your Twitter updates. Much better than the one at Twitter’s web page!

So you want to show your latests Twitter updates in your web page? You can use Twitter’s badge, but the look isn’t great, and URLs neither @replies inside updates are not clickable.

If you want a better badge including clickable URLs and @replies (like the one at the left column of this page), just follow these steps:

Badge for Twitter

 

1. Download and link to .js and .css files

Download twitter.css and twitter.js from my site. Put them on your own server, and modify your HTML page/template so as to link to them; you have to include something similar to this inside the <head> section:

<link rel="stylesheet" type="text/css" media="screen" href="twitter.css" />
<script type="text/javascript" src="twitter.js" /> 

You can modify the css file to get the appearance you want. You can also modify some strings in the .js file (for instance to adapt them to your language).

2. Include the code to insert the badge

Modify your HTML page/template inserting this code where you want the badge to appear:

<div id="twitter_div"><ul id="twitter_update_list"><li>loading...</li></ul>
</div>
<div>
<a class="twitter_follow" href="http://twitter.com/YOUR_USERNAME">follow me at http://twitter.com</a>
</div>

Don’t forget including your own Twitter username. You can also modify the ‘loading…’ or the ‘follow me’ strings.

3.Include the call to the Twitter API

Include this code at the end of your template/HTML file, just before </body> tag (this way you ensure your page will still display correctly if the call fails, for instance, if Twitter’s site is down):

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/YOUR_USERNAME.json?callback=twitterCallback2&count=10"></script>

Don’t forget including your own Twitter username. You can also modify the number of updates to show. 

And that’s all

Please tell me if you are using this badge, or you find any error or upgrade.

Leave a Reply

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