TwitStream by @noah_cooper

What is TwitStream?

I was perusing the Web looking for some quick and dirty Javascript I could use with the Twitter Search API to display a list of recent tweets containing a particular keyword. I came across the monitter.com widget, which was almost exactly what I had in mind, except that it includes some really great, rich features that were well beyond what I needed. I adapted and simplified the monitter script to:

1. Fix an issue with unescaped characters, e.g. hashes, in the search query.
2. Fix an issue with ampersands in links in the linkify() function.
3. Replace some deprecated HTML tags, e.g. <b>, and fix other XHTML validation issues, e.g. using self-closing img tag.
4. Fetch search results only once, rather than every few seconds (since Twitter sets a rate limit of 100 requests per-hour per-user, I found this to be necessary).
5. Specify the number of tweets to return using an additional class.
6. Remove the fade-in effect.
7. Hyperlink each user's profile image to their timeline.

Just like monitter, TwitStream utilizes the jQuery framework. Because jQuery is awesome.

What's New in v1.2

One bug was fixed in this version:

1. The alt attribute was added to each user's profile image.

What's New in v1.1

1. Updated date/time display on tweets to match the format on Twitter - previously the exact time of day was shown, now a relative time (e.g. "about 1 hour ago") is shown instead.
2. Added new optional settings to include "Reply", "View Tweet", and "RT" links on each tweet.
3. Made all links in tweets open in new windows.

Demo

Five most recent tweets mentioning #ftw:

Download

Download the latest version of TwitStream as a ZIP file, including jquery.min and a sample HTML file.

Download TwitStream

Usage

Add the following to the head of your site.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="twitStream.js"></script>
<link rel="stylesheet" href="twit-stream.css" />

New in v1.1

Optionally, include "Reply", "View Tweet", and "RT" links on each tweet by setting the showTweetLinks variable. Values you may use are reply, view, rt, all, or none (default is none). You may use a comma-seperated list of values, such as 'reply,view'.

<script type="text/javascript">
showTweetLinks='all';
</script>

Add the following in the body of your site where you'd like your tweets to appear, where foo is the keyword or hashtag you wish to search for. Twitter search operators can be used, e.g. title="#hashtag", title="@foo", title="oh AND my AND god", title="oh OR my OR god", etc. To search for an exact match, use " around the phrase, e.g. title=""oh my god"".

Optionally, you may change the number of results to display.

<div class="twitStream 5" id="tweets" title="foo"></div>

To create multiple instances, simply add another div with a different id and title.

<div class="twitStream 5" id="tweets2" title="bar"></div>

Questions? Comments?

Feel free to e-mail me at noah [at] iamnoahcooper [dot] com or follow me at twitter.com/noah_cooper.

Report any bugs at code.google.com/p/twitstream.