Cacharrito para mostrar tu último tweet | 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...

16 de octubre de 2012

Cacharrito para mostrar tu último tweet

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 y en este otro enlace la manera de replicar este mismo gadget que se explicaba a continuación.

Publi Twitter
Ahora que otros sistemas para mostrar tweets andan fallando porque a Twitter no le gustó demasiado eso de que terceras partes sacaran aplicaciones por doquier, aquí tenéis un código basado en la API de este servicio de graznidos, que os mostrará el último mensaje lanzado por un determinado usuario.

Tal y como viene redactado está listo para insertar como gadget en la barra lateral, aunque necesitáis al menos de un ancho de 335px para que se acomode bien.

El código es algo largo porque permite bastantes más opciones que las que yo usé para este fin concreto, pero como casi todos los parámetros son autoexplicativos (CSS casi literal), las podréis aprovechar para hacer otras cosas.

Esto como siempre es sólo un ejemplo y cambiando el estilo podréis conseguir otros resultados distintos de este.


<style>
#ultimotweet { position:relative; width:335px; height:94px; margin:0 auto;
background:url(http://2.bp.blogspot.com/-8jKyQz1JLTY/UHr-nCVNijI/AAAAAAAAFtU/T2XgWuNy2Uk/s1600/twitter.png);}
.twtr-widget .twtr-tweet-wrap { position:absolute; top:10px; left:90px; overflow: hidden; padding:0px; margin:0; zoom:1; width:235px !important;}
.twtr-doc { font-size:12px;}
.twtr-hd, .twtr-user, .twtr-ft { display:none;}</style>
<div id="ultimotweet">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 1,
interval: 5000,
width: 335,
height: 94,
theme: {
shell: {
background: 'transparent',
color: '#000'
},
tweets: {
background: 'transparent',
color: '#333',
links: '#999'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
behavior: 'all'
}
}).render().setUser('oloman').start();
</script></div>


Imprescindible cambiar el usuario al final del código (en verde) por el vuestro o bien por el de otra cuenta cualquiera si eso es lo queréis.

¿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

46 comentarios :

  1. Impresionante, Oloman! Gracias! Ya veré cómo utilizarlo :D

    ResponderEliminar
  2. Gracias, se ve minimalista como me gusta ami

    ResponderEliminar
  3. A probar, de todas maneras se te agradece el aporte.

    ResponderEliminar
  4. Hola Oloman, llevo tiempo aprendiendo de tus consejos ;)

    Ahí va una duda personal, hace unos días me encontré con el plugin o toolbar "social media" de wibiya y lo incorporé al blog que customizo mamaartista.

    Este plugin que divisé en otros blog siempre aparece en el bottom, mi idea es instalarlo en el Top o parte superior del blog de manera que desaparezca cuando decidan adentrase en el contenido.

    Un Saludo!

    ResponderEliminar
    Respuestas
    1. Jajaja... Me suenan muchas cosas que vi en esa plantilla ;)

      A lo que vamos. Hace tiempo que probé esa barra y me parece recordar que daban un código javascript cerrado. Si es así no vas a poder modificar su ubicación.

      Para forzar la cosa puedes añadir a tu CSS esto, pero queda regular:
      #wibiya_toolbar_wrapper {
      position: absolute;
      top: 0;
      height: 40px;
      overflow: hidden;
      }

      Eliminar
    2. Gracias Olo,

      Si la verdad que me he inspirado en tu blog últimamente ;) aunque mi asunto pendiente es la estructura, a ver si trabajándolo un poco te copio la forma de ordenar la información... Ya que todas las bloggers miran y copian y todos los blogs son muy semejantes, "por hacer algo diferente"

      Respecto a la barra estoy meditando probar otras ya que es un poco engorrosa, todas las imágenes aparecen con la opción de share...

      Seguiré probando y aprendiendo de tus consejos ;)

      Un Saludo

      Eliminar
    3. Probé la barra superior pero... el radius y la sombra me lo produce en las esquinas del top, mejor buscaré otra barra de navegación mas editable.

      Eliminar
    4. Mejor, porque con esa creo que no vas a poder hacer demasiado.

      Eliminar
  5. Oloblogger, tengo un problemón. He editado el código HTML de mi web (no es de Blogger, la he hecho a mano) y una cosa rara ha fallado en el código y algunas cosas están mal. ¿Hay alguna forma de ver cómo estaba mi web hace un día para ver el código fuente de la página? :(...

    ResponderEliminar
    Respuestas
    1. Prueba en Google accediendo a lo que tienen almacenado en caché. Otra manera sería usando Wayback Machine. En ambos casos es fácil que te falte algo, pero posiblemente consigas la mayor parte del código. Suerte

      Eliminar
    2. Muchas gracias, no sabía que podía ver lo que Google tenía en caché ^^". Ya he conseguido poner el código tal y como estaba :)

      Eliminar
    3. Felicidades, porque es una put... que te ocurra eso

      Eliminar
  6. Hola oloman, desearía solo obtener el texto del ultimo tweet de un determino usuario, eso se puede? porque he intentado quitarle los estilos para ponerles los míos y se malogra o descuadra todo :/ Gracias

    ResponderEliminar
    Respuestas
    1. Hola. Los estilos que incluí en esta entrada sirven para para que no se vean elementos del gadget original. Lo cierto es que puedes quitarlos todos y el tweet se verá igualmente. Luego puedes ir probando a incorporarlos poco a poco y así descubres qué hace cada uno para finalmente dejar los que te interesen. Y claro que puedes poner cualquier usuario.

      Eliminar
  7. don, que pena molestarlo resulta que me encanta ese codig, sin embargo lo modifique para que no tuviera ni fondo ni imagen del pajaro de twitter, y me encanto como quedo, les dejo el codigo al final. mi pregunta es:
    es posible, que me muestre los ultimos 3 twitts y no solo el ultimo? e leido el codigo sin embargo ni idea.. me podria hechar una mano?

    ResponderEliminar
  8. hola don oloman, ya revise el codigo y de pruebas cacharreando se me dio por ponerle en rpp, en vez de 1 poner 3 y me funciono, ya solo me faltaba subirle los valores del tamaño, y quedo perfecto, no se como poner e codigo de la cajita, aqui xq no deja poner style en los comentarios, si les interesa el codigo me dices como y lo pongo o lo envio por priv.

    muchas gracias por tus aportes.

    ResponderEliminar
    Respuestas
    1. Usa esto para antes de publicar, convertir el código: http://www.oloblogger.com/p/html-texto-plano.html

      Gracias

      Eliminar
    2. a mi me interesa el codigo puedes mandarmelo

      Eliminar
    3. No entiendo lo que me pides. El código está publicado en el post.

      Eliminar
  9. gracias el canario,lo utilice en over blog y no fui capaz pero en mi nuevo blog de blogger a la perfección,aqui te dejo mis blog y muchas gracias por que con tu ayuda intento mejorar mi pequeño blog http://elcanario-elcanario.blogspot.com.es/ y en over blog :http://relatoshelenamarey.over-blog.es/

    ResponderEliminar
  10. como puedo hacer que salgna mas tweets?

    ResponderEliminar
    Respuestas
    1. Con este otro método que precisamente publiqué hace unas horas ;)

      Mostrar tweets con y sin jQuery

      Eliminar
  11. Hola, tengo este problema cuando publico nuevos tweets en lugar de actualizr los empalma uno sobre el otro =/

    ResponderEliminar
    Respuestas
    1. ¿En qué página pusiste este gadget que lo vea? En la que aparece en tu perfil no veo ninguno...

      Eliminar
    2. en kombuchads.com.mx se vana cumulando los tweets hacia abajo, si le doy refresh vuelve a aparecer solo uno, en gastonoliverio.com.mx se amontonan uno sobre otro e igual la darle refresh se ve solo uno

      Eliminar
    3. Perdón por el retraso, cosa de las fiestas.

      Acabo de verlo y se ve bien. Ahora mismo hay un solo tweet en la parte superior. Quizás necesitas un overflow:hidden o algo parecido según el diseño y el lugar dónde lo pusiste, aunque lo he comprobado en IE, FF y Chrome y en todos se ve bien.

      Eliminar
  12. Hey!!

    Gracias, esto está excelente en verdad.

    La cosa es que tengo el mismo problema que Gastón, en mi página se me encima el tweet nuevo en el anterior, al refrescar ya aparece sólo el nuevo... algún consejo para que no se encimen?

    ResponderEliminar
    Respuestas
    1. ¿Y dónde está el tuyo que también lo pueda ver?

      Eliminar
  13. Oloman, Gracias. Quedo estupendo. Saludos desde Venezuela.

    ResponderEliminar
  14. Oloman después de chequear y modificar unas cosas, me di cuenta que te falta style/ para cerrar el código. ¿Estoy en lo cierto?

    ResponderEliminar
    Respuestas
    1. Hmmm... creo que no. Si observas el código, el cierre del STYLE está justo después de .twtr-ft { display:none;}

      Eliminar
  15. Oloman!! Sos un maestro!!!

    Pero tengo una duda! Como hacer para que junto al tuit aparezca la imagen del perfil del usuario??

    Muchas Gracias!!

    ResponderEliminar
    Respuestas
    1. Sinceramente, con este código no lo sé, pero pienso que podrías añadirlo a la imagen de fondo y luego desplazar un poco el texto del tuit para que se vea.

      Eliminar
  16. Sabes que habría que hacer para que se viera en IE <= 8?

    ResponderEliminar
    Respuestas
    1. No sé... ¿rezar?

      Bueno, ahora en serio. He probado en IE7 y yo veo el cacharro perfectamente con su tweet correspondiente. Eso sí, el resto de la página se va al traste. Yo no me preocuparía mucho por IE7 y en los otros seguro que funciona.

      Eliminar
  17. Oloman como haria para ponerlo en cada en cada una de mis entradas. Yo tengo el "acerca del autor" en cada entrada individual, quisiera fusionarlo en ese código, se podra, ayudas gracias..

    ResponderEliminar
  18. Ya lo pude hacer Oloman, muchas gracias. Una pregunta como le cambio los colores a los links del ultimo tweet gracias

    ResponderEliminar
    Respuestas
    1. Tienes que cambiar el color en esta parte: links: '#999'

      Eliminar
  19. Hola, ya no funciona creo que debes actualizar a la version 1.1, por fa publica como quedaria con la actualización, gracias

    ResponderEliminar
  20. A mi también me interesaría darle solución :(

    ResponderEliminar
  21. Amigo de un día para otro dejó de funcionar :(, que solución se le puede dar :O

    ResponderEliminar
  22. Mi blog, Alicia y Yushi. Twitter ha cerrado definitivamente la API que generaba este gadget, así que ya no sirve. Tengo ya una solución (ahora mismo funcionando en modo primitivo al final de esta página) pero necesito un rato para explicarla y publicarla. Espero que no sean muchos días.

    ResponderEliminar
    Respuestas
    1. Muchas gracias te pasaste :D

      Eliminar
    2. Ya lo tengo publicado con fecha 19-06-2013

      Eliminar