AJAX: Twitter timeline

July 23rd, 2012 | 5 min read | AJAX, CSS3, JavaScript, jQuery, Twitter, Web

Omdat ik de laatste tijd enorm veel bezig ben met Twitter voor een project, vond ik het zeker geen slecht idee om eens te laten zien dat je de Twitter timeline ook eenvoudig met jQuery/AJAX kan tonen.

Het project zal bestaan uit 3 delen, namelijk:

  • een HTML gedeelte
  • een jQuery gedeelte
  • een CSS gedeelte

Warning!

Deze tutorial maakt gebruikt van de Twitter 1.0 REST API. Deze is sinds 11/06 retired, deze tutorial werkt dus niet meer en kan enkel gebruikt worden als referentie.

Bron

HTML gedeelte

Het HTML gedeelte is redelijk eenvoudig. Het enige wat we nodig hebben is een pagina met een initiële DIV die gebruikt zal worden om de berichten toe te voegen.
File: index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Twitter timeline</title>
        <script type="text/javascript" src="assets/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="assets/js/jquery-timeago.js"></script>
        <script type="text/javascript" src="assets/js/jquery-timeline.js"></script>
        <link href="assets/css/style.css" rel="stylesheet" />
    </head>
    <body>
        <div id="timeline"></div>
    </body>
</html>

jQuery gedeelte

Voor dit gedeelte moeten we eerst enkele zaken in orde brengen. Het eerste wat je moet doen is jQuery downloaden van jQuery.com. We gaan ook gebruik maken van een plugin voor jQuery om de tijd anders weer te geven. Deze plugin noemt timeago en valt hier te verkrijgen.

Beide files dienen in de map assets/js opgeslagen te worden.

Daarna kunnen we de eigen geschreven jQuery code gaan gebruiken:
File: assets/js/jquery-timeline.js

$(document).ready(function() {

    $
    $.ajax({
        url: "http://api.twitter.com/1/statuses/user_timeline.json",
        type: "GET",
        data: {
            include_entities: true,
            include_rts: true,
            screen_name: "g00glen00b",
            count: 6
        },
        success: function(data) {
            showTweets(data, 0);
        },
        dataType: "jsonp"
    });
});
function showTweets(data, i) {
    if (i < data.length) {
        $("#timeline").append(styleTweet(data[i]));
        $("#" + data[i].id_str).fadeIn('normal', function() {
            showTweets(data, i + 1);
        });
    }
}

function styleTweet(obj) {
    return '<div id="' + obj.id_str + '" style="display: none"><div class="thumbnail"><img src="' + obj.user.profile_image_url + '" /></div><div class="content"><h1>' + obj.user.name + ' <a href="http://twitter.com/' + obj.user.screen_name + '">@' + obj.user.screen_name + '</a> <span class="time">' + $.timeago(new Date(obj.created_at)) + '</span></h1><p>' + formatText(obj.text) + '</p></div></div><hr />';
}

function formatText(text) {
    text = text.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&~\?\/.=]+/g, function(url) {
        return url.link(url);
    });
    text = text.replace(/[#]+[A-Za-z0-9-_]+/g, function(hash) {
        txt = hash.replace("#", "");
        return hash.link("http://twitter.com/search/%23" + txt);
    });
    text = text.replace(/[@]+[A-Za-z0-9-_]+/g, function(u) {
        var username = u.replace("@","")
        return u.link("http://twitter.com/" + username);
    });
    return text;
}

Zoals je kan zien maken we hier gebruik van een AJAX call naar de RESTful webservice van Twitter. We gaan een JSON output terug verwachten, maar omdat we te maken hebben met een crossdomain call, moeten we als

dataType

het type

jsonp

meegeven in plaats van

json

.

Het handige aan JSON is dat de JSON response direct wordt omgezet in JavaScript objecten, waardoor we dus via

obj.user.screen_name

de gebruikersnaam terug kunnen krijgen. Om alles een beetje fancier te maken maak ik gebruik van een recursieve functie

showTweets

in plaats van een gewone

for

-lus. Hierdoor kan ik ervoor zorgen dat elke tweet een fadeIn effectje krijgt alvorens de volgende tweet getoond wordt.

De laatste functie

formatText

zal ervoor zorgen dat hashtags, usernames en links terug omgezet worden naar links in HTML. Hiervoor maken we gebruik van reguliere expressies en een filter functie om deze links terug te maken.

Zoals ik eerder al zei maken we ook gebruik van een jQuery plugin TimeAgo, in de functie

styleTweet

zal je achteraan vinden dat in plaats van de datum te tonen, we dit object eerst via een

$.timeago

functie sturen die in plaats van de datum iets zal terug geven als “4 hours ago”.

CSS gedeelte

Eigenlijk is hiermee het geheel al werkende, maar om de stijl een beetje aan te passen gaan we ook gebruik maken van CSS (en enkele nieuwe dingen uit CSS3).
File: assets/css/style.css

#timeline {
    width: 450px;
}

#timeline h1 {
    color: #333;
    font: normal normal 700 14px/18px Arial;
    height: 18px;
    margin-bottom: 0px;
}

#timeline .content {
    float: left;
    height: 100%;
    width: 402px;
}

#timeline .thumbnail {
    float: left;
    height: 100%;
    margin-top: 9px;
}

#timeline a {
    color: #0088CC;
    font: normal normal 400 14px/18px Arial;
    text-decoration: none;
}

#timeline a:focus {
    outline-offset:  -2px;
    outline: thin dotted #333;
}

#timeline a:hover {
    color: #005580;
    text-decoration: underline;
}

#timeline h1 span.time {
    color: #999;
    font: normal normal 400 12px/18px Arial;
}

#timeline p {
    clear: both;
    color: #333;
    font: normal normal 400 13px/18px Arial;
    margin-top: 0px;
}

#timeline hr {
    clear: both;
    height: 1px;
    margin: 15px 0;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
    border: 0;
}

Met deze CSS file zit dit voorbeeld er dan ook op.  Hieronder vind je enkele screenshots terug en een link naar dit project zelf.

Download project

Download – ajax-twitter-timeline.rar (36 kB)

Demo

Back to tutorialsContact me on TwitterDiscuss on Twitter

Profile picture

Dimitri "g00glen00b" Mestdagh is a consultant at Cronos and tech lead at Aquafin. Usually you can find him trying out new libraries and technologies. Loves both Java and JavaScript.