Abbiamo già visto in passato come visualizzare i nostri tweet utilizzando il feed JSONP di Twitter e i metodi AJAX di jQuery. In questo articolo completeremo il discorso includendo anche i nostri retweet. Vediamo come procedere.
Useremo la seguente lista non ordinata come contenitore:
<ul id="twitter_results"></ul>
Assegneremo agli elementi creati con jQuery i seguenti stili:
#twitter_results {
font: 76% Arial, sans-serif;
margin: 1em auto;
width: 70%;
}
#twitter_results li {
margin-bottom: 1em;
padding-bottom: 0.3em;
border-bottom: 1px solid #ccc;
min-height: 48px;
}
#twitter_results li img {
float: left;
}
#twitter_results cite {
font-weight: bold;
display: block;
margin-left: 55px;
}
#twitter_results li p {
margin-left: 55px;
padding-top: 4px;
}
Ora come prima cosa dobbiamo creare una funzione helper che ci permetta di trasformare i link testuali e gli hashtag di Twitter in link veri e propri. Incrementeremo la proprietà prototype
dell'oggetto String
con un metodo ad hoc:
if(typeof String.prototype.linkify !== 'function') {
String.prototype.linkify = function() {
var tweet = this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/g, function(url) {
var wrap = document.createElement('div');
var anch = document.createElement('a');
anch.href = url;
anch.target = "_blank";
anch.innerHTML = url;
wrap.appendChild(anch);
return wrap.innerHTML;
});
tweet = tweet.replace(/(^|\s)@(\w+)/g, '$1@<a href="http://www.twitter.com/$2" target="_blank">$2</a>');
return tweet.replace(/(^|\s)#(\w+)/g, '$1#<a href="http://search.twitter.com/search?q=%23$2" target="_blank">$2</a>');
};
}
A questo punto useremo il metodo $.ajax()
di jQuery specificando nel parametro data
la proprietà include_rts
che, settata a 1, istruisce Twitter a restituire anche i nostri retweet:
$.ajax({
type:'GET',
dataType:'jsonp',
url:'http://api.twitter.com/1/statuses/user_timeline.json',
data:{screen_name:'gabromanato', include_rts:1}, //show retweets
success:function(data, textStatus, XMLHttpRequest) {
var tmp = false;
var results = $('#twitter_results');
console.log(data);
for(i in data) {
if(data[i].retweeted_status != null) {
tmp = $('<li class="retweet" itemid="'+data[i].retweeted_status.id_str+'"><img src="'+data[i].retweeted_status.user.profile_image_url+'" alt="" width="48" height="48" /><cite>'+data[i].retweeted_status.user.screen_name+'</cite><p>'+data[i].retweeted_status.text.linkify()+'</p></li>');
if(data[i].retweeted_status.favorited) {
tmp.addClass('favorite');
}
} else {
tmp = $('<li itemid="'+data[i].id_str+'"><img src="'+data[i].user.profile_image_url+'" alt="" width="48" height="48" /><cite>'+data[i].user.screen_name+'</cite><p>'+data[i].text.linkify() +'</p></li>');
if(data[i].favorited) {
tmp.addClass('favorite');
}
}
results.append(tmp);
}
},
error:function(req, status, error) {
alert('error: '+status);
}
});
Potete visualizzare l'esempio finale in questa pagina.