Cómo insertar tweets en tu web artesanalmente

Utilizar el widget que nos propone Twitter para que nuestros tweets se vean en cualquier web está bien y es sencillo para quien no quiera complicarse. Pero cuando queremos que nuestras palabras aparezcan a nuestra manera, tenemos que buscarnos la vida por otra parte.

He ido dando tumbos hasta conseguir las líneas de código, que voy a explicar aquí, para lograr estas 3 cosas:

1. Poner los tweets con un estilo propio.
2. Hacer que aparezcan también los retweets.
3. Que sólo se vean las 2 últimas actualizaciones.

Todo esto es personalizable, por supuesto. Cada estilo es el que uno le quiera dar, los retweets no tienen porqué aparecer y se pueden mostrar todas los mensajes que se quieran (hasta un máximo de 20, por restricciones del propio Twitter). En fin… al meollo: El código -que debéis pegar allí donde queráis que vayan vuestros tweets- dice así:

 
Código

<!--Para mostrar los mensajes de Twitter, retweets incluidos.-->
<div id="twitter_update_list"></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script  src="http://api.twitter.com/1/statuses/user_timeline.json?callback=twitterCallback2&screen_name=TuUsuario&count=2&include_rts=true"  type="text/javascript"></script>

Ahora os explico lo que es cada cosa y cómo mejorarlo un poco.

1.

<!--Para mostrar los mensajes de Twitter, retweets incluidos.-->

Es un comentario HTML, no necesario para que funcione el invento, pero sí para ayudados a encontrarlo en un futuro si queréis cambiar algo.

2.

<div id="twitter_update_list"></div>

Es el hueco que hacéis en el HTML para que se vean los tweets. Cuidado con cambiarle el nombre, que dejará de funcionar. Usad el mismo «twitter_update_list» en vuestra hoja de estilo (CSS) para las propiedades que queráis darle a la apariencia visual.

3.

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

Esto es una llamada a un archivo colgado en los servidores de Twitter que es el que hace que funcione la cosa. Y ésta es, también, la parte mejorable, porque, aunque tal cual lo vemos es correcto, el archivo al que llama está en inglés y eso quiere decir que, cuando nuestros tweets aparezcan, a su lado veremos que fueron escritos «a long, long time ago» en inglés. Si os apetece que aparezca en español, es tan sencillo como utilizar el siguiente código en su lugar:

<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> <a  style="font-size:85%"  href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}

function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);

  if (delta < 60) {
    return 'Ahora mismo';
  } else if(delta < 120) {
    return 'Hace un rato';
  } else if(delta < (60*60)) {
    return (parseInt(delta / 60)).toString() + ' minutos atr&aacute;s';
  } else if(delta < (120*60)) {
    return 'Hace una hora';
  } else if(delta < (24*60*60)) {
    return 'Hace ' + (parseInt(delta / 3600)).toString() + ' horas';
  } else if(delta < (48*60*60)) {
    return 'Ayer';
  } else {
    return (parseInt(delta / 86400)).toString() + ' d&iacute;as atr&aacute;s';
  }
}
</script>

Lo que hay en español es lo que se puede modificar, el resto, mejor no tocarlo, y con «utilizar en su lugar» he querido decir: «quitar la línea de antes y poner esto a capón. Si bien, al igual que está el archivo de Twitter alojado en sus servidores, podéis meter este código (sin la primera ni la última línea) en un .js, colgarlo en vuestro host -en caso de tener uno- y enlazarlo.

Para rematar, os explico la última de las cuatro líneas. ¡Atentos a la explicación! Hay cosas que modificar para que funcione.

4.

<script  src="http://api.twitter.com/1/statuses/user_timeline.json?callback=twitterCallback2&screen_name=TuUsuario&count=2&include_rts=true"  type="text/javascript"></script>

Aquí es donde le indicamos a Twitter los tweets de quién queremos que aparezcan -cambiad TuUsuario, por el vuestro de verdad-; el número de tweets que queremos que aparezcan -cambiad el 2 de &count=2 por el número que sea entre 1 y 20- y, por último, le indicamos si queremos retweets –&include_rts=true-. Si no queréis retweets, poned false en lugar de true o borrad todo eso ya que por defecto están desactivados.

 
¿Se pueden hacer más filigranas aún? 

De nuevo, por supuesto. Acudid a la ayuda de Twitter y veréis cómo (link actualizado el 20/06/11, parece que el anterior dejó de funcionar).

 
EXTRA: Apuntes varios para Blogger

Para meter este código en Blogger, lo podéis hacer en Diseño > Añadir un Gadget > HTML/Javascript. En el cuadro que se abre, pegáis el código con vuestras modificaciones y listo.

Si necesitáis usar imágenes para adornar el estilo CSS, podéis recurrir Picasa para almacenarlas, ya que suele ser también ahí donde se guardan por defecto las fotos que se emplean para las entradas del blog.

Por otra parte, según afirman en la ayuda de Blogger -copio y pego…- “en el blog publicado, todos los códigos <b:section> y <b:widget> se sustituirán por códigos <div>, que tendrán un ID especificado. De modo que, por ejemplo, puedes hacer referencia a div.header o div.myList en tu CSS si lo deseas”, por lo que para hacer referencia al estilo de Twitter en el CSS, cuando lo modifiquéis en Blogger, acordaros de renombrarlo como div#twitter_update_list.