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