martes, 8 de diciembre de 2015

Gadget para mostrar los últimos tweets de manera rotativa

9:46    

Gadget para mostrar los últimos tweets de manera rotativa

Nuevo gadget Twitter
Bueno, lo prometido es deuda y aunque no siempre puedo cumplir mis promesas esta vez va a ser que sí. Aquí tenéis aquel gadget para mostrar tweets que publiqué en anteriores entradas en un par de versiones (1) (2) y que por el cambio de API de Twitter dejó de funcionar. 

Para que todo vuelva por sus fueros he echado mano de aquel código de Jason Mayes que vimos al principio de verano y que nos permitía leer el feed de Twitter y mostrarlo adaptado a nuestras necesidades, aunque para simplificar la instalación lo he alojado en Google Code y así sólo hay que hacer una llamada para que funcione.

Adicionalmente lo he combinado con el truquillo del slider jQuery más sencillo y entre una cosa y otra obtenemos un rotador de tweets que podemos personalizar tanto en contenido como en aspecto.


Y aquí lo tenemos con un primer estilo, el mismo que ya vimos y que muchos tenéis pero que no os funciona. Bueno, que no os funcionaba ;)


El código, en el caso de Blogger, hay que incluirlo dentro de un gadget tipo HTML/JavaScript y es el siguiente. Si ya tenéis jQuery en vuestra plantilla la primera línea la tenéis que suprimir:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://olobloggerblog.googlecode.com/files/Twitter-post-fetcher-7.js"></script>
<script type="text/javascript">
twitterFetcher.fetch('347086380704342017', 'rotatweet', 5, true, false, false);
$(document).ready(function() {
setInterval(function(){
$('#rotatweet ul li:first-child').fadeOut(0)
.next('li').fadeIn(1000)
.end().appendTo('#rotatweet ul');}, 4000);
});
</script>

<div id="rotatweet"></div>

<style>
#rotatweet {
position:relative;
width:335px;
height:94px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuRJrlwbdV_j3yYJrYROgbLyai18nkfWyxn3LrZIbkCGaqVSIVNDS4Tcnsvg7mxNjJD3RsN2FVjvJoaJNF4GKDUDBQTrhQroYNw6Z5YMHNoXmORBiIauLUP56qdzDW-qH6DZS7R-GsF-M/s1600/twitter.png);
}
#rotatweet ul {
position:absolute;
top:12px;
left:90px;
width: 232px;
margin:0;
padding:0;
font-size: 12px;
}
#rotatweet ul li {
list-style: none;
margin: 0;
padding: 0; 
display: none;
}
</style>

¿Y qué tenemos que cambiar de ahí? Pues casi nada. Sólo la ID correspondiente a vuestro propio gadget de Twitter porque el que veis es el mío. Ahora si no se genera desde la página oficial, pues no funcionará nada. Es el número 347086380704342017 que veis en el código. 

La forma de obtenerlo está detallada en Mostrar tweets tras el fin de la API 1 de Twitter, en el apartado 2. Relacionar con el gadget oficial, pero básicamente se trata de acceder a la página de gadgets Twitter, crear uno que muestre el tipo de datos que deseamos (cronología, favoritos, etc.) y copiar la identificación que se le asigna.

Otra cosa que se puede cambiar es el número de tweets a mostrar. Es ese tercer parámetro de la función twitterFetcher.fecth, o lo que es lo mismo, ese número 5.

Por último, el intervalo de tiempo entre tweets es en el ejemplo el parámetro 4000 e indica la demora en milisegundos.

Y para conseguir otro estilo distinto pues sólo se trata de ajustar la parte CSS. Este sería otro ejemplo de aspecto utilizando otras reglas de estilo. En concreto las que vienen tras la demo.


#rotatweet {
max-width: 500px;
height: 72px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSoFvsryQuyO9kdNMqt-ObzbcuYT0BtjMyZhNVFnv_pYSFYgJpSnDnnkXdLti-QGnMTx0MPHC3Ow8lE-bXnZtyMTX8EwSQYrLDrxj66XyClKWZlQZn9B6vfyWwecFATw0sKx3KwxyPJ1Q/s48/twitter-logo-180.png) no-repeat top left;
}
#rotatweet ul {
margin: 0;
padding: 8px 0 0 52px;
font-size: 12px;
-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;
}
#rotatweet ul li {
list-style: none ;
margin: 0;
padding: 0;
display: none;
}

Nota: Para no tirar todos del mismo fichero y que un día se le inflen las narices a Google Code y nos deje tirados bloqueándolo, lo mejor sería que descargarais el fichero Twitter-post-fetcher-7.js, lo alojarais bajo vuestro propio control (en el mismo Google Code o Dropbox, por ejemplo) y que sustituyerais la dirección que puse por la vuestra.
¿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 puedesimprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.