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ás';
} else if(delta < (90*60)) {
return 'hace una hora';
} else if(delta < (24*60*60)) {
return (parseInt(delta / 3600)).toString() + ' horas atrás';
} else if(delta < (48*60*60)) {
return 'ayer';
} else {
return (parseInt(delta / 86400)).toString() + ' días atrá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> —
<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.








1 — jordi
30/11/2007 11:47 am — ResponderEstoy mirando el código porque hay algo que falla y no consigo ver que es, si encuentro algo te aviso.
2 — Horacio Bella
30/11/2007 11:52 am — ResponderJordi: Hay que cambiar XSRC de la última línea por SRC. ¿Es eso?
3 — jordi
30/11/2007 12:09 pm — ResponderJajaja, me podrías haber tirado dos días mirándolo… ese trozo de código ni lo miraba, me estaba volviendo loco ya después de haber comprobado mil veces que entrabas bien al array.
Buen trabajo
4 — Horacio Bella
30/11/2007 12:11 pm — ResponderPerdón ^^
Se me había olvidado mencionar ese detalle.
Creo que voy a tener que buscar otra forma de mostrar código en este blog.
5 — Mostrar Twitter en cualquier web
30/11/2007 08:45 pm — Responder[...] Esta mañana me había decidido a ponerme a toquetear el API de Twitter pero en cuanto he ido ha buscar un poco de información me han informado de este post en Gran Impetu. [...]
6 — Víctor
04/12/2007 12:37 pm — ResponderExtremadamente útil horacio. Muchisimas gracias una vez mas.
7 — apostoflant
15/02/2008 10:07 am — ResponderHola,
He provado este código en el panel de agregador de HTML/javascript de blogger y no funciona de ninguna manera… saben porqué?
Gracias!
8 — Horacio Bella
15/02/2008 10:10 am — ResponderApostoflant: Creo que con Blogger no vas a poder, vas a tener que usar el widget que proveen desde Twitter.
9 — JMGH
18/02/2008 08:38 pm — ResponderUna pregunta ¿se podría hacer con este script que mostrara una cantidad concreta de entradas?
Es que a mi me interesaría mostrar en una página más de una pero no se como hacerlo :O
10 — Jorge
15/06/2009 06:35 pm — ResponderSi funciona solo hay que remplazar — por una palabra o simbolo