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:

<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:

3, 2, 1... Buscando Tweets!! (buscador de usuarios de Twitter en Web)

No hay comentarios