JavaScript Twitter Search API Example

Today, I wanted to use the Public Twitter Search API and grab the latest 5 tweets tagged “jquery4u”. Twitter provide a bunch of useful REST API Resources which you can make use of without a Twitter account or any authentication (oAuth or such) to grab data from Twitter. The Twitter Search API can be used to grab tweets using queries such as ones that have specific keywords, hashtags, users, mentions, phrases etc… Here is how you can do it.

The JavaScript/jQuery

Here we can access the public feed from the Twitter search API and specify a JSON callback for the data.

Parameters:
q = the search string (make sure it’s uri encoded)
rpp = the number of tweets we want to get

//get the JSON data from the Twitter search API
$.getJSON("http://search.twitter.com/search.json?q=jquery4u&rpp=5&callback=?", function(data)
{
    //loop the tweets
    $(data.results).each(function(i,v)
    {
        //...see full code below
    }
}

The HTML

The CSS

.twitStream{
    font-family: verdana;
    font-size: 11px;
}
.twitStream a{
    font-family: verdana;
    font-size: 11px;
}
.tweet{
    display: block;
    padding: .4em;
    margin: .4em 0;
}
.tweet-left{
    float: left;
    margin-right: 1em;
}
.tweet-left img{
    border: 2px solid #000000;
}
.tweet p.text{
    margin: 0;
    padding: 0;
}

Full Code Listing

Here is the full JavaScript Object for the Twitter Widget.

/**
 *  JQUERY4U
 *
 *  Displays the latest tweets.
 *
 *  @author      Sam Deering
 *  @copyright   Copyright (c) 2012 JQUERY4U Pty Ltd
 *  @license     http://jquery4u.com/license/
 *  @since       Version 1.0
 *  @filesource  js/jquery4u.twitter.js
 *
 */

(function($,W,D)
{
    W.JQUERY4U = W.JQUERY4U || {};
    W.JQUERY4U.TWITTER = {

        name: "JQUERY4U TWITTER",

        init: function(wid)
        {
            //helper functions
            String.prototype.linkify=function(){
              return this.replace(/[A-Za-z]+://[A-Za-z0-9-_]+.[A-Za-z0-9-_:%&;?/.=]+/g,function(m){
                return m.link(m);
              });
            };
            String.prototype.linkuser=function(){
              return this.replace(/[@]+[A-Za-z0-9-_]+/g,function(u){
                return u.link("http://twitter.com/"+u.replace("@",""));
              });
            };
            String.prototype.linktag=function(){
              return this.replace(/[]+[A-Za-z0-9-_]+/,function(t){
                return t;
              });
            };

            //load twitter stylesheet
            $("head").append('');

            //get the tweets from Twitter API
            $.getJSON("http://search.twitter.com/search.json?q=jquery4u&rpp=5&callback=?", function(data)
            {
                // console.log(data.items.length);
                $(data.results).each(function(i,v)
                {

                      var tTime=new Date(Date.parse(this.created_at));
                      var cTime=new Date();
                      var sinceMin=Math.round((cTime-tTime)/60000);
                      if(sinceMin==0){
                        var sinceSec=Math.round((cTime-tTime)/1000);
                        if(sinceSec<10)
                          var since='less than 10 seconds ago';
                        else if(sinceSec<20)
                          var since='less than 20 seconds ago';
                        else
                          var since='half a minute ago';
                      }
                      else if(sinceMin==1){
                        var sinceSec=Math.round((cTime-tTime)/1000);
                        if(sinceSec==30)
                          var since='half a minute ago';
                        else if(sinceSec<60)
                          var since='less than a minute ago';
                        else
                          var since='1 minute ago';
                      }
                      else if(sinceMin<45)
                        var since=sinceMin+' minutes ago';
                      else if(sinceMin>44&&sinceMin<60)
                        var since='about 1 hour ago';
                      else if(sinceMin<1440){
                        var sinceHr=Math.round(sinceMin/60);
                        if(sinceHr==1)
                          var since='about 1 hour ago';
                        else
                          var since='about '+sinceHr+' hours ago';
                      }
                      else if(sinceMin>1439&&sinceMin<2880)
                        var since='1 day ago';
                      else{
                        var sinceDay=Math.round(sinceMin/1440);
                        var since=sinceDay+' days ago';
                      }
                      var tweetBy='@'+this.from_user+' '+since+'';
                      tweetBy=tweetBy+' &middot; Reply';
                      tweetBy=tweetBy+' &middot; View Tweet';
                      tweetBy=tweetBy+' &middot; RT';
                      var tweet='
'+this.text.linkify().linkuser().linktag().replace(/'+tweetBy+'

';

                      $('#twitter').append(tweet); //add the tweet...

                });
            });
        }
    }

})(jQuery,window,document);

Some of the code used above is courtesy of TwitStream. Thanks guys.

Meet the author

Sam Deering

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.