Werner Creixell » cross-domain http://profesores.elo.utfsm.cl/~wcreixell Personal web page Fri, 20 Mar 2026 13:06:49 +0000 en-US hourly 1 http://wordpress.org/?v=3.6.1 http://creativecommons.org/licenses/by-nc-sa/2.0/cl/ Twitter Searchs http://profesores.elo.utfsm.cl/~wcreixell/?p=141 http://profesores.elo.utfsm.cl/~wcreixell/?p=141#comments Wed, 16 Jun 2010 20:09:50 +0000 Werner Creixell http://profesores.elo.utfsm.cl/~wcreixell/?p=141 <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> […]]]> 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.

]]> http://profesores.elo.utfsm.cl/~wcreixell/?feed=rss2&p=141 0