In Seminario II the students were challenged to make a web page that displays a Twitter search. The “#chi” or “#worldcup” hash-tag search is performed and the results dynamically displayed.
Dominique Naser solution, using jQuery, can be found here (gracias Dominique).
First a simple form to input the search.
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Buscador de Hashtags</title>
</head>
<body>
<h2>Buscador</h2>
<form action="busca.php" method="post">
<input name="busqueda" type="text" size="50" style="text-align:left" />
<input name="" type="submit" size="10" value="Busca!" /><br>
</form>
</body>
</html>
The Html file where the search and the results display is performed.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Buscador de Hashtags</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.09"></script>
<script>
const MAX_RESULTS= 20;
function twitter_search() {
var url = 'http://search.twitter.com/search.json?callback=?';
// Iterating over the different search columns
$('.twitter_search').each(function() {
var container = $(this);
// Search terms are specified in the 'title' attribute
var search = container.attr('title');
if (search) {
var since_id = 0;
if (container.children().length) {
// Retrieve results since this id
since_id = container.children(':first').attr('id').replace('#', '%23');
}
// Request the results
$.getJSON(url, {'q': search, 'since_id': since_id}, function(data) {
// Processing those results, if any
if (data.results.length) {
for (i in data.results.reverse()) {
var r = data.results[i];
// Creating the result container
var div = $('<div id="#' + r.id + '"></div>');
// Don't show this element now
div.hide();
// Adding some styles through .twitter_result
div.addClass('twitter_result');
// Adding user's image
div.append('<img src="' + r.profile_image_url + '" alt="' + r.from_user + '" />');
// Adding username
div.append('<a href="http://twitter.com/' + r.from_user + '">' + r.from_user + '</a>');
// Adding tweet
div.append('<span>' + r.text + '</span>');
// Adding corners
div.corner();
// Adding this result to the main container
container.prepend(div);
// Effect
div.slideDown('slow');
}
}
// Removing old tweets
if (container.children().length > MAX_RESULTS) {
// Negative index
to_remove = MAX_RESULTS - container.children().length
container.children().slice(to_remove).each(function() {
$(this).slideUp();
});
}
});
}
});
};
$(document).ready(function() {
// Initial search
twitter_search();
// Refresh the results every 5 seconds
setInterval("twitter_search();", 5000);
});
</script>
</head>
<body>
<h2>Resultado</h2>
<div class="twitter_search" title="<?php echo $_POST["busqueda"]; ?>"></div>
</body>
</html>
Diego Acevedo, used a jQuery plugin Juitter (gracias Diego). You can found his solution here
Both solutions by pass the cross-domain restriction imposed by the browser.
