Fun with the Twitter Search API and jQuery

During a recent job interview, I admitted that “yeah, I’m a bit of an API junkie.” Anyone whose followed this site since 2002 probably has gone blind once or twice reading posts about SOAP, XML-RPC, RSS feed and other such programmer protocols and interfaces.

So why should anyone be surprised that today I’m providing a quick how-to code snippet of some fun I’m having with the Twitter Search API, REST, jQuery and jSON?

YES, I know I need to get back into providing posts about content management,  effective social media strategies and web campaigns … but for today … please indulge me with one more trip into the land of code.

Some Context

In the process of writing some WordPress plugins leveraging the Facebook API, I thought “why not twitter?”

However, there are already a multitude of plugins and widgets out there that’ll show my profile.  So I turned my eyes to Twitter Search.

My first thought was to simply write this all up using not much else but the jQuery.getJSON() method.  However, this approach doesn’t lend itself well to caching – which in turn would lead to some of you with busy sites getting your widgets blacklisted by Twitter as <a href=”http://apiwiki.twitter.com/Rate-limiting” title=”Twitter API Wiki – Rate Limiting”>their default rate limit</a> for calls to the REST API is 150 requests per hour.

So now I’m working on a PHP solution inspired in large part by Arron Jorbin’s post “More Twitter Shortcodes for WordPress.” Must read for anyone working with feeds or APIs in the WordPress arena.

Hey, so where’s the jQuery & jSON?

All that context aside, I did successfully write a short snippet that used jQuery to call the RESTFul Twitter Search API and then parses the jSON into a dynamic display.

I did this in part because while I will employ some form of PHP or  Perlto cache the Twitter Search, I still might employ jQuery as the rendering mechanism for said cache. Here’s my test code so far:

/* a counter outside the context of setCountdown() */
var seconds2go = 0;

/*
 * the method that sets the visual display of the countdown timer,
 * and triggers getTweet after 2 minutes
 */
var setCountdown = function() {
  seconds2go--;
  if(seconds2go > 0) {
    $("#countdown").html("Seconds until the next refresh:' +
  ' <span>" + seconds2go + "</span>");
  } else {
    $("#countdown").html("Seconds until the next refresh:' +
  ' <span>0</span>");
    getTweet();
    seconds2go = 120;
  }
}

/*
 * the method goes out to the Titter A.P.I,
 * then parses the jSON block into the display
 */
var getTweet = function() {

  /* set everything up */
  var url="http://search.twitter.com/search.json" +
       "?rpp=5&callback=?&q=";
  var query = escape( query=$("#twittersearch").val() );
  var display = '<div class="tweetDisplayContainer error">' +
       'no records found</div>';
  var urirex = /(https?):\/\/+([\w\d:#@%\/;$()~_?\+-=\\\.&]*)/g;
  var hashrex = /\#+([\w\d:#@%/;$()~_?\+-=\\\.&]*)/g;
  var thashuri = "http://search.twitter.com/search?q=%23";
  $("#twitterresults").html('');

  /*
   * A.J.A.X. happens here -> go get the data, then parse it
   */
  $.getJSON(url+query,function(json){
  $("#twitterresults").html('<h4><a class="searchlink" href="' +
  url.replace('search\.json','search')+query +
  '" title="see the search query via Twitter">Testing: ' +
  url+query + '</a></h4>');
  if(json) {
    display = '<div class="tweetsContainer">' +
  '<dl class="tweets clearfix">';
    $.each(json.results,function(i,tweet){
      ttext = tweet.text.replace(urirex,
  '<a href="$1://$2" title="">$2</a>');
      ttext = ttext.replace(hashrex,
  '<a href="' + thashuri  + '$1" title="">#$1</a>');
      display +=  '<dt class="tweet' + i + '">' +
            '<img src="' + tweet.profile_image_url + '"  />' +
          '</dt>' +
          '<dd class="tweet' + i + '">' +
            ttext + ' <strong>via:</strong>' +
            '<a href="http://twitter.com/' + tweet.from_user +
            '" title="tweets by ' + tweet.from_user +
            '">@' + tweet.from_user + '</a>'
          '</dd>';
        });
    display += '</dl></div>';
  }
    $("#twitterresults").append(display);

  });
}

/*
 * this is where we kick-it all off,
 * assumes seconds2go = 0 initially
 */
setInterval(setCountdown, 1000);

As you can see, the most difficult part was getting it all to fit in a readable format on this blog! Well, that and some additional fun with regular expressions.

Well that and what you don’t see in the code are two html elements:

<h2 id="countdown">Seconds until the next refresh: <span>120</span></h2>

<input type="hidden" id="twittersearch" value="deanpeters #smm" />

<div id="twitterresults">no results yet</div>

Todo: I’m thinking the above script could use a bit of animation easing or some other effect so we don’t simply “flash” new results at the user. It also needs to be objectified and wrapped-up as a plugin. More on that as I work on the widget/plugin.

Demo Stuff

I did create a demo page – it’ s not pretty, but it effectively shows how to get it done. I’ll craft up some CSS for it later.

It’s basically built off a search of  deanpeters  #smm as pictured below:

I’ve also created a .txt version of the file if you’re interested.

Additional Reading

In the meantime, I though I’d list some of the sites I visited while approaching this exercise. Some good people providing some good examples:

• Twitter-Search-API-Method:-search
• Using getJSON() to implement a Flickr Search
• Using getJSON() to implement a Flickr Search – with dates
• jquery getJson not passing any values to controller
• jQuery Polling plugin by Buntin.org
• JavaScript RegExp Example: Regular Expression Tester

FYI

Thanks for all the emails and retweets of late. Good stuff!