del.icio.us .:. stumble .:. digg

Build a Twitter Search Badge in 15 Minutes .:. kentbrewster.com

Twitter Search is turning out to be a very powerful force in real-time search. Instead of relying on a vaguely-defined, possibly-corrupt, almost-always-out-of-date algorhythm owned by somebody else, why not check out what your fellow Internet readers are marking as interesting and/or relevant? Here are three instances of the same search prototype, two with text queries and one with a from: query, showing tweets from a single person.

If you'd like to try the Twitter Seach Badge on your site, include this bit of JavaScript wherever you want it to pop up:

<script src="http://r8ar.com/tsb.js"></script>

The usual batch of configuration variables--height, width, etc--are available; to show a default search, do something like this:

<script src="http://r8ar.com/tsb.js">{"query":"obama"}</script>
<script src="http://r8ar.com/tsb.js">{"query":"from:scobleizer"}</script>

Right, obviously I need to combine this with Twitterati. I'm just wishing the Twitter Search API had a way to come up with the most recent tweets by friends of username. Will probably have to munge something together with Pipes to do that.

Also still to come: Get More and Go Back links at the bottom.

Here's my talk from the May 9th BayJax meetup, tracing the development process of this badge, which I wrote in a single afternoon. An older but much more detailed version of this presentation is online here, under Case-Hardened Web Badges: The Live Version.

Start Presentation in New Window

If you'd like me to present this, or something like it, or something completely unlike it (like Ajax security or OAuth or rolling your own API with Pipes) at your conference, please contact me and I'll see what I can do. As always, have fun and please let me know how it goes.

Post a Comment

Twitter Fan .:. 2009-12-20 13:05:39
Thanks a lot for sharing your badge. I have been looking to add something like this to my site, but haven't had the time to create it myself.
Marco .:. 2009-07-31 11:32:22
Nice Badget Script. Will try it for my German Twitter Trends Mashup. Does it works with JQuery and can I switch caching on? The original JS from twitter.com is hanging several times...
Kent Brewster .:. 2009-07-13 08:19:14
Would love to help out with some code that doesn't rely on document.write, you guys. :)
Brandon .:. 2009-07-13 07:53:48
Hey! I just found this and I'm wishing I'd read it a month ago. Great presentation.
I actually just created a Twitter Search Badge/Widget -- except it doesn't have a search field built in, it's a static search. You can check it out here: http://twitstat.us
Kent Brewster .:. 2009-05-08 12:37:13
Aaaah, crap. Turns out the presentation is full of fail in IE, Safari, and Chrome. Working on it; for now, please try Firefox or Opera.
Sandy Barber .:. 2009-05-08 11:40:36
You're Case-Hardened JavaScript presentation is unfortunately not hardened enough to display more than the first page in Safari 4.
Ido Green .:. 2009-05-08 10:59:27
Thank you for a great presentation yesterday... very cool stuff.
I'll play around with this to see what things I can build.

Copyright Kent Brewster 1987-2010 .:. FAQ .:. RSS .:. Contact