Poco a poco, ya que el tiempo no me da para más, estoy haciendo un nuevo diseño para este blog. Una de las cosas que quiero añadir es mi hilo de twitter pero haciéndolo a mi manera...
Por suerte Twitter en su API te da la posibilidad de cargar sus contenidos con jsonp, un formato que nos permite cargar las cosas con ajax cross-domain. Las ventajas de cargar así tus tweets son claras:
- El contenido no está realmente en tu web, con lo que hay menos links en el html hacia páginas externas. Eso nos ahorra algún problemilla en SEO, ya que los plugins de twitter integrados en wordpress (por ejemplo) no suelen añadir el nofollow a todos los links.
- El proceso de petición de tu feed lo hace el navegador de cada usuario que entra a tu web, con lo que aliviamos de carga un poco a nuestro servidor.
El problema es que como no me gustaba ninguno de los plugins de jquery que he visto, he tenido que fabricarme un script con jquery desde cero. Pero bueno, ha sido más rápido de lo que esperaba y ya lo tengo listo. Lo dejo aquí tanto como apunte de cara al futuro como para que cualquiera que trabaje un poco en desarrollo web pueda tomarlo como partida de su propia integración de twitter vía jquery. El código no está muy comentado pero no va a ser difcil para nadie que entienda un poco de jquery como adaptar el código a su gusto.
$(document).ready(function(){ // de que usuario es el feed? var twitterUser = "ikhuerta"; // cuantos tweets hay que mostrar? var tweets = 5; // lanzamos la llamada ajax cross-domain... $.getJSON("http://twitter.com/status/user_timeline/"+twitterUser+".json?count=" + (tweets*2) +"&callback=?",function(json){ html = "<ul class='myTweets'>"; var urlregex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi; var userregex = /(\@([-A-Z0-9+&\/%?=~_|!:,.;]*))/gi; var hashtagregex = /(\#([-A-Z0-9+&\/%?=~_|!:,.;]*))/gi; var count = 0; for (i=0;i<json.length;i++) { if (json[i].in_reply_to_screen_name==null) { html += "<li><p class='text'>" + json[i].text.replace(urlregex,"<a class='url' href='$1' rel='nofollow'>$1</a>").replace(userregex,"<a class='user' href='http://twitter.com/$2' rel='nofollow'>$1</a>").replace(hashtagregex,"<a class='hashtag' href='http://twitter.com/#search?q=$1' rel='nofollow'>$1</a>") + "</p>"; html += "<p><a class="rt" href='http://twitter.com/home?status=RT @"+twitterUser+" "+json[i].text+"' rel='nofollow'>[ReTweet]</a> "; html += "<a class="reply" href='http://twitter.com/home?status=@"+twitterUser+" &in_reply_to_status_id=" + json[i].id + "&in_reply_to="+twitterUser+"' rel='nofollow'>[Responder]</a></p></li>"; count++; } if (count >= tweets) break; } html += "</ul>"; // incluimos el html dentro del div myTwitter $("#myTwitter").append(html); }) });
Esto incluirá una etiqueta "ul" con clase "myTweets" dentro del div con id "myTwitter". Así que simplemente tendremos que incluir...
<div id="myTwitter"></div>
...en alguna parte de nuestra página para ver dentro nuestros Feeds.
De cara al css dispondremos de las siguientes reglas que podemos definir para darle el estilo que queramos a los tweets:
ul.myTweets {/* Estilo del bloque */} ul.myTweets li {/* Estilo de cada elemento*/} ul.myTweets li p.text {/* Estilo del text del tweet*/} ul.myTweets li p.text a.ulr {/* Estilo de los links dentro del tweet*/} ul.myTweets li p.text a.user {/* Estilo los links hacia usuarios (@) dentro del tweet*/} ul.myTweets li p.text a.hashtag {/* Estilo los links hacia hashtags (#) dentro del tweet*/} ul.myTweets li a.rt {/* Estilo del link para retweetear*/} ul.myTweets li a.reply {/* Estilo del link para responder */}
Espero que en breve podáis verlo en funcionamiento en este mismo blog.
Saludos!