jQuery Twitter streaming widget in 30 lines

Wednesday, 18 November 2009



Today we are going to build a widget for streaming Twitter search results using jQuery. This widget only requires 30 lines of javascript and the rest is CSS and a small bit of HTML.

The widget takes in a search term, in the example we are searching for the term "jQuery". It then updates every 20 seconds (you can change the frequency). Each time it updates it places the latest results at the top and if the number of results exceeds 20 it removes the excess results from the bottom.

Search jQuery


You can download the code for the above widget from here.

Let's begin by looking at the HTML:
<div id='twitter_stream'>
     <img src='./images/twitter.png' style='position:absolute;right:5px;top:-2px;' />
     <p id="stream_term">Search jQuery</p>
     <div id='twitter_results'></div>
</div>

This is very simple and consists of the widget div, the Twitter bird icon, the heading and then the results pane.

The javascript is essentially one main function, load_tweets():
function load_tweets() {
     var last_ID = $(".tweet_result:first").attr("ID");
     
     if (last_ID) {
          last_ID = last_ID.replace("tweet", "");
          var url = "http://search.twitter.com/search.json?q=jQuery&since_id=" + last_ID + "&callback=?";
     } else {
          var url = "http://search.twitter.com/search.json?q=jQuery&rpp=5&callback=?"; 
     }
     
     $.getJSON(url, function(json) { 
          var results = '';
          $(json.results).each(function() {
               if (this.id == undefined) return;
               results += "<p class='tweet_result' id='tweet" + this.id + "'><a href='http://twitter.com/" + this.from_user + "' class='tweet_user'><img width='16' height='16' alt='" + this.from_user + " on Twitter' src='" + this.profile_image_url + "' /></a>" + linkify(this.text) + "</p>";
          });
          if (last_ID) {
               $("#twitter_results").prepend(results);
          } else {
               $("#twitter_results").append(results);
          }
     });

     $(".tweet_result:gt(20)").remove();
}

load_tweets() checks to see if there are already any tweets loaded by retrieving the ID of the first tweet (this will be the ID of the most recent tweet form the results).

If there were already tweets then it sets the URL to retrieve all the results since that ID by passing in the &since_id= variable.

If there wasn't any tweets loaded then it just grabs the 5 most recent results.

The results are then loaded in via JSON using the jQuery $.getJSON call. It loops over the results and adds them to the results string and then prepends the results string to the #twitter_results div.

The next bit of magic is the linkify function. This function builds us some nice links depending on the type of link provided:

function linkify(text) {
    // modified from TwitterGitter by David Walsh (davidwalsh.name)
    // courtesy of Jeremy Parrish (rrish.org)
    return text.replace(/(https?://[w-:;?&=+.%#/]+)/gi, '<a href="$1">$1</a>')
               .replace(/(^|W)@(w+)/g, '$1<a href="http://twitter.com/$2">@$2</a>')
               .replace(/(^|W)#(w+)/g, '$1#<a href="http://search.twitter.com/search?q=%23$2">$2</a>');
}

The rest is just a little bit of CSS styling and the final touch is in the document ready function to get our results to stream we use the setInterval function:
$("document").ready(function() {
     load_tweets();
     setInterval(load_tweets, 20000);
});

Hope you like it!
blog comments powered by Disqus