Mostrar tweets tras el fin de la API 1 de Twitter | Oloblogger BerryReview Malas y buenas noticias traigo, oiga. La mala es que Twitter -siguiendo el calendar...

19 de junio de 2013

Mostrar tweets tras el fin de la API 1 de Twitter

Bye, bye Twitter API 1
BerryReview
Malas y buenas noticias traigo, oiga.

La mala es que Twitter -siguiendo el calendario previsto por cierto- ha dejado de dar soporte a la API 1 que hasta ahora sustentaba una gran parte de los gadgets que permitían mostrar un timeline determinado de una manera personalizada (1) (2).

La siguiente, sólo regular, es que ahora hay que pasar por taquilla -es un decir- y para construir un gadget de Twitter hay que hacerlo por narices desde su página oficial previa autentificación.

Otra de igual enjundia es que desde allí sólo se pueden generar gadgets oficiales, todos grandísimos y casi nada configurables en cuanto a estética por tratarse de iframe's.

Y por fin la buena: Alguien ha tenido una idea feliz para poder solventar todo esto y ha creado un código bastante bueno que da mucho juego.


Ese alguien es Jason Mayes y fue ayer mismo cuando tropecé con su página y con este JSFiddle dónde se puede ver que todo funciona correctamente.

Esta vez no voy a explicaros con detalle que hace todo eso porque hay bastantes cosas más que comentar, pero básicamente hace uso de los widgets oficiales recortando todo lo que "sobra" y dejando sólo lo que interesa: avatar, nick, usuario, mensaje y fecha. Veamos cómo ponerlo en nuestro sitio.


1. Incluir el código principal


Este es ese código y sólo es necesario conservar los créditos del principio para poder usarlo. Atentos a las últimas líneas (// Ejemplos) que será lo único que habrá que modificar como después veremos. En Blogger lo podéis añadir como gadget tipo HTML/JavaScript.



2. Relacionar con el gadget oficial


Ahora los datos no se pueden generar de manera independiente y hay que obtenerlos desde un widget oficial. Para vincularlo con este script utilizamos ese número largo al principio de cada función twitterFetcher. Aparecen al final del código principal y los he marcado en verde, al igual que el resto de parámetros configurables. Se trata de un identificador que os asigna Twitter cuando creáis un widget con su sistema. Para generarlo y localizarlo sigue estos pasos:

  • validado en Twitter, crea un widget desde https://twitter.com/settings/widgets
  • crea un nuevo widget con lo que necesites, cronología, favoritos, etc.
  • si no quieres incluir las respuestas asegúrate de marcar su exclusión
  • pincha en el botón "Volver a la configuración del widget" y en la nueva pantalla pincha en "Editar"
  • ahora fíjate en la dirección de tu navegador, ahí tienes la id del gadget, entre /widgets/ y /edit
  • tal que aquí: https://twitter.com/settings/widgets/XXXXXXXXXXXXXXXXXX/edit

Una vez lo tengáis, no olvidéis cambiarlo en el código principal. Se pueden poner tantos distintos como se quiera y ya habéis visto que yo incluí tres, aunque lo normal será dejar una sola de esas tres funciones con la configuración exacta que necesitamos.


3. Añadir una caja vacía para que sea visible


Una vez el código esté en vuestro sitio sólo hay que poner una caja vacía con la id que hayamos elegido (en los ejemplos tweets, tweets2 y tweets3) y el script se encargará de insertar en ella lo que hayamos programado en las últimas líneas.

Así, siguiendo los tres ejemplos que puse, dónde añadamos <div id="tweets"></div> nos saldrá algo así:


Con <div id="tweets2"></div> obtendremos otro tipo de datos.


Y finalmente con <div id="tweets3"></div> esto otro, un tuit simple:



Parámetros de la función twitterFetcher


Ejemplo 2: twitterFetcher.fetch('347118235830870017', 'tweets2', 5, true, false, true, dateFormatter);

Así tal cual lo puse, el código os mostrará uno de los formatos de datos que yo utilicé según uséis una id u otra, pero también eso lo podéis personalizar. De la serie de parámetros separados por comas sólo los dos primeros son obligatorios, el identificador del widget y la id de la caja dónde meteremos el resultado. Los demás son opcionales y en este orden serían:

  • el número máximo de tuits a mostrar, desde 1 a 20 (por defecto 20)
  • true/false según queramos que nicks, URL's y hashtags tengan enlaces o no (por defecto false)
  • true/false para que se muestre el avatar, nick y el usuario (por defecto true)
  • true/false para mostrar fecha/hora del tuit (por defecto true)
  • nombre de la función que convertirá la fecha al formato que quieras (por defecto saldrá el formato Twitter)

Para personalizar la hora y fecha puedes definir una función que tome una fecha JavaScript como parámetro y devuelva una cadena. En el ejemplo se incluyó una llamada dateFormatter.


Estilo CSS


Pero como además de querer personalizar los datos de salida, posiblemente también os interese personalizar la estética, aquí tenéis la lista de selectores que vais a necesitar. He supuesto que utilizaréis la id tweets. Para otra id habría que sustituir ese nombre.

/* Reset */
#tweets * {}
/* Bloque del gadget */
#tweets {}
/* Lista de tuits */
#tweets ul {}
/* Cada uno de los tuits */
#tweets li {}
/* Bloque datos usuario */
#tweets .user a {}
/* Avatar */
#tweets .user img {}
/* Nick */
#tweets .user a > span {}
/* Usuario Twitter */
#tweets .user span + span {}
/* Cuerpo texto del tuit */
#tweets p {}
/* Enlaces en el tuit */
#tweets p a {}
/* Fecha */
#tweets p.timePosted {}


Las reglas que he utilizado para las salidas que visteis en el post fueron estas:

#tweets * {margin: 0; padding: 0; border: 0;}
#tweets {margin: 20px 0; text-align:center;}
#tweets ul {display: inline-block; width: 80%; list-style:none; clear:both;}
#tweets li {margin-bottom: 5px; text-align: left; clear:both;}
#tweets .user a {float:left; width:120px;}
#tweets .user img {float: left; width: 80px;}
#tweets .user a > span {display:none;}
#tweets .user span + span { display:block; margin-top:10px;font-size: 9px;}
#tweets p.timePosted {font-size: 80%;}

#tweets2 * {margin: 0; padding: 0; border: 0;}
#tweets2 {margin: 20px 0;}
#tweets2 ul {list-style:none; clear:both;}
#tweets2 li {display: block; margin-bottom: 5px; padding:5px; border: 1px solid #ccc; clear:both;}
#tweets2 p {font-size: 14px;}
#tweets2 p.timePosted {font-size: 80%;}


Al tuit simple no le asigné ningún estilo así que por defecto tomó las reglas generales de la página.


Y bien, a ver si saco otro rato para daros hecho el código con el que montar aquel cacharrito para mostrar tu último tweet que a muchos os ha dejado de funcionar por este motivo.



¿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

55 comentarios :

  1. ¿Ya habrá un nuevo fanbox de Twitter? No tenía muchos seguidores por Twitter, pero me gustaba tenerlo ^_^

    ResponderEliminar
    Respuestas
    1. Posible es, pero probable no. Al menos de momento.

      Eliminar
    2. Ya habrá que esperar nomás, qué se le va a hacer, ¿no? ^.^ ¿Avisarás en tu blog si vuelve a funcionar?

      Eliminar
    3. Pues no es un gadget que yo utilice, así que lo mejor es visitar de vez en cuando la página de widgets de Twitter.

      Eliminar
  2. Gracias por darnos una solución!

    ResponderEliminar
    Respuestas
    1. No hay de qué, pero yo sólo traduje y expliqué un poco ;)

      Eliminar
  3. Ya me parecía a mí,... cuando hace unos días me desapareció el followbox de Twitter y no se solventaba de ninguna manera, supuse que algo pasaba. Espero poder reincorporarlo también; le daba vidilla a la barra lateral del blog.

    De todas formas ahora mismo de poco me serviría: estoy sin twitter por suspensión de la cuenta. ¿El motivo? Ni idea. No he infringido ni una sola de las reglas de Twitter: ni spams masivos, ni retwiteos continuados, ni contenido ilícito, ni desproporción de seguimientos, nada de nada. Sólo me queda apelar con un tiquet y esperar ¡varios días! a que se dignen darme respuesta y reabrirme la cuenta, si ellos quieren. Cuenta que me han suspendido sin darme la menor explicación: twitter no da explicaciones. Estoy empezando a hartarme de esta forma de funcionar de algunas redes sociales, la verdad. Sobre todo cuando hacen la puñeta a quienes las empleamos del modo más honesto posible y luego ves campando a sus anchas a trolls y spammers.

    Perdón por la retahíla... es fruto de la indignación.

    ResponderEliminar
    Respuestas
    1. Te entiendo porque me imagino el problema que debe ser eso, pero es lo que hay. Ponte en su lugar y a ver cómo compruebas manualmente todas las reclamaciones.

      Eliminar
  4. Jolan, a mi me paso lo mismo hace un mes, les reclame varias veces y a la semana me volvieron a poner operativa la cuenta.

    Un saludo

    ResponderEliminar
  5. Hola, tengo un problemilla haber si me podrias ayudar:
    Cuando elimino un widget desde la plantilla de blogger (de forma normal y corriente) el widget desaparece pero en la plantilla sigue apareciendo y cuando le doy a editar me sale lo sig:
    Invalid widget: HTML1
    Error 400

    Nose como eliminarlo, he probado ha buscar en la plantilla desde los ID de los widgets pero no estan.

    La plantilla que uso es la sig:
    http://www.soratemplates.com/2013/01/webdesign-blogger-template.html

    ResponderEliminar
    Respuestas
    1. Para ser más gráfico me he currado una imagen jeje:
      http://i41.tinypic.com/2na625z.png

      GRACIAS, UN SALUDO ESPERO TU RESPUESTA

      Eliminar
    2. SE SOLUCIONO SOLO perdon por las molestias.

      Eliminar
    3. Pues como puedes imaginar, en este caso no ha sido ninguna molestia :)

      Eliminar
  6. No me funciona, no se si estoy poniendo mal el script, pero no aparece nada cuando pongo la llamada la función :(

    ResponderEliminar
    Respuestas
    1. No hay llamada en este caso. El script lo puedes poner en un gadget o en la plantilla y con conseguir tu propia ID de artilugio en Twitter y luego meter un DIV vacío como se explica, debería salir.

      Eliminar
    2. Sigue sin funcionar, se ve fácil de implementar pero pongo el script en un gadget, por que en la plantilla me da un error, y pongo el DIV vació pero no aparece nada

      Eliminar
    3. Si no me especificas un poco más lo que haces, me resultará imposible encontrar el problema.

      El script lo debes copiar tal cual en un gadget y debajo (para comprobar que funciona) pones un div vacío con la ID tweets3 y así no tienes que añadir de momento estilo. Pero antes de guardarlo tienes que conseguir tu propia identificación de gadget en Twitter y sustituirlo en el código. No hay más.

      Eliminar
  7. Que opina de que el 30 de este mes blogger elimina todos los blog porno

    ResponderEliminar
    Respuestas
    1. No tengo una opinión al respecto. Ni me parece bien ni mal. Pero de todas formas la eliminación parece que es selectiva, ya que sólo es para los que obtengan un beneficio de la página, como por ejemplo los que enlazan a sitios de pago.

      Eliminar
  8. Hola amigo habra alguna forma de hacerlos in un aplicativo utilizando http://www.twitter-rss.com/ que viene a ser el remplazo de lo que eliminaron en estos dias mira http://www.twitter-rss.com/user_timeline.php?screen_name='tamarindodn'
    el unico problema es que esta en xml y no se como traerlo con ajax :( me puedes ayudar

    ResponderEliminar
    Respuestas
    1. Andaba estos días buscando una manera de obtener el RSS de Twitter, pero he probado eso y no funciona bien con un lector de feeds que hace tiempo expliqué. Lo sigo teniendo en mente, así que si descubro algo no te preocupes que lo publicaré.

      Eliminar
  9. Estimado buenas noches.. estoy intentando tal cual tenés las instrucciones, pero no me anda el código.

    ResponderEliminar
  10. Me tengo que repetir y mandarte al comentario 6.3. Ese código funciona y la prueba está en que en esta entrada lo hace.

    ResponderEliminar
  11. Estimado, ingreso al link que dejas en JSFiddle y obtengo el siguiente código, que en efecto en Internet funciona, sin embargo al bajarlo y copiarlo en un archivo .HTML, no funciona.

    ResponderEliminar
  12. Desafortunadamente no me deja copiar el código.

    Igual te comento que baje el .zip de la página oficial e igual no funciona, lo único que presenta son los títulos, no se que tal vez haga falta para que me funcione.

    Agradezco tu ayuda. Saludos.

    ResponderEliminar
  13. Este es el resultado que arroja la página

    Query 1: My latest tweet


    Query 2: What people are saying about this component!


    Query 3: Last 3 Twitter posts using hastag #API


    Query 4: Last 3 Twitter posts using hastag #API with custom callback

    Pero no muestra nada.

    ResponderEliminar
  14. En el siguiente link, permite descargar un .zip de ejemplo que no me funciona, el cual se obtiene del site oficial del autor:

    http://codepen.io/jasonmayes/pen/Ioype

    ResponderEliminar
    Respuestas
    1. No sé qué puede ocurrir, pero ¿por qué no usas el que puse aquí que sí funciona?

      Eliminar
  15. Hola


    Me gustaría saber como puedo cambiar el texto de la fecha de publicación del tweet. Ahora me lo pone en inglés y me gustaría ponerlo en castellano.

    Muchas gracias por este blog!

    ResponderEliminar
    Respuestas
    1. Pues no lo sé, sinceramente, pero en el ejemplo dos tienes una forma para añadir una función que saque la fecha como tú quieras. El problema es que sale con eso del "horario romance" y para cambiarlo habría que reconstruir la función, cosa que hoy por hoy no puedo hacer porque tengo una conexión muy mala para ponerme a hacer pruebas. Si tu fueras capaz te agradecería que lo pusieras por aquí ;)

      Eliminar
    2. Buf, soy bastante nuevo en esto y voy un poco perdido.

      Se me ocurre otra cosa que he estado buscando pero no consigo dar con ello. Es poner una línea negra de separación entre cada tweet.

      Gracias de nuevo!

      Eliminar
    3. Usa entonces el modelo #tweets2 para que no tengas que improvisar nada y luego cambia en el estilo este...
      border: 1px solid #ccc; clear:both;
      ...por un:
      border-bottom: 1px solid #ccc; clear:both;

      Eliminar
  16. Súper útil, felicidades por estar tan actualizado! :D Gracias!!

    ResponderEliminar
  17. Hola Oloman, tengo puesto en una web el widget de twitter, pero me muestra 20 tweets. Quiero decir, el tweet numero 20 fue el viernes, y ya no me muestra más, pensé que se iría actualizando...
    Sabes que puede pasar?

    Gracias por tu tiempo !!

    ResponderEliminar
    Respuestas
    1. Lo desconozco totalmente. Lo siento.

      Eliminar
  18. Hola

    Sabes como hacerlo para mostrar mas de 20 tweets?

    Gracias

    ResponderEliminar
    Respuestas
    1. Pues no, pero con tu pregunta me has hecho descubrir que ese es el tope de los widgets de Twitter ;)

      Eliminar
  19. Oye man no me funciona segui al pie pero no logro idexarlo, lo que busco es publicar el último tweet y nada

    ResponderEliminar
    Respuestas
    1. Sólo puedo decirte que reinicies que para eso es la solución informática universal. No sé explicarlo de otra manera que no sea la de la entrada, ni tampoco con la brevedad que requiere un simple comentario si no me das un problema concreto que solucionar. Prueba de nuevo con cuidado y siguiendo escrupulosamente las instrucciones.

      Eliminar
  20. Funcionando, esta perfecto! Solo una duda, si quisiera guardar cuada uno de los tweets en una base de mysql, como lo podria implementar???

    ResponderEliminar
    Respuestas
    1. Ni idea. No he usado SQL en mi vida. Bueno, muy poco, casi nada.

      Eliminar
  21. Buenas tardes,

    He colocado el script en mi blog, con la tercera opción, pero nose porqué cuando publico tweets con direcciones de facebook, éstas se salen del gadget, te dejo una imagen como ejemplo:

    http://img545.imageshack.us/img545/2826/pysg.png

    Gracias.

    ResponderEliminar
    Respuestas
    1. Eso debe ser porque los enlaces de Facebook son demasiado largos. No sabría cómo acortarlos, así que lo más fácil es añadir en el CSS a #tweets (o al selector que uses) un overflow: hidden; para que no desborden.

      Eliminar
  22. Hola Oloman!

    Esta es una pregunta un poco fuera del gadget que nos muestras pero quería preguntarte si sabes cómo publicar un tweet con imagen, usando el update_with_media desde C# y sin librerías externas.

    Gracias!

    ResponderEliminar
    Respuestas
    1. Hola
      La respuesta es no, pues no conozco la API de Twitter a ese nivel, pero para hacer eso mismo puedes utilizar las Twitter Cards.

      Eliminar
  23. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Sí, pero puedes crear una función para que te muestre esa fecha como quieras. Si te fijas en el segundo ejemplo, esta sale en español gracias al contenido de la función dateFormatter(date).

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Incluido yo... por eso no pude extender el post explicando con detalle cómo hacer esa parte XD

      Eliminar
  24. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  25. Sin duda el widget oficial es más versátil, pues este toma sólo algunos de datos de aquel y listo. La utilidad del código de esta entrada es obtener una lista manejable desde el punto de vista del estilo de salida, pues el de Twitter no lo puedes controlar.

    ResponderEliminar
  26. Hola, genial aporte!!!
    Pero me falta una cosilla que no consigo cambiar. Sabes como puedo transformar en enlace de la foto (pic.twitter.com/OcavHs39BC) en al propia ruta de la imagen? es decir el src.

    Gracias de todas formas!

    ResponderEliminar
    Respuestas
    1. No, lo siento. Eso no sé cómo conseguirlo.

      Eliminar
  27. Hola Oloblogger me e dado cuenta que la imagen de perfil no se ve ya que este truco lo utilizo en mi pagina web hay alguna solución ?

    ResponderEliminar
    Respuestas
    1. Hola ¿a qué imagen te refieres y en qué blog tienes exactamente este cacharro?

      Eliminar