Muchos de los que tenemos un sitio/blog y estamos metidos en esto de la web 2.0 tenemos una cuenta en Twitter, la cual queremos integrar. A continuación mostaré como insertar la última actualización de Twitter en nuestro sitio usando JSON. Simplemente copiamos y pegamos el siguiente código:

<script type="text/javascript">
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 'menos de un minuto';
} else if(delta < 120) {
return 'hace un minuto';
} else if(delta < (45*60)) {
return (parseInt(delta / 60)).toString() + ' minutos atr&aacute;s';
} else if(delta < (90*60)) {
return 'hace una hora';
} else if(delta < (24*60*60)) {
return (parseInt(delta / 3600)).toString() + ' horas atr&aacute;s';
} else if(delta < (48*60*60)) {
return 'ayer';
} else {
return (parseInt(delta / 86400)).toString() + ' d&iacute;as atr&aacute;s';
}
}
 
function twitterCallback(obj) {
var id = obj[0].user.id;
document.getElementById('my_twitter_status').innerHTML = obj[0].text;
document.getElementById('my_twitter_status_time').innerHTML = relative_time(obj[0].created_at);
}
</script>
<span id="my_twitter_status"></span> &mdash;
<small><span id="my_twitter_status_time"></span></small>
 
<script type="text/javascript" xsrc="http://www.twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback&count=1"></script>

Modificamos USERNAME por nuestro nombre de usuario (o el que querramos mostrar) y listo. Y en la última línea modificamos “xsrc” por “src”. También se puede modificar la forma en que se muestra el tiempo que ha pasado desde ese twit. El texto se mostrará en el span con el ID my_twitter_status y el tiempo en my_twitter_status_time. Muy simple.

Si quieren también pueden mostrar las actualizaciones de sus amigos o del public timeline, pueden obtener la dirección para hacerlo en el API de Twitter. Un pequeño detalle que quiero recomendarles es el de agregar la línea del <script /> que cierra al final del código de su sitio, justo antes de </body> para hacer que esto sea lo último en cargar y que en caso de que Twitter esté caído (lo cual sucede a menudo) el resto de su sitio se cargue con normalidad.

• Miércoles 28 de Noviembre de 2007 a las 19:43 ~ Translate to english
• Categorías ~ Diseño
• 9 comentarios realizados ~ Enlaces a esta entrada
• Digg ~ Menéame ~ del.icio.us ~ Fresqui ~ Mister Wong
• Enlazar este post ~
• Enlace corto ~
• ← Deseo
• HTML por comida →