Twitter en Blogger (personalizar el widget)

Si bien podemos insertar el widget de Twitter tal y como nos lo ofrece el servicio, también podemos modificarlo para ampliar un poco las posibilidades.

En mi caso, he hecho eso y he cambiado pequeñas cosas: puse los textos en español, eliminé ciertos códigos HTML innecesarios, agregué otros, coloqué clases CSS en cada etiqueta para poder personalizarlo, etc.

La primera parte no difiere de los ejemplos anteriores; creamos un elemento HTML y lo ubicamos donde queremos que aparezca en la página. Allí, escribimos lo siguiente:

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<a class="linkTwitter" href="http://twitter.com/nombreusuario">texto</a>
</div>

Donde debemos recordar que hay que cambiar nombreusuario y colocar el texto que nos guste para enlazar a la página principal.

Luego, agregaremos los scripts justo antes de </body> pero, en lugar de enlazar blogger.js, lo agregaremos manualmente en la plantilla y lo modificaremos a gusto.

<script type='text/javascript'>
//<![CDATA[
// esta es la función que lee Twitter y escribe los mensajes en el blog
function twitterCallback2(obj) {
var wwwregular = /\bwww\.\w.\w/ig;
var regular = /((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g;
var atregular = /\B@([_a-z0-9]+)/ig;
var twitters = obj;
var statusHTML = "";
var username = "";

for (var i=0; i<twitters.length; i++){
var posttext = "";
posttext = twitters[i].text.replace(wwwregular, 'http://$&');

// reemplaza los enlaces tipo  http://tinyurl.com/000000 por un texto
posttext = posttext.replace(regular, '[ <a class="linkEnlaces" href="$1" title="$1">VER enlace</a> ]');

// cuando el mensaje es una respuesta, el nombre es un enlace
posttext = posttext.replace(atregular, '@<a class="linkUsuario" href="http://twitter.com/$1">$1</a>');
username = twitters[i].user.screen_name

// se escribe el item de la lista con el mensaje y se termina indicando el tiempo transcurrido
statusHTML += ('<li>'+posttext+' <span class="linkTiempo"><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'" title="Ver el mensaje en Twitter">'+relative_time(twitters[i].created_at)+'</a></span></li>')
}

document.getElementById('twitter_update_list').innerHTML = statusHTML;
}

// esta función calcula el tiempo transcurrido desde la publicación del mensaje y escribe un texto
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);
// los textos a mostrar varían de acuerdo al tiempo transcurrido
if (delta < 60) {
return 'reciencito'; // menos de un minuto
} else if(delta < 120) {
return 'hace casi un minuto'; // hace un minuto
} else if(delta < (60*60)) {
return 'hace unos ' + (parseInt(delta / 60)).toString() + ' minutos'; // menos de una hora
} else if(delta < (120*60)) {
return 'hace casi una hora'; // hace una hora
} else if(delta < (24*60*60)) {
return (parseInt(delta / 3600)).toString() + ' horas atrás'; // menos de 24 horas
} else if(delta < (48*60*60)) {
return 'ayer'; // más de 24 horas
} else {
return 'esto fue hace ' + (parseInt(delta / 86400)).toString() + ' días'; // más de 48 horas
}
}
//]]>
</script>

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

Como cada etiqueta tiene una clase, las posibilidades de personalizarlo son infinitas. Para hacerlo, agregamos el estilo CSS en la plantilla, antes de </b:skin> o justo al inicio del elemento HTML donde colocamos el código. Esta sería una de las posibilidades:

<style type="text/css">

/* este es el DIV contenedor donde se mostrará el widget */
#twitter_div {
background: transparent url(URL_imagenOptativa) no-repeat top left; /* una imagen o color de fondo */
border: 1px solid #valor; /* puede tener o no tener un borde */
color: #valor; /* es el color del texto de los mensajes */
overflow-x: hidden; /* para evitar que algunos textos se "salgan" del DIV */
}

/* es la lista con mensajes y conviene eliminar posibles márgenes */
ul#twitter_update_list {
margin: 0;
padding: 0;
}

/* cada item de la lista (los mensajes en si mismos) */
ul#twitter_update_list li {
list-style-type: none;
list-style-image: url();
margin: 0;
padding: 5px 10px; /* separarlo de los bordes del contenedor */
}

/* es el enlace al nombre de un usuario (si existe) */
a.linkUsuario {color:#valor;}
a.linkUsuario:hover {color: #valor;} /* efecto rollover  */

/* son los enlaces interiores de los mensajes con un ícono identificatorio */
a.linkEnlaces {
background: transparent url(URL_imagenIcono) no-repeat right 50%;
color: #valor;
padding-right: 12px; /* la separación depende del ancho de la imagen */
}
a.linkEnlaces:hover {color: #valor;} /* efecto rollover  */

/* es el bloque que contendrá el enlace que muestra la antigüedad del mensaje */
.linkTiempo {
display: block; /* se fuerza a que sea mostraado en una nueva línea */
text-align: right; /* y a la derecha */
}
.linkTiempo a { /* el enlace en si mismo con una imagen de fondo */
background: transparent url(URL_imagen) no-repeat scroll left 50%;
color: #valor;
padding-left: 12px; /* la separación depende del ancho de la imagen */
}
.linkTiempo a:hover {color:#valor;} /* efecto rollover  */

/* es el enlace inferior que lleva al home de nuestro Twitter */
a.linkTwitter {
color: #valor;
display: block;
line-height: 48px; /* es uan forma de darle altura y centrar el texto */
margin: 10px 0 0 0; /* separado del mensaje superior */
padding-right: 10px; /* separado del borde derecho */
text-align: right; /* alineado a la derecha */
}
a.linkTwitter:hover {color:#valor;} /* efecto rollover  */

</style>

El script tiene muchas posibilidades y con un poco de paciencia puede modificarse para contemplar otras opciones. Como lo que lee es el texto del mensaje, basta establecer una serie de condiciones para filtralos y mostrarlos de diferentes formas.

Podríamos ocultar algunos (por ejemplo las respuestas que comienzan con arroba) o si usamos TweeterFeed para enviar los posts publicados, podemos detectarlo estableciendo un texto específico antes del título.

Una función extra que podemos agregar es mostrar un mensaje por vez pero leer varios y luego, navegar por ellos de manera similar a lo que hace el widget de Flash y en todos los casos, para personalizarlo usamos CSS y lo mejor es que cada elemento HTML tenga definida una clase.