Agregar Twitter al blog usando Scriptaculous

Ajax Twitter es un script que utiliza Prototype + Scriptaculous para mostrar nuestros últimos tweets en el blog.

El resultado es mucho menos personalizable que el descripto anteriormente pero eso lo hace también muy simple de implementar.

Por supuesto, necesitamos tener las librerías cargadas y eso lo podemos hacer utilizando las AJAX Libraries API de Google que agregamos antes de </head>:

<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;prototype&quot;, "1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, "1.8.2&quot;);
</script>

Luego, necesitamos el script en si mismo y es muy simple, podemos descargarlo dentro de un ZIP desde el mismo sitio o bien copiar y pegar el contenido del archivo Ajax.js , debajo de lo anterior.

<script type='text/javascript'>
//<![CDATA[
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 'hace menos de un minuto';
} else if (delta < 120) {
return 'hace un minuto';
} else if (delta < (60 * 60)) {
return 'hace ' + (parseInt(delta / 60)).toString() + ' minutos';
} else if (delta < (120 * 60)) {
return 'hace casi 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 'hace ' + (parseInt(delta / 86400)).toString() + ' dias';
}
}

function twitterCallback2(twitters) {
var statusHTML = "";
for (var i = 0; i < twitters.length; i++) {
statusHTML += '<li>' + twitters[i].text + '&nbsp;<small>(' + relative_time(twitters[i].created_at) + ')</small></li>';
}
$('list-twitter').innerHTML = '<ul>' + statusHTML + '</ul>';
$('spinner-twitter').hide();
$('list-twitter').slideDown({ duration: 2 });
}
//]]>
</script>

Ahora, supongamos que vamos a mostrarlo en un elemento HTML, crearemos uno y colocamos esto:

<div id="twitter">
<h6> NUESTRO TíTULO </h6>
<p id="spinner-twitter"> ... cargando ... </p>
<div id="list-twitter"></div>
</div>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nuestroNombre.json?callback=twitterCallback2&count=5"></script>

Allí, sólo debemos cambiar el dato nuestroNombre.

Faltaría un poco de CSS para personalizarlo. Elo también lo podemos poner antes de </head>:

<style type='text/css'>
#twitter { /* el rectángulo que contendrá todo */
-moz-border-radius: 10px;
background-color: #333;
border: 2px solid #444;
color: #CCC;
font-family: Helvetica,
font-size; 13px;
height: 100%;
margin: 0 auto;
padding: 10px;
width: 250px;
}
#twitter h6 { /* el título */
color: #EEE;
font-family: Century Gothic;
font-size: 22px;
font-weight: normal;
margin: 0;
text-align: center;
}
#list-twitter ul { /* la lista con los tweets */
margin:0;
}
#list-twitter li { /* cada item de esa lista */
background-color: #444;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
list-style-type: none;
margin: 5px 0;
padding: 5px;
}
#list-twitter li:first-child { /* el primer item de esa lista */
background-color: #000;
border-bottom: 1px solid #444;
border-top: 1px solid #444;
}
#list-twitter small { /* la fecha de publicación */
color: #999;
display: block;
font-family: Tahoma;
font-size: 10px;
padding: 2px 10px;
text-align: right;
}
</style>