Twitter en Blogger (insertar un widget)

De todas las formas que es posible insertar Twitter en el blog, la de El escaparate de Rosa es la más versatil y además, utiliza los códigos originales provistos por el mismo servicio. El resto, la parte gráfica es perfectamente configurable con CSS. Sin embargo, vamos a verlos todos para luego elegir qué es lo que más nos conviene.

Esos widgets originales podemos copiarlos directamente del sitio. Para Blogger, hay un apartado especial donde elegiremos la cantidad de mensajes a mostrar (1 | 20), el título, etc y luego, lo insertaremos directamente o copiamos y pegamos el código en un elemento HTML:

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/nombreusuario" id="twitter-link" style="display:block;text-align:right;">
follow me on Twitter
</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nombreusuario.json?callback=twitterCallback2&amp;count=2"></script>

El resultado, que no es más que una lista una serie de enlaces, se adaptará a las propiedades de la sidebar.

Otra opción que nos dan es crear un widget genérico y allí hay dos posibilidades, si usamos la opción HTML veremos que el código no difiere mucho; a decir verdad, es el mismo que el anterior sin el enlace "follow me on Twitter":

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

Si queremos, también podemos utilizar un widget hecho con Flash, ya sea individual o conteniendo todas las conversaciones. En ambos casos, elegiremos el color y algún detalle más y nos darán un código que insertamos en un elemento HTML.

Personalmente, sigo prefiriendo la primera posibilidad así que vamos a crear un elemento HTML y lo ubicamos donde queremos que aparezca en la página; en la sidebar, arriba de los posts, como parte del header, etc. Allí, escribimos lo siguiente:

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

Donde sólo debemos cambiar nombreusuario y colocar el texto que nos guste para enlazar a la página principal. Pero falta algo más; faltan los scripts. Siguiendo los consejos del mismo Twitter, no los vamos a poner en ese elemento sino en la plantilla, justo antes de </body> para asegurarnos que nuestra página se cargue aún cuando el servicio no esté funcionando. Entonces, la primera alternativa será colocar:

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

Hasta acá, estamos usando un poco de HTML y un script. Es este último el que lee los datos y luego los escribe en nuestro sitio. Como es público, ese script ha sido modificado varias veces; una de ellas es el que muestra Rosa en una de sus últimas entradas; allí, se reemplaza el script original por otro creado por init7 que tiene una particularidad; los enlaces internos de los mensajes no se muestran como textos sino como enlaces reales. La segunda alternativa será colocar ese script modificado

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

En ambos casos, lo que debemos hacer es cambiar nombreusuario por el nuestro y establecer la cantidad de mensajes a ser mostrados usando el valor de count=1.