Sacándole partido a la API de Twitter.

Como sabéis, el tema del blog está sin terminar y cuando saco algo de tiempo lo voy mejorando. En esta ocasión quería mostrar mis últimos Tweens en el lateral derecho, normalmente uso plugin para mostrarlo, pero para evitar el uso indiscriminado de plugin busqué otra alternativa.

Mirando en la documentación de Twitter, vi que podíamos sacar información de Twitter en los formatos JSON, XML y ATOM, a través de su API mediante una url y el identificador de usuario. Solo con estos dos datos recibiremos la información necesaria para mostrarla en páginas HTML, flash, etc.

Como lo vamos a mostrar en WordPress y no quería complicarme la vida, busque algo que tuviera pocas líneas de código en JavaScript y encontré esto:

Como sabéis, el tema del blog está sin terminar y cuando saco algo de tiempo lo voy mejorando. En esta ocasión quería mostrar mis últimos Tweens en el lateral derecho, normalmente uso plugin para mostrarlo, pero para evitar el uso indiscriminado de plugin busqué otra alternativa.

Mirando en la documentación de Twitter, vi que podíamos sacar información de Twitter en los formatos JSON, XML y ATOM, a través de su API mediante una URL y el identificador de usuario. Solo con estos dos datos recibiríamos la información necesaria para mostrarla en páginas HTML, flash, etc.

Como lo vamos a mostrar en WordPress y no quería complicarme la vida, busque algo que tuviera pocas líneas de código en JavaScript y encontré esto:

<pre class="lang:html decode:true ">
<script src="https://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="https://twitter.com/statuses/user_timeline/id_usu.json?callback=twitterCallback2&amp;count=1" type="text/javascript"></script><br />
</pre>

Donde ‘id_usu’ es el identificador del usuario y ‘count’ el número de mensajes a mostrar. Esta información se mostrará en una capa llamada ‘twitter_update_list’, aquí tenéis el ejemplo.

Ya con esta información, fui a la admin de WordPress, a widgets y arrastre uno llamado ‘texto’ hacia la zona ‘sidebar’, en dicho widget inserte el siguiente código:

<div id="twitter_div">
<h2 style="display: none;">Twitter</h2>
<p><a id="twitter-link" style="display: block; text-align: right;" href="https://twitter.com/bubuku">Sígueme en Twitter</a></p>
</div>
<p><script src="https://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="https://twitter.com/statuses/user_timeline/id_usu.json?callback=twitterCallback2&count=5" type="text/javascript"></script>

Ya tenía todo funcionando perfectamente, pero luego pensé que quizás sería más interesante mostrar la información de una de mis listas para que la información tuviera más movimiento. Y gracias a esta idea descubrí esta página Twitool-box donde te indican la url que necesitas para sacar la información según sea el caso añadiendo pocos parámetros.

Por ejemplo para mostrar los últimos 5 tweens de mí lista de desarrolladores, nos vamos a la página mencionada anteriormente, al formulario ‘GET list statuses’ e insertamos los datos.

<a href="https://www.bubuku.com/wp-content/uploads/blog_api-twitter.gif"></a><a href="https://www.bubuku.com/wp-content/uploads/blog_api-twitter.gif"></a>

Esta sería la url resultante para recibir los datos en JSON:

https://api.twitter.com/1/bubuku/lists/desarrolladores/statuses.json?per_page=5

Y este el código html que tendríamos que insertar en el widget de WordPress.

<div id="twitter_div">
<h2 style="display: none;">Twitter!</h2>
<p><a id="twitter-link" style="display: block; text-align: right;" href="https://twitter.com/bubuku">Sigueme en Twitter!</a></p>
</div>
<p><script src="https://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="https://api.twitter.com/1/bubuku/lists/desarrolladores/statuses.json?callback=twitterCallback2&per_page=5" type="text/javascript"></script>

Si alguien, utiliza otra formas o quieres comentar alguna parte., estaré encantado de conversar!!