Ú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.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibSmklgV5rmXZiPP5BG2IN_Y7-MBr38qWYl6uekmp0qQSjmrJK4xPYkq6JL1P0qNtHT1_AIRMqBF4TNCCxJdL8KM2Se8kQBkNct18Gqi0etfZebUYgiZmNlVGWOsx4TJFh7W9wialNLK8/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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter