JavaScript Twitter Search API Example

Today, I wanted to use the Public Twitter Search API and grab the latest 5 tweets tagged “jquery4u”. Here is how you can do it yourself.


Demo

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

<div id="twitter-widget"></div>

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.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-_:%&amp;;\?\/.=]+/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('<link rel="stylesheet" type="text/css" href="css/style.css">');

            //get the tweets from Twitter API
            $.getJSON("http://search.twitter.com/search.json?q=jquery4u&amp;rpp=5&amp;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&amp;&amp;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&amp;&amp;sinceMin<2880)
                        var since='1 day ago';
                      else{
                        var sinceDay=Math.round(sinceMin/1440);
                        var since=sinceDay+' days ago';
                      }
                      var tweetBy='<a class="tweet-user" target="_blank" href="http://twitter.com/'+this.from_user+'">@'+this.from_user+'</a> <span class="tweet-time">'+since+'</span>';
                      tweetBy=tweetBy+' &amp;middot; <a class="tweet-reply" target="_blank" href="http://twitter.com/?status=@'+this.from_user+' &amp;in_reply_to_status_id='+this.id+'&amp;in_reply_to='+this.from_user+'">Reply</a>';
                      tweetBy=tweetBy+' &amp;middot; <a class="tweet-view" target="_blank" href="http://twitter.com/'+this.from_user+'/statuses/'+this.id+'">View Tweet</a>';
                      tweetBy=tweetBy+' &amp;middot; <a class="tweet-rt" target="_blank" href="http://twitter.com/?status=RT @'+this.from_user+' '+escape(this.text.replace(/&amp;quot;/g,'"'))+'&amp;in_reply_to_status_id='+this.id+'&amp;in_reply_to='+this.from_user+'">RT</a>';
                      var tweet='<div class="tweet"><div class="tweet-left"><a target="_blank" href="http://twitter.com/'+this.from_user+'"><img width="48" height="48" alt="'+this.from_user+' on Twitter" src="'+this.profile_image_url+'" /></a></div><div class="tweet-right"><p class="text">'+this.text.linkify().linkuser().linktag().replace(/<a/g,'<a target="_blank"')+'<br />'+tweetBy+'</p></div><br style="clear: both;" /></div>';

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

                });
            });
        }
    }

})(jQuery,window,document);

Usage

<script type="text/javascript">
jQuery(document).ready(function($) {
    JQUERY4U.TWITTER.init();
});
</script>

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

Tagged with: .

AUTHOR: . Find out more about jQuery4u author on Plus.