I’ve been getting an increasing number of questions about my JavaScript Twitter Statuses Badge as of late and this past week the most prominent questions have been regarding using multiple Twitter badges on the same page. Here’s an except from one of my answers via email:

As it stands, due to the way the Twitter API works, it will only display one per page. That said, it is definitely possible to make it work with the following hacks:

1. In the mtaTwitterStatuses.js file, you can duplicate the mtaTwitterCallback() function and name it something like mtaTwitterCallback2().

2. Also in mtaTwitterStatuses.js, you’d then have to modify the last line of your new function, mtaTwitterCallback2(), to replace document.getElementById('mtaTwitter').innerHTML with document.getElementById('mtaTwitter2').innerHTML (note the change to ‘mtaTwitter2’.

3. Then, in your HTML, you’d want to put <div id="mtaTwitter"></div> where you want your first badge, <div id="mtaTwitter2"></div> (note the same change to “mtaTwitter2”) where you want your second badge.

4. Also in your HTML, you’d want to put the following just before the </body> tag:

<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/morgant.json?callback=mtaTwitterCallback&amp;count=1"></script>
<script type="text/javascript" src="http://www.twitter.com/statuses/user_timeline/slottedpiginfo.json?callback=mtaTwitterCallback2&amp;count=1"></script>

Note the “mtaTwitterCallback” & “mtaTwitterCallback2” in the above, in addition to the two different twitter account names (“morgant” & “slottedpiginfo”, in this case).

I’m currently considering my options for implementing better support for multiple badges on the same page for a future release, but I hope this helps in the meantime.