sábado, 14 de julio de 2012

Lector de twitter con javascript y jquery




Hola para el día de hoy tuve que crear un pequeño lector de mis tweets a partir de javascript y html, aprovechando que twitter posee un gran numero de servicios JSON y XML que nos brindan información acerca de datos de busqueda y de timeline de los usuarios  use la funcion de ajax de jquery para extraerla a mi pagina web personal!

he aqui el codigo:


html:


 <div class="twitter_holder">  
      <div id="millertaker" class="twitter">  
      </div>  
      <div id="mill" class="blank">  
      </div>                      
 </div>  


javascrip:


se realiza el llamado al servicio del API de twitter a la URL: https://twitter.com/statuses/user_timeline/Millertaker.json?count=2 donde {Millertaker} es el nombre  de usuario que se ha de consultar , {json} el formato en que se recibe la información  y count  el numero de tweets del timeline que se quieren mostrar. Quiero hacer notar que para realizar peticiones a un use el dataType de la funcion ajax de jquery como 'jsonp' para no tener problemas por crossdomain durante esta (usualmente como error 400). 


la función callbackMillertaker recibe como parametro el JSON que contiene la información correspondiente al resultado de la consulta al servicio JSON de twitter, el formato de este esta descrito en el siguiente link 





 $.ajax({  
 url: 'https://twitter.com/statuses/user_timeline/Millertaker.json?count=2',  
  dataType: 'jsonp',  
  contentType: "application/json; charset=utf-8",  
  success: callbackMillertaker  
 });  
 function callbackMillertaker(data){  
 $.each(data, function(key, val) {  
         $('#millertaker').append('<span>'+val.text.parseURL().parseUsername().parseHashtag()+'</span>');  
         $('#mill').append( '<div class=marco><img src='+val.user.profile_image_url+' alt='+val.user.screen_name+' /></div>'+  
         '<span>@'+val.user.screen_name+'</span>' );  
  });  
 }  
 String.prototype.parseURL = function() {  
      return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&~\?\/.=]+/g, function(url) {  
           return url.link(url);  
      });  
 };  
 String.prototype.parseUsername = function() {  
      return this.replace(/[@]+[A-Za-z0-9-_]+/g, function(u) {  
           var username = u.replace("@","")  
           return u.link("http://twitter.com/"+username);  
      });  
 };  
 String.prototype.parseHashtag = function() {  
      return this.replace(/[#]+[A-Za-z0-9-_]+/g, function(t) {  
           var tag = t.replace("#","%23")  
           return t.link("http://search.twitter.com/search?q="+tag);  
      });  
 };  

Las funciones parse permiten parsear los hastags , links y menciones dentro del texto del tweet como links a las mismas.

No hay comentarios:

Publicar un comentario