3, 2, 1... Buscando Tweets!! (buscador de usuarios de Twitter en Web)
En este artículo vamos a aprender a crear un Buscador de usuarios de Twitter con el número de publicaciones que queremos que muestre de este usuario.
¡Comenzamos!
Vamos a utilizar un único fichero html donde:
En el head recogeremos un include de la librería JQuery y se contruirá un método javascript extendido llamado consultaTwitter y una función que ejecuta este método el cual es llamado desde un botón del body.
En el body simplemente hemos creado un formulario con un botón que llama a la función que hemos construido en el head.
En conclusión y sin parrafadas el html para copiar y pegar e investigar es el siguiente:
<html>
<head>
<title>jquery.twitter.js by José Joaquín Sánchez</title>
<!-- LIBRERIA JQUERY -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- NUESTO SCRIPT -->
<script type="text/javascript">
//JQuery Twitter by José Joaquín Sánchez
(
function($)
{
$.fn.consultaTwitter = function(options)
{
var o = $.extend({}, $.fn.consultaTwitter.defaults, options);
$(this).html('<ul id="twitter_update_list" ><li></li></ul>');
$.getScript("http://twitter.com/javascripts/blogger.js");
$.getScript(
"http://twitter.com/statuses/user_timeline/" + o.usuario
+ ".json?callback=twitterCallback2&count=" + o.numTweets,
function() { $("ul#twitter_update_list").show(); }
);
};
// Valores predeterminados
$.fn.consultaTwitter.defaults = { usuario: "ReinaFdz", numTweets: 5 };
}
)(jQuery);
// Función onclick del botón Consultar.
function consultaTwitter()
{
var idUsuario = $("#idUsuario").val();
var numTweets = $("#numTweets").val();
$("#twitter").consultaTwitter({ usuario: idUsuario, numTweets: numTweets });
}
</script>
</head>
<body>
<div style="margin-bottom:20px;">
<span>Selecciona Usuario: </span>
<input id="idUsuario" type="text" value="ReinaFdz" />
<span>Número de tweets a mostrar: </span>
<input id="numTweets" type="text" value="5" size="2" maxlength="2" />
<input id="bConsultar" type="button" value="Consultar en Twitter"
onclick="javascript:consultaTwitter();" />
</div>
<div id="twitter"></div>
</body>
</html>
La salida es la siguiente:
Selecciona Usuario:
Número de tweets a mostrar:
No hay comentarios