Cómo mostrar tweets con jQuery – Tutorial

Si el sitio está montado bajo algún CMS como WordPress, es sencillo hallar un plugin que muestre nuestros Tweets. Pero si se trata de un desarrollo propio o simplemente queremos hacer toda la tarea nosotros mismos y así aprender a hacerlo con jQuery, entonces nos toca leer el siguiente tutorial: Cómo mostrar tweets con jQuery.

Implementación

Primero enlazamos la biblioteca jQuery:

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

Javascript

Luego agregamos el código Javascript que le da vida a la implementación:

<script type="text/javascript" charset="utf-8">
function showTweets(elem, username, number)
{
var html = '<ul>';
var tweetFeed = 'http://twitter.com/status/user_timeline/'
+ username + '.json?count=' + number + '&callback=?'
$.getJSON(tweetFeed, function(d)
{
$.each(d, function(i,item)
{
html+='<li>'+item.text+'</li>';
})
html+="</ul>";
elem.children().fadeOut('fast',function() {
elem.append(html);
})
})
}
$(function() {
$('#error').remove();
$('#preload').show();
showTweets($('#tweets'), 'Jack_Franklin', 5)
});
</script>

CSS

Usamos CSS para ocultar inicialmente los elementos que mostraremos luego:

<style type="text/css" media="screen">
#preload {display: none;}
</style>

HTML

Por último, agregamos el siguiente código HTML en donde queremos mostrar los tweets:

<div id="tweets">
<h3 id="error">There was a problem fetching tweets</h3>
<h3 id="preload">Currently loading your tweets...</h3>
</div>

Cómo mostrar tweets con jQuery

Nota: Cómo mostrar tweets con jQuery es un traducción libre del turial publicado por www.thewebsqueeze.com: Displaying Your Tweets On Your Website With jQuery.