Últimos tweets: con y sin jQuery | 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...

27 de diciembre de 2012

Últimos tweets: con y sin jQuery

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.

Twitter a la carta

Hace ya unas semanas que vimos un método para publicar el último tweet de determinada cuenta, pero me pareció un código algo farragoso y demasiado largo para lo que se pretendía así que me puse a buscar otras maneras y encontré estas dos.

La primera es la más breve pero sólo muestra un único tuit y los links que pueda incluir el mensaje no estarán operativos. Además necesita jQuery.

La segunda es un pelín más larga de código pero con ella podremos resolver los problemas anteriores si lo fueran para alguien.

Último tweet con jQuery


El que este sistema requiera jQuery realmente es secundario porque ya muchos lo usais, pero hay que tener en cuenta que si no es así habrá que añadir previamente esa librería a la plantilla para poder usar esto. Esto normalmente irá antes de </head>:

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

Luego simplemente hay que añadir este código en el lugar dónde se quiera mostrar el tweet. En un gadget HTML/JavaScript, por ejemplo:

<div id="tweet"></div>
<script>$.getJSON("https://api.twitter.com/1/statuses/user_timeline/USUARIO.json?count=1&include_rts=1&callback=?", function(data) {
$("#tweet").html(data[0].text);
});</script>

El último graznido de @oloman fue:


Lo único que habría que cambiar es USUARIO, poniendo ahí el usuario de Twitter. Ese 1 en &include_rts=1 indica que se incluirán los RT hechos por el usuario, así que si no queréis que se vean sólo hay que pasar el valor a 0.

Como siempre, con CSS podemos personalizar un poco el resultado:



<div id="ultimotweet">
<div id="tweet"></div>
</div>

<style>
#ultimotweet {width:400px; height:315px; margin:0 auto; background:url(http://3.bp.blogspot.com/-QSruJRzHIqs/UNYtaZcVbSI/AAAAAAAAHAs/ChFkofbYbRM/s400/mario.jpg);}
#tweet {padding: 40px 50px 0px 20px; font-size: 12px; font-weight:bold;}</style>


Uno o varios tweets sin jQuery


Si no queremos usar la conocida librería JavaScript y necesitamos algunas funcionalidades más, este otro sistema seguro que cumplirá vuestras expectativas.

También leemos los datos desde JSON, pero en este caso apoyándonos en otra librería que facilita Twitter (blogger.js). Los resultados serán mostrados en una lista que en este caso tendrán la id="twitter_update_list".

<ul id="twitter_update_list"></ul>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=USUARIO&include_rts=1&exclude_replies=true&callback=twitterCallback2&count=10" type="text/javascript"></script>

El resultado sin estilo sería este:


    

    Como habréis podido observar, si el tweet tiene algún enlace este aparece activado. Adicionalmente se muestra la fecha al final de cada uno.

    También habréis visto que hay en el código unos cuantos parámetros que nos permiten configurar la salida. Aparte del anteriormente mencionado include_rts están estos:

    exclude_replies: false o true para indicar respectivamente si se incluirán en la lista las respuestas con mención o no.
    count: con un valor para especificar el número de tweets a mostrar


    Como ya se ha nombrado el selector que controla la lista, supongo que no os será difícil darle estilo una vez generada. Por si acaso, la estructura de salida será esta:

    <ul id="twitter_update_list">
    <li>
    <span>
    CONTENIDO DEL TWEET
    </span>
    <a style="font-size:85%" href="URL_DEL_TWEET">
    FECHA</a>
    </li>
    <ul>


    Si queréis mostrar los graznidos de una lista en lugar de los de un usuario concreto, la dirección y parámetros del src cambian un poco.

    Así, en lugar de

    http://api.twitter.com/1/statuses/user_timeline.json?screen_name=USUARIO&include_rts=1&exclude_replies=true&callback=twitterCallback2&count=10

    ... la dirección tendría el formato...

    http://api.twitter.com/1/bubuku/lists/NOMBRE_LISTA/statuses.json?callback=twitterCallback2&per_page=5


    Más información en la API de Twitter.

    ¿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

    27 comentarios :

    1. nice my friend :)
      it's one cooler...
      www.anthonycalzadilla.com/i-twitty-the-fool
      hehehe...
      cheers :D

      ResponderEliminar
      Respuestas
      1. Jajaja. Very funny. I had never seen that ;)

        Eliminar
    2. Plas, plas, plas!
      Y con opciones para elegir el que más guste.

      Sólo un apunte para mantener las formas: el padre de los li´s obligatoriamente debe ser un lista (ol si se quieren numerar / ul sin numeración).
      Así que permíteme sugerir que cambies el etiquetado siempre que el funcionamiento del script lo permita:
      <div id="twitter_update_list">&lt/div>
      por
      <ul id="twitter_update_list">&lt/ul>

      Un saludo

      ResponderEliminar
      Respuestas
      1. Cierto. Se me escapó el detalle porque estoy acostumbrado a los inner con div's. Sí funciona así que ya lo he cambiado en el post. Gracias.

        Eliminar
    3. Gracias por el aporte, como hacer para que usando la segunda opcion quede el fodo de mario?

      ResponderEliminar
      Respuestas
      1. Habría que usar adicionalmente algún tipo de rotador (carrousell) porque si no no cabría. A ver si encuentro alguno.

        Eliminar
      2. gracias, pero me referia osea usar el fondo como el de mario pero que los enlaces del tweet funcionen, como veo que en el primer ejemplo no funcionan y yo soy algo teto para eso de los codigos jejeje

        Eliminar
      3. Sí sólo es eso podrías usar el código que expliqué en segundo lugar con el fondo que quieras, pero con un count=1 para que sólo te salga un único tweet.

        De otra manera habría que usar como te dije un rotador... que por cierto ya descubrí. En cuanto tenga un rato para publicar lo explico.

        Eliminar
      4. hola, y el rotador que mencionas... nos lo vas a enseñar? gracias

        Eliminar
      5. Sí XD Lo que pasa es que me falta tiempo

        Eliminar
    4. Genial, la mejor info que he encontrado acerca del tema.

      ResponderEliminar
    5. Y si quiero mostrar varios tweets con jquery ¿se puede?

      ResponderEliminar
      Respuestas
      1. Apostaría a que sí, pero por el momento no busqué esa opción. Si ya tengo una aceptable que me muestra muchos tuits sin necesidad de tener que utilizar jQuery ¿para qué quiero añadirle esa librería? Para mí la segunda opción es la más completa y aunque en la entrada la veas muy simple, con CSS la puedes dejar como la otra o mejor. Eso depende de tu habilidad estética

        Eliminar
    6. Hola Oloman, ¿cómo estás? Este comentario quizá no va en esta entrada pero quisiera solicitarte ayuda. En mi blog tengo un problema y me parece que es con el bendido jQuerty porque de un día para otro el slider no se ve y hace que el diseño de mi blog se vea chorreado, puedes entrar aquí y verificarlo? http://www.amandysha.net/ qué puedo hacer para resolverlo. Mil gracias de antemano por tu ayuda amigo. Abrazos!

      ResponderEliminar
      Respuestas
      1. He visto que usas Nivo Slider, pero ese es un script con el que no estoy tan familiarizado como para decirte cual es exactamente el problema. He probado en dos días distintos y en ninguno de ellos funcionaba. Pienso que lo más rápido sería volver a montarlo de nuevo.

        Eliminar
    7. Que buen blog Oloman. Saludos.

      ResponderEliminar
    8. Bueno no se si llorar de la emoción o ir allá donde sea que estés y darte un abrazo jaja. Llevo todo el día detrás de algo como esto, hasta que (bendito sea el señor google) he llegado aquí. Ambas opciones me funcionan a la perfección, pero me gustaría preguntarte si sería posible que en la opción sin jQuery (que es la que finalmente he elegido) no saliesen los retweets que se hacen ¿se podría conseguir esto?

      Un saludo y millones de gracias por tan fantástico tutorial.

      ResponderEliminar
      Respuestas
      1. Exactamente igual que en la otra: "Ese 1 en &include_rts=1 indica que se incluirán los RT hechos por el usuario, así que si no queréis que se vean sólo hay que pasar el valor a 0"

        Eliminar
      2. ¡Vaya despiste! no me había dado cuenta de eso.
        Muchísimas gracias de nuevo (:

        Eliminar
    9. Hola de nuevo.

      En estos días me he dado cuenta de que esta opción no se ve cuando se visualiza el blog desde ipad o iphone ¿sabrías a qué se debe?

      ¡Gracias!

      ResponderEliminar
      Respuestas
      1. Pues no, no lo sé. Y además debe tener algo que ver con que sean dispositivos móviles porque desde uno con Android tampoco se ven.

        Eliminar
    10. Parece que hoy no funciona ninguna de las 2 posibilidades ¿no os pasa a vosotros? :S

      ResponderEliminar
      Respuestas
      1. Sí. Te confirmo que Twitter dejó de dar soporte a la API que utiliza este cacharro y ahora hay que generarlo desde su sitio (https://twitter.com/settings/widgets)

        Pero ya tengo una alternativa ;)

        Eliminar
    11. Hola, no se si este es el sitio para esta pregunta, pero si me la puedes contestar te lo agradecería.
      Tengo enlazado el blog a twitter, pero como al principio del blog tengo una foto fija, siempre me sale lo mismo cuando manda la información a twitter,
      como hago para que salgan enlaces aleatorios??

      ResponderEliminar
      Respuestas
      1. Para tí ¿qué es eso de tener enlazado el blog y Twitter? ¿Que se se genera automáticamente un tweet cuando publicas algo nuevo en el blog? Es que si es eso, que yo sepa no se pueden mandar imágenes...
        ¿Quizás te refieres a la información multimedia que muestran las Twitter Cards?

        Eliminar