Multiple HTML Badges (Multiple Accounts) for Twitter on same page

There’s probably a dozen ways you can describe this feature, but the best I could come up with is this:

I wanted to place the top 3 tweets from multiple Twitter account sources on the same HTML page.  I have a webpage that lists Coupons and Special Offers for various companies, and under their area I needed to list their latest tweets in case they were running a special that very second.  Twitter provides code to you that allows you to do this for one, but for multiple accounts you’ll need to hack the JS file a little and edit the HTML in each place you wish to display a set of tweets.  It’s easy…

1. Get a copy of the Javascript file from Twitter.  It’s called Blogger.js
Inside that file, copy/paste everything twice.  Change the name of the second twitterCallback2() function to something like twitterCallback3().

2. You also have to replace the code at the end of the twitterCallback3() function from: document.getElementById('twitter_update_list').innerHTML with document.getElementById('twitter_update_list3').innerHTML (please note the change to ‘twitter_update_list3’).

You can repeat these steps as many times as you want to create more unique functions.  Once you’re done, upload it to your website and note the path to the file.

3. To use the functions in your HTML you will need to use Twitter’s code and tweak it a little.  If you goto Twitter.com/badges (requires a Twitter account) and run through creating an HTML Other badge, you will see code like this:

<div id=”twitter_div”>
<h2>Twitter Updates</h2>
<ul id=”twitter_update_list”></ul>
<a href=http://twitter.com/username id=”twitter-link” style=”display:block;text-align:right;”>follow me on Twitter</a>
</div>
<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&amp;count=5″></script>

Where username is your Twitter Account Name…

Change the path to blogger.js to the path to your own customized blogger.js on your website.
Where it says twitter_update_list  you will change that to the name of the update list you wish to use (example: twitter_update_list3) and where it says twitterCallback2  you will change that name to the callback function you’re using (example: twitterCallback3).
You can change Count to equal the number of posts you wish to pull.
You can customize the rest of that code so it looks good on your site, or leave it alone.

that’s it…a little confusing, but easy to use once  you get it.