jQuery: riprodurre il layout del nostro profilo di Twitter utilizzando le API

Nel nostro profilo di Twitter sono contenute molte informazioni che ci possono tornare utili qualora volessimo ricreare il look and feel della pagina del nostro profilo. In questo articolo vedremo come estrarre delle risorse utili dal nostro profilo di Twitter.

Creiamo un semplice header HTML:

<h1 id="twitter-header"><a href="http://twitter.com/gabromanato/">@gabromanato</a></h1>​

Ora gli assegniamo degli stili CSS di base:

#twitter-header {
    font: 2em Arial, sans-serif;
    height: 8em;
    background-repeat: repeat-x;
    color: #fff;
    line-height: 6.5;
    padding-left: 3em;
    position: relative;
}

#twitter-header a {
    text-decoration: none;
    padding: 5px;
    background: #fff;
    border-radius: 10px;
}

#twitter-header img {
    position: absolute;
    top: 31%;
    left: 1em;        
}
​

Useremo le API di Twitter relative ai profili utente per estrarre l'URL del nostro avatar e dell'immagine di sfondo della pagina del nostro profilo unitamente al colore dei link della nostra pagina:

var getResourcesFromTwitter = function() {
    var url = 'https://api.twitter.com/1/users/lookup.json?screen_name=gabromanato&callback=?';
    $.getJSON(url, function(data) {
        var background = data[0].profile_background_image_url;
        var profileImage = data[0].profile_image_url;
        var linkColor = data[0].profile_link_color;
        $('#twitter-header').css('backgroundImage', 'url(' + background + ')');
        $('a:first', '#twitter-header').css('color', linkColor);
        $('<img/>').attr('src', profileImage).appendTo('#twitter-header');
    });
}


getResourcesFromTwitter();

Per utilizzare il codice di cui sopra è sufficiente che modifichiate la stringa dell'URL di Twitter inserendo il vostro nome utente. Potete visionare l'esempio finale in questa pagina.