Twitter trackbacks. Mostrar menciones a un post

Desde Junio de 2013 Twitter ha dejado de dar soporte a la versión 1 de su API que es la que usa este gadget, así que ya no funciona. Si sigues necesitando publicar tus últimos tweets de manera personalizada, aquí tienes otro sistema.

Este es un interesante cacharrito desarrollado por More Tech Tips y hecho con JavaScript aprovechando la API de Topsy.

Con él podemos incrustar en cualquier parte del blog los tweets que incluyen un enlace a la página que se está visualizando. El aspecto del gadget se puede personalizar y cada tweet mostrado incluye los típicos enlaces para respuestas y retweets.

Además, una serie de variables nos permitirán cambiar también la manera en que aparecen los tweets: en modo rotador con fade entre mensajes, múltiples tweets al mismo tiempo o incluso foto fija en plan lista.

El código del script está disponible para descargar en este enlace de Google Code en versión comprimida o normal, aunque la más extensa sólo pesa 6,4KB.

La forma de instalarlo es simple:

1. Añadir jQuery a la plantilla antes del </head> (si ya lo tenéis, este paso hay que saltarlo):

2. Dónde queráis que aparezcan los tweets se incluye una capa con clase twitter-trackbacks con sólo un texto que se verá mientras dure la carga y a continuación la llamada al script principal. Todo esto se podría poner en el post-header, post-footer o incluso como gadget en la barra lateral:

<div class='twitter-trackbacks'>loading..</div>
<script src='http://twitter-trackbacks-widget.googlecode.com/files/jquery.twittertrackbacks-1.0.min.js' type='text/javascript'></script>

Se ha incluido aquí la dirección directa de Google Code, pero conviene que descargueis el fichero .js y sustituyáis esa dirección por la vuestra para que todo quede bajo control.

Con eso ya podremos ver los trackbacks procedentes de Twitter pero sin ningún formato, por lo que mejor vamos a nuestro CSS e incluimos allí unas cuantas propiedades. Este es sólo un ejemplo y espero que con los comentarios sobre lo que hace cada clase podáis integrarlo sin problemas con la estética de vuestro blog:

Para cambiar el formato del artilugio podéis añadir unos parámetros dentro de la capa con clase twitter-trackbacks como se muestra a continuación. Este primero es para un rotador con 3 tweets por pasada:

<div class='twitter-trackbacks' options='{
url:"http://www.oloblogger.com/2012/09/twitter-trackbacks.html"
,n:9
,show_n:3
,stay_time:8000
,animate:"height"
,inf_only:1
,inf_tip:1
}'>loading..</div>

url: ver tweets de una página concreta (por defecto la visitada)
n: número de tweets máximos a cargar
show_n: número de tweets por tanda (con 0 no habrá transicion y mostrará una lista fija)
stay_time: pausa entre cada tanda en milisegundos
animate: height hace la transición más rápida, disminuyendo el fade
inf_only: 1 para mostrar sólo tweets de usuarios con muchos seguidores
inf_tip: 1 para mostrar con un mensaje emergente el nivel de influencia del usuario

Si usáis esta variante no olvidéis incrementar el height de ul.ttw-inner (174px para tres tweets) y ajustar también ul.ttw-inner li con algún margen, altura y sobre todo un overflow:hidden adicional. Ejemplo de esa última clase para el caso de triple tweet:

ul.ttw-inner li {
border:silver 1px solid;
float:left;ul.ttw-inner li
margin:1px 0 1px 0;
padding:2px 2px 2px 2px;
list-style-type:none;
position:relative;
height:50px;
overflow:hidden;
width:100%;
}

Si todo ha salido bien y sobre todo, si esta entrada es mencionada en algún tweet, a continuación podréis ver cómo podría quedar la cosa:

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Copy URL

Y muchos más artículos interesantes si nos sigues en...