Cómo integrar los favoritos de Twitter en una página web

Aviso para navegantes:

Esta entrada del blog es antigua. La información que recoge este artículo está obsoleta. Hay una versión más reciente de cómo insertar tuits o cronologías de Twitter en tu web en este mismo rincón para escribir.

Hace unos meses expliqué en este mismo blog cómo insertar nuestros tuits en una página web sin mucha complicación, pero también sin tener que depender de los widgets facilitados por el propio Twitter. En esta nueva entrada explicaré algo parecido en dinámica pero diferente en detalles: Cómo integrar los tuits favoritos de un usuario.

En realidad el código es prácticamente el mismo que en el caso anterior, pero hay que estar atentos a las variaciones para que si, por ejemplo empleamos los dos fragmentos en la misma página, uno no pise uno al otro.

 

Código #1

<!--Para mostrar los favoritos de un usuario de Twitter-->
<div id="favs-twitter_update_list"></div>
<script src="scripts/favstw.js" type="text/javascript"></script>
<script src="http://api.twitter.com/1/favorites.json?callback=twitterCallback2&id=NombreUsuario&count=2" type="text/javascript"></script>

Desmenuzado por partes esto quiere decir:

1.

<!--Para mostrar los favoritos de un usuario de Twitter-->

No es más que el comentario que encabeza las subsiguientes líneas, para que, si alguna vez tenemos que editar el HTML, sepamos rápidamente qué estamos mirando.

2.

<div id="favs-twitter_update_list"></div>

Aquí creamos la división HTML en la que van a aparecer los tuits una vez eche a andar el invento. Si recordáis la entrada de los tweets artesanales, aquí la ID de la división era tan solo “twitter_update_list”. Para que no exista confusión, le cambiamos el nombre a “favs-twitter_update_list” y, ya con la ayuda de las hojas de estilo CSS, le aplicamos la forma, posición y tamaño que queramos.

3.

<script src="favstw.js" type="text/javascript"></script>

Ésta es la llamada al JS que nos va a dar la hora en la que se publicaron los tuits, el usuario que los publicó, etc. En la anterior entrada expliqué que podíamos hacer la llamada directamente al JavaScript alojado en la web de Twitter, pero que nos devolvería información en inglés. En esta ocasión, por eso mismo y por un par de variables que veremos un poco más adelante, es preferible que la llamada se haga a un archivo propio o que se incluya el código a capón. Revisad la entrada de los tweets artesanales para saber cómo.

4.

<script src="http://api.twitter.com/1/favorites.json?callback=twitterCallback2&id=NombreUsuario&count=2" type="text/javascript"></script>

Por último, le decimos a Twitter de dónde queremos sacar la información de los favoritos y en qué cantidad. Como siempre, sustituir “NombreUsuario” por el que queráis y el número de “count=2” por la cantidad que deseemos visualizar, sabiendo que el tope impuesto por Twitter es de 20 tuits.

 

Código #2 favstw.js

Este JavaScript es al que hemos invocado en el punto 3 y resulta imprescindible para que todo funcione.

function twitterCallback2(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)://[^"s<>]*[^.,;'">:s<>)]!])/g, function(url) {
return '<a href="'+url+'" target="_blank">'+url+'</a>';
}).replace(/B@([_a-z0-9]+)/ig, function(reply) {
return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
statusHTML.push('<li><a href="http://twitter.com/'+username+'" target="_blank">@'+username+'</a>: <span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'" target="_blank">'+relative_time(twitters[i].created_at)+'</a></li>');
}
document.getElementById('favs-twitter_update_list').innerHTML = statusHTML.join('');
}
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 'Ahora mismo';
} else if(delta < 120) {
return 'Hace un rato';
} else if(delta < (60*60)) {
return (parseInt(delta / 60)).toString() + ' minutos atr&aacute;s';
} else if(delta < (120*60)) {
return 'Hace 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 (parseInt(delta / 86400)).toString() + ' d&iacute;as atr&aacute;s';
}
}

Si tenéis ojo de halcón, habréis podido observar que dentro de este JS se nombra la ID de la división citada en el punto 2: “favs-twitter_update_list”. Si allí le cambiáis el nombre, hacedlo también aquí. Tal cual está escrita esta programación, vuestros favoritos se mostrarán de la siguiente manera:

Nombre del Usuario que publicó el tuit (con un enlace a su perfil de usuario) + Contenido del tuit + fecha de publicación en español (con un enlace al tuit original visto en Twitter).

Así se da crédito a los autores originales de cada mensaje publicado que hemos considerado merecedor de estar entre nuestros mejor valorados.

Y poco más, porque con esto deberíais poder ver en vuestro site aquellos tuits que marcáis como favoritos en Twitter y sólo os faltaría tirar de CSS para adaptarlos a vuestro entrono web. Hablando de lo cual, un apunte: los tuits que se inserten aparecerán listados con los atributos <ul> y <li> dentro del HTML, por lo tanto, acordaros de las listas en la hoja de estilos.

Descarga: Código fuente para insertar Favoritos en Twitter [zip, 2kb].

4 respuestas a «Cómo integrar los favoritos de Twitter en una página web»

    1. Lo cierto es que en Twitter los favoritos parecen los grandes olvidados, pero yo los valoro y -ahora que estoy dándole vueltas a mi web, algún día liberaré la nueva versión- he aprovechado para hacerles un hueco, ya que muchas veces marco cosas interesantes que pasan desapercibidas.

¡Comenta!

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.