jQuery: visualizzare anche i nostri retweet da un feed JSONP di Twitter

jQuery: visualizzare anche i nostri retweet da un feed JSONP di Twitter

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.

Torna su