Twitter trackbacks. Mostrar menciones a un post | Oloblogger Desde Junio de 2013 Twitter ha dejado de dar soporte a la versión 1 de su API que es la que usa este...

6 de septiembre de 2012

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):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

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:

<style type='text/css'>div.twitter-trackbacks{ } /* Contenedor general */
ul.ttw-inner{border:silver 1px solid;height:48px;padding:4px; overflow:hidden;margin:0;}
ul.ttw-inner li{float:left;margin:0;list-style-type:none;position:relative;}
/* Avatar autor */
ul.ttw-inner span.ttw-author-img{ display:block;width:48px;height:48px;margin:0 5px 0 0;overflow:hidden;left:0;position:absolute;}
/* Nombre autor */
ul.ttw-inner strong a{margin-right:5px;}
/* Cuerpo del tweet */
ul.ttw-inner span.ttw-body {display:block;margin-left:55px;}
/* Contenido del tweet */
ul.ttw-inner span.ttw-content{}
/* Enlaces: fecha, reply, retweet */
ul.ttw-inner span.ttw-meta {color:#999999;display:block;font-size:0.764em;margin:3px 0 0;}
ul.ttw-inner span.ttw-meta a{color:#999999;text-decoration:none;}
ul.ttw-inner span.ttw-meta a:hover{text-decoration:underline;}
/* Sólo enlace reply */
ul.ttw-inner a.ttw-reply { }
/* Sólo enlace retweet */
ul.ttw-inner a.ttw-retweet { }
/* Enlaces en el tweet */
ul.ttw-inner a.ttw-link { }
/* Enlaces a @usuarios */
ul.ttw-inner a.ttw-at { }
/* #hashtags */
ul.ttw-inner a.ttw-hashtag { }
</style>



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.

Compartir
Copy URL

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

follow us in feedly

11 comentarios :

  1. el futuro! muy bueno, nada mas por verme en el gadget lo twitee aunque no me veo.

    ResponderEliminar
  2. Eres EXCELENTE. Miles de gracias por tu blog.

    ResponderEliminar
  3. esta muy interesante el codigo.

    ResponderEliminar
  4. olo, alguna forma de hacerlo sin tanto javascript, quiza como se hace en disqus?
    saludos

    ResponderEliminar
    Respuestas
    1. No sé como lo hace Disqus, pero pienso que no porque ¿cómo vas a leer los datos de Twitter si no es con JavaScript? En cualquier caso seguramente habría que utilizar otro lenguaje similar.

      Eliminar
  5. Alucino con tus post. Son muy interesantes. Saludos desde Venezuela.

    ResponderEliminar
  6. la verdad que se aprende mucho aqi.e buscado sitio y me quedo con este post.... ay que aprender del que mas sabe

    ResponderEliminar
  7. Una pregunta: ¿Se pueden compartir imágenes en Twitter pero que aparezca ahí mismo, algo así como twitpic.com?

    Así como el botón de Pinterest, donde se pone la url de la página y de la imagen.

    Saludos

    ResponderEliminar