Mostrar últimos tweets en el blog y configurar su aspecto

En el post anterior vimos los gadgets oficiales de Twitter, entre los que encontrábamos uno para mostrar tweets. Era dinámico, con actualización constante y muy mono, pero quizás en alguna ocasión necesitemos algo más sencilo y que podamos modificar para integrar totalmente con el estilo del blog.

Pues para eso, lo más básico es utilizar un JavaScript también de Twitter y adaptado para Blogger, que nos mostrará los últimos tweets de la cuenta que queramos mediante una lista simple. El estilo lo tomará del que tengamos definido por defecto para este tipo de elementos en nuestro blog.

<ul id="twitter_update_list"></ul>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/oloman.json?callback=twitterCallback2&amp;count=5" type="text/javascript"></script>

Este código puesto en la barra lateral o en una entrada, proporcionará los últimos tweets de la cuenta que se indique tras user_timeline. En el ejemplo está puesta la mía por lo que tenéis que sustituir ese usuario por el vuestro. El número tras count= indica el número de tweets a mostrar y también es modificable.

---

Con eso tenemos lo que pretendíamos, pero si lo que queremos es dar un formato particular a esa lista, lo podemos hacer añadiendo algo de estilo. Para ello podemos meter todo en un div con una clase y luego definir las propiedades correspondientes en nuestro css. Incluso se puede insertar directamente antes del código. Para ir viendo otras posibles modificaciones, también hemos añadido en el siguiente ejemplo una cabecera con nuestro nombre de usuario. Nada impide incluir también una imagen, un enlace, un botón de "seguir", etc.:

<style type="text/css">
.listatwitter {
margin:0px auto;
width:400px;
padding:20px;
background:#cccccc;
color:#000080;
text-align:left;
}
</style>
<div class="listatwitter">
<h2>
@oloman</h2>

<ul id="twitter_update_list"></ul>

</div>

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript">

</script>

<script src="http://twitter.com/statuses/user_timeline/singenio.json?callback=twitterCallback2&amp;count=5" type="text/javascript">

</script>

---

El script que hace todo esto es visible accediendo a su dirección http://twitter.com/javascripts/blogger.js. Si queremos cambiar algunas cosas más, todavía podemos hacerlo modificando ese código. Por ejemplo, un cambio sencillo y que reduce bastante su extensión, sería suprimir la fecha-enlace de cada tweet. En este caso hasta podremos incluirlo directamente en el gadget para no tener que tirar del de Twitter. Sólo tenemos que quitar previamente la llamada al script original y meterlo entre etiquetas script:

<style type="text/css">

.listatwitter {

margin:0px auto;

width:400px;

padding:20px;

background:#cccccc;

color:#000080;

text-align:left;

}

</style>

<div class="listatwitter"><a href="http://twitter.com/oloman" class="twitter-follow-button" data-lang="es">Follow @oloman</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

<ul id="twitter_update_list"></ul>

</div>

<script type="text/javascript">function twitterCallback2(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)://[^"s<>]*[^.,;'">:s<>)]!])/g, function(url) {
return '<a href="'+url+'">'+url+'</a>';
}).replace(/B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
statusHTML.push('<li><span>'+status+'</span></li>');
}
document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
</script>

<script src="http://twitter.com/statuses/user_timeline/oloman.json?callback=twitterCallback2&count=5" type="text/javascript">

</script>