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.

Comments from before Disqus:

Chris .:. 2010-08-11 04:48:44

Any progress on the square brackets issue?

It is sending this for the query...
search.twitter.com/search.json?rpp=10〈=en&q=riegel&callback=yagznpalbwziotpy.p[0]

And in Safari the callback is failing with...
TypeError: Result of expression '[0]' [0] is not a function.

Florian .:. 2010-05-07 14:13:43

Thank you, Kent. I've tested it and it works. perfect!

Tellow .:. 2010-05-06 04:42:38

Nice Job. We will use this presentation as an inspiration to connect our projekt with Twitter. Keep up the good Work!

Kent Brewster .:. 2010-05-04 22:16:28

I believe so, Florian. Those $ shortcuts only exist within the badge function. (Which is, of course, still broken. Sorry about that....)

Florian .:. 2010-04-29 18:53:18

Does it works with JQuery?

Kent Brewster .:. 2010-04-28 08:21:18

That goofy less-than sign should say &lang=en, sorry. My fault, not yours.

Kent Brewster .:. 2010-04-28 08:20:23

I think you'd want to do something like this:

var id = trueName + '.p' + n;
$.w[id] = function(r) {
$.f.removeScript(id);
$.f.renderSearch(r);
};

var url = 'http://search.twitter.com/search.json?rpp=' + $.a.count + '&lang=en&q=' + encodeURIComponent($.s.q.value) + '&callback=' + id;

In edge cases where you fire off multiple searches and one comes back early, it's anybody's guess whether the callback will remember the correct ID of the script tag it needs to remove. Really wish we had those square brackets back....

Terry Riegel .:. 2010-04-28 07:58:08

For some reason Safari was not working properly with truename.p[0] truename.p[1] etc. So I modified it to use truename.p0 truename.p1, and to retain closure I kept $.p

I am not sure if I have introduced any other problems with this modification. Here it is...

var id = trueName + '.p'+n;
$.p = function(r) {
    $.f.removeScript(id);
    $.f.renderSearch(r);
};
var url = 'http://search.twitter.com/search.json?rpp=' + $.a.count + '&lang=en&q=' + encodeURIComponent($.s.q.value) + '&callback=' + trueName + '.p';

Terry Riegel .:. 2010-04-28 07:42:33

Any progress on the square brackets issue?

It is sending this for the query...
search.twitter.com/search.json?rpp=10&lang=en&q=riegel&callback=yagznpalbwziotpy.p[0]

And in Safari the callback is failing with...
TypeError: Result of expression '[0]' [0] is not a function.

Kent Brewster .:. 2010-03-14 11:20:15

Arrgh. This is broken; the Twitter API has quit responding properly to callbacks that include square brackets. Working on it now.

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.