TweetChicago: Behind the Scenes

Last month the Law School announced its TweetChicago page, which collects together an ever-increasing number of our faculty and students’ 140-character-or-less musings on the micro-blogging service known as Twitter. Since then we’ve had several inquiries as to how we put this little experiment together, so here’s a real brief explanation.
TweetChicago is basically just built off of the standard HTML/javascript widget that Twitter makes (not-so-easily) available:

<div id=”twitter_div”>
<ul id=”twitter_update_list”></ul>
</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>

Just change “username” above to the name of the user whose tweets you’d like to widgetize, change the “count=” to the number of tweets you’d like to display, and paste into your webpage.
Just like that, you have your first tweeter’s widget.

The tricky part comes in when you want to include multiple widgets on one page. Because of the way Twitter’s javascript is written, it will only call one tweeter’s feed on each page. You can get around this by creating a separate page for each tweeter (e.g., “tweeter1.html,” “tweeter2.html,” etc. You can then embed these pages in your aggregator page using iframes:

<iframe id=”tweeter1“ src=”tweeter1.html“>

Note that the tweeter’s individual pages will need to include a link to the .css file you’re using to style them, as the styles from the main page where you’re embedding the iframes will not apply to the pages contained within iframes.

This is not a terribly elegant — nor, unfortunately accessible — solution, but it’s the only way I could figure out to get around the one badge per page bug.