3, 2, 1... Buscando Tweets!! (buscador de usuarios de Twitter en Web)
¡Hola a tod@s (Hello World!)!
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:
La salida es la siguiente:
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