Geeks With Blogs
Asif Maniar Software Engineer
Twitter can be a very useful source for data aggregation on any particular topic. Am building an application that will search twitter using their API and then display the results using jQuery.

There are 2 ways of accomplishing something like this. We can either do the processing at the server and then populate the page or talk to Twitters REST based api directly from the client.

Methods to retrieve data from the Twitter API require a GET request.
Methods that submit, change, or destroy data require a POST. A DELETE request is also accepted for methods that destroy data. The API presently supports the following data formats: XML, JSON, and the RSS and Atom syndication.

We shall use jQuery to make a GET request into Twitter and search for the 10 most recent Tweets for a search term and then get additional tweets as required. You can refer to the search API here:
http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search

According to the API a sample search url would look like this:
http://search.twitter.com/search.json?q=searchterm&rpp=10&lang=en&callback=?
where:
q is the search term
rpp is the number of tweets desired
the callback=? is required for cross domain calls
use lang to search for tweets in a specific language only

Now we shall write some jQuery to make the request and process the returned JSON.

The completed application will allow us to search twitter. Top 10 tweets will be displayed with the ability to load more tweets.




We add some controls to the html to be able to search and display the content.
<div>
        <div style="padding:10px 5px 10px 0;">
            <input type="text" id="searchText" />&nbsp;<input type="button" value="Search Twitter" id="searchButton" />
        </div>
        <div id="tweetSubContainer"></div>
        <div id="tweetMainContainer"></div>
       <input id="getMoreTweetsButton" type="button" value="Get More Tweets" />
    </div>

On dom ready we attach a click event to the searchButton to empty old tweets from the main container and hide the getMoreTweetsButton and then call the GetTweets function passing in the search text from the textbox.

$(document).ready(function() {
    var basehUrl = "http://search.twitter.com/search.json";
    $('#searchButton').click(function() {
        $("#tweetMainContainer").empty();
        $("#getMoreTweetsButton").hide();
        GetTweets($('#searchText').val(), 10);
    });
    $("#getMoreTweetsButton").hide();
});


The GetTweets function accepts a query and count and performs the desired search. On success the ApplyTwitterTemplate function processes the data. Note we use the getJSON method to get the json.

function GetTweets(query, count) {
    var searchUrl = "http://search.twitter.com/search.json?q=" + query + "&rpp=" + count + "&lang=en&callback=?";
   
    $.getJSON(searchUrl, function(data) {
        ApplyTwitterTemplate(data);
    });
}


In this sample we shall use a jQuery addon called jTemplates to process the returned json data. Its basically a templating engine that makes creating dynamic dom elements fast and easy.
Read more here: http://jtemplates.tpython.com/

In the ApplyTwitterTemplate function we populate a clone of the tweetSubContainer div with the jTemplate (Twitter.htm) and then we append the resulting html to the tweetMainContainer div. We also use the next_page property of the returned json to get the next page of tweets when the getMoreTweetsButton is clicked.

function ApplyTwitterTemplate(data) {
    $tweetSubContainer = $("#tweetSubContainer").clone();
    $tweetSubContainer.hide();
    $tweetSubContainer.setTemplateURL('Twitter.htm',
                                 null, { filter_data: false });
    $tweetSubContainer.processTemplate(data);
    $("#tweetMainContainer").append($tweetSubContainer);
 
    //show get more button and set next page url
    $("#getMoreTweetsButton").unbind('click', null);
    $("#getMoreTweetsButton").click(function() {
        GetMoreTweets(data.next_page);
    }).show();
 
    $tweetSubContainer.fadeIn("slow");
}


The Twitter.htm template is basically a template that binds to the returned data and generates the html for us. Within the template we loop through all the tweets and populate the html using various properties of the JSON objects. For example from_user is the username and text is the actual tweeted text.
<table width="800px">
    {#foreach $T.results as tweet}
    <tr>
        <td>
            <a href="http://www.twitter.com/{$T.tweet.from_user}">
                <img src="{$T.tweet.profile_image_url}" width="50" height="50" border="0" />
            </a>
        </td>
        <td>
            <strong><a  href="http://twitter.com/{$T.tweet.from_user}">{$T.tweet.from_user}</a></strong>
            {$T.tweet.text}<br />
            Created on: {$T.tweet.created_at}</span>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <hr />
        </td>
    </tr>
    {#/for}
</table>


Finally we implement code to get and append additional tweets to the mainTweetContainer when the getMoreTweetsButton is clicked. Note that the query in this case is the next_page property returned in the previous call.
function GetMoreTweets(query) {
    var searchUrl = "http://search.twitter.com/search.json" + query + "&callback=?";
    $.getJSON(searchUrl, function(data) {
        ApplyTwitterTemplate(data);
    });
}



Checkout the code in action here.

Download Code:



Bookmark and Share
Posted on Wednesday, October 7, 2009 5:14 PM jQuery , JavaScript , Twitter | Back to top


Comments on this post: Using jQuery to search Twitter

# re: Using jQuery to search Twitter
Requesting Gravatar...
great tut with good detalization, but i found one earlie on http://juitter.com which is also look very interesting
Left by neagaoleg on Oct 25, 2009 8:16 AM

# re: Using jQuery to search Twitter
Requesting Gravatar...
its a very nice tutorial but what if i dont want to fetch tweets from twitter i want to populate data from my own database but the only thing i want to do is i want the live updates like twitter home page does ! any idea
Left by design web london on Aug 07, 2010 12:49 PM

# re: Using jQuery to search Twitter
Requesting Gravatar...
Get Post "Finally we implement code to get and append additional tweets to the mainTweetContainer when the getMoreTweetsButton is clicked."
Left by katipsoi zunontee on Jan 19, 2012 12:20 PM

comments powered by Disqus

Copyright © Asif Maniar | Powered by: GeeksWithBlogs.net