Gadget para mostrar los últimos tweets de manera rotativa | Oloblogger 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 ...

4 de septiembre de 2013

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/AVvXsEgN4UvSvfZFdRig1nh5jqTtJG6JMKXEHKVAzzSvxocNK_wfitt1wkKmetewEVSPZkdwkEyTboKRz6BbTvACC9gN0f5alcXjd5wO85AoUkEghlzFN72Z8YnDOoSFDaeqvS_X0L5xy3HQJ_w/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/AVvXsEj1llJi3U_0-7L69IMG6sqD3Qaco788GTYuoYU9dOxthJck_vieNa8opy_hCpBSadHWtgxtj0Cxk9adOQmoNgqDyne6W52Z0_QrKLRmCivCieNNW0QHxJnMz79AE7ENxjXbFk_BnUa66W4/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 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

47 comentarios :

  1. No me funciona, ni este ni el anterior, simplemente no aparece nada de nada, es una lastima, está muy bnito T__T

    ResponderEliminar
    Respuestas
    1. Miento, ya lo logré, solo le puse etiqueta de cierre a los scripts.. cosas rara... pero funcionó

      Eliminar
  2. Pues no veo yo donde estan los cierres de los scrips O.o
    Y no he conseguido que me funcione,, buahhhhhhhhhhhh

    ResponderEliminar
  3. Lo he implementado y queda estupendo.
    Genial como todo lo que haces,Olo
    Un saludo

    ResponderEliminar
  4. No conseguimos hacerlo funcionar ninguno de los dos.. es una pena porque esta genial.

    ResponderEliminar
  5. Perickko y NotodoesABC, probad a cambiar el final de los dos primeros scripts. Yo los puse con la barra de cierre dentro ".../>". En lugar de eso cerrad con otra etiqueta script y la barra en ella. Así: "...></script>"

    Confirmarme si os funciona por favor, así actualizo el post.

    ResponderEliminar
    Respuestas
    1. perfecto, asi, si funcionaaaaa:

      Eliminar
    2. aunque ahora me sale una cosa muy rara, espera voy a ver si puedo hacer un video, por que no se explicarlo

      Eliminar
    3. Ya sé que lo arreglaste. Para otra vez mejor concentra tus comentarios aquí, que me cuesta mucho atenderos por varios canales ;)

      Eliminar
  6. excelente si funciono pero tuve que agregar la linea de cierre

    ResponderEliminar
  7. gracias hace tiempo que espera esto.

    ResponderEliminar
  8. Muy bueno pero se puede hacer asi como cuando buscan una palabra? y que aparescan los users que postean esa palabra

    ResponderEliminar
    Respuestas
    1. Funciona con todo tipo de gadgets que puedas crear desde la página oficial de Twitter y ese creo que se puede. Sólo tienes que crearlo y luego conseguir su identificación.

      Eliminar
  9. Funciona perfecto, lo único que me inhabilita el SlideShow...

    ¿Alguien sabe porque?

    Gracias de antemano

    ResponderEliminar
  10. Perdon, doy algo mas de info.

    Estoy utilizando WordPress, mas concretamente la versión 3.4.2.

    Tengo un slideshow y desde que he metido el widget planteado en esta página, el slideshow no pasa las diapostivas.

    Por favor, alguien que me pueda dar una solución??

    Muchísimas gracias de antemano.

    ResponderEliminar
    Respuestas
    1. ¿Puede ser que ya tuvieras la librería jQuery y que al copiar el código este no has quitado la primera línea? Si es así, el tener dos versiones distintas de jQuery te puede generar conflictos.

      Eliminar
  11. Muy bueno paisano, ha quedado genial ;)

    ResponderEliminar
  12. mi blog wwwjennydelafuenteblogspot.com
    Voy a diseño, seteo todos los colores, y no pasa nada. .Solo quiero cambiar color de fondo eso nada mas. Voy a diseño y nada. Que hago?

    ResponderEliminar
    Respuestas
    1. Exactamente dónde vas ¿A Diseño del Escritorio o al Diseñador de plantillas?

      Eliminar
  13. Como le puedo poner un target _blank a un hashtag(#)??

    ResponderEliminar
  14. ya resolvi la duda por si les sirve aqui esta

    $(document).ready(function(){
    $('#rotatweet a').attr('target', '_blank');
    });

    // not using jquery
    window.onload = function(){
    var anchors = document.getElementById('rotatweet').getElementsByTagName('a');
    for (var i=0; i<anchors.length; i++){
    anchors[i].setAttribute('target', '_blank');
    }
    }

    ResponderEliminar
    Respuestas
    1. Pefecto Manuel. Sólo añadir para los que vengan detrás, que el primer trozo sería usando jQuery y el segundo sin necesidad de esa librería.

      Eliminar
  15. Vale, pero intento aplicar el plugin de marquee para crear una especie de cintillo con los últimos tweets (http://jquery.aamirafridi.com/jquerymarquee/), pero no eh podido, alguien me puede colaborar?

    ResponderEliminar
    Respuestas
    1. Eso requeriría de un post completo Daniel, pero si entiendes un poco de código, he visto que ese plugin lo que hace es tomar los DIV que tengan una clase determinada y presentarlos de esa manera. Posiblemente si cambias los DIV por LI y las clases por las que salen con este gadget, podría llegar a funcionar, aunque no estoy seguro. Quizás haya que hacer más cambios.

      Eliminar
  16. Hola-hola!
    Quisiera saber como hago para que la imagen del pajarillo de twitter redireccione a la pagina de mi twitter.
    Gracias.

    ResponderEliminar
  17. Pues no es fácil de cambiar ni de explicar, pues el script carga todo el contenido de #rotatweet y por eso, el enlace habría que generarlo también desde dicho script.

    ResponderEliminar
  18. No logro comprender lo que indicas más arriba sobre el código de cierre de script, podrías explicarlo mejor, pues no logro visualizar nada, sólo veo la imagen de fondo y no aparecen los twits rotando...

    ResponderEliminar
  19. Quiero integrarlo en una pagina normal de extensión .html como iframe, se puede hacer eso?

    ResponderEliminar
    Respuestas
    1. No veo la necesidad de complicar la cosa, pero sí. Primero tendrías que meter el gadget en una página html cualquiera (si es Blogger, una página estática) y luego crear el iframe llamando a esa dirección antes creada.

      Sobre lo del cierre del script, no te preocupes por ese comentario porque fue anterior a modificar el código en la entrada. Sólo hazlo tal y como se explica.

      Eliminar
  20. No he logrado hacerlo funcionar en una web html, aun funciona o estare haciendo algo mal? Podrias darme una mano? Gracias

    ResponderEliminar
    Respuestas
    1. Me resulta imposible saber si haces algo mal Reinaldo, pero sobre la pregunta de si sigue funcionando... ¿en esta entrada lo está haciendo, no?

      Por otra parte, el código que aquí puse no tienen ninguna adaptación particular a Blogger. Sólo es HTML, CSS y JavaScript. Lo único importante es el orden de carga: Twitter-post-fetcher-7.js tiene que cargarse antes que los parámetros que yo muestro en el ejemplo justo después.

      Por cierto, otra recomendación es que no tires de ese mismo fichero (Twitter-post-fetcher-7.js), sino que lo descargues y utilices tú mismo. Ese podría ser el problema porque Google Code va a dejar de dar soporte.

      Eliminar
  21. Hola ... me ha resultado fascinante ... lo puedes ver en mi página http://www.radionline.co ... una pregunta, existe la forma de publicar debajo del tweet la hora en que fue publicado ?
    Saludos desde Colombia.

    ResponderEliminar
  22. En esta entrada se comenta el funcionamiento del JavaScript y hay tres ejemplos distintos para ver cómo configurarlo y mostrar los datos que uno guste ;)

    ResponderEliminar
  23. hola el gadget me parece genial pero no logro hacerlo funcionar, probé de todo, para no fallar hice un nuevo html y pegue tu código tal cual, pero nada, solo aparece la imagen pero sin tweets, alguna sugerencia? habrá cambiado algo? saludos

    ResponderEliminar
    Respuestas
    1. Hola Noel.

      Seguro que no cambió porque en este mismo post lo puedes ver como sigue funcionando bien.

      Para pruebas copia tal cual el código de esta entrada y una vez compruebes que funciona, ya sólo cambia la ID de mi gadget de Twitter por el tuyo.

      Eliminar
  24. Hola por que pongo el gadget solo aparecen los botones y no los seguidores de las rede sociales

    ResponderEliminar
    Respuestas
    1. ¿De qué estamos hablando? Este post va de Twitter. No entiendo la pregunta...

      Eliminar
  25. de twitter, hago los cambios pertinentes y me sale el gadget pero sin mensajes

    ResponderEliminar
    Respuestas
    1. Orlando, sigo sin entenderte. Me has hablado de un gadget de Twitter, pero no sé si es este que presento yo u otro oficial del servicio. Luego me comentas que te aparecen unos botones y este no lleva ningún botón. En cuanto a los seguidores, aquí tampoco salen los seguidores ¿quizás te estás refiriendo todo el rato al gadget oficial de Twitter? Si es así no tengo ningún tutorial al respecto. Simplemente deberás seguir las instrucciones que te dan en este enlace al pinchar en "Crear nuevo".

      Eliminar
  26. Hola Oloman,

    Sabes por qué el gadget ya no funciona???????

    ResponderEliminar
    Respuestas
    1. No. De hecho no me había dado cuenta, aunque seguramente se deberá a algún cambio que Twitter hizo de nuevo.

      No obstante ya he visto otra solución que sí funciona. A ver cuando puedo publicarla...

      Eliminar
    2. Estaré a la Espera :D

      Eliminar
  27. Hola Oloman...

    Pudiste ver la otra solución al Rotatweet?

    Saludos y gracias!

    ResponderEliminar
    Respuestas
    1. Con frecuencia cambian las API de las redes sociales y por eso dejó de funcionar, pero encontré otro sistema. Lo que ocurre es que ando sin tiempo siquiera de contestaros, así que de publicar... ni hablamos.

      No obstante, si eres capaz de ver el código fuente de este sitio, este mismo mes le habilité una nueva opción. Lo puedes ver abajo del todo: http://www.idayvueltablogdeviajes.com

      Eliminar
  28. consulta que pasa si yo deseo colocarlo no como gadget sino como un elemento fijo arriba a un costad del blog. que se debe cambiar, o son los mismos pasos?

    Gracias

    ResponderEliminar