Caching ist eine schöne Sache. Die Sei­ten wer­den schnel­ler aus­ge­ge­ben und man muss kür­zer war­ten. Marian hat auf uxzen­trisch beschrie­ben, warum schnelle Web­sites wich­tig sind.

Nur wie soll man dann aktu­elle Daten wie den letz­ten Tweet anzei­gen. Die Lösung ist Java­script und ins­be­son­dere mal wie­der jQuery.

Auf onygo benutze ich das Word­Press Plug-In WP Super Cache um die Word­Press Sei­ten zu cachen. Die gecach­ten Sei­ten wer­den nach 86400 Sekun­den — also einem Tag — gelöscht.

Um die Tweets via jQuery abzu­ru­fen und aus­zu­ge­ben ver­wende ich die Plug-Ins jTwit­ter und Timeago sowie die Date Erwei­te­rung Date.format. Zudem benutze ich das Word­Press Plug-In Twit­ter Tools von Alex King, um Tweets auch ohne Java­script — dann aber nicht den neu­es­ten — anzuzeigen.

Zudem benutze ich eine AJAX–Loader-Grafik von Ajax­load.

Mein HTML besteht aus je einem span für den Tweet und einem für sei­nen Zeits­tem­pel. Zudem wird ein Pre­loa­der für die Lade­zeit eingeblendet.

1
2
3
4
5
6
7

<div id="twitter">
  <span class="status jshide">
    <span id="tweet">Tweettext</span>
    <span id="tweettime">Tweettime</span>
  </span>
  <span class="preloader nojshide"><img src="ajax-loader-white.gif" /></span>
</div>

Die bei­den Ele­mente wer­den wie hier beschrie­ben abhän­gig vom Vor­han­den­sein von Java­script ange­zeigt. Dafür wird fol­gen­des CSS benutzt:

1
2
3

.hide, .hasjavascript .jshide, .hasnojavascript .nojshide {
  display:none;
}

Und natür­lich muss auch noch etwas in die $(document).ready Funk­tion ein­ge­fügt werden:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

$(document).ready(function(){
  $.jTwitter('TWITTERID', 1, function(posts){
    var text = posts[0].text ;
    text = text.replace(/http:\/\/(\S*)/gi,"<a href=\"http://$1\" class=\"external\">http://$1</a>");
    text = text.replace(/https:\/\/(\S*)/gi,"<a href=\"https://$1\" class=\"external\">https://$1</a>");
    text = text.replace(/@(\w*)/gi, "@<a href=\"http://twitter.com/$1\" class=\"external\">$1</a>");
    text = text.replace(/#(\w*)/gi, "#<a href=\"http://search.twitter.com/search?q=%23$1\" class=\"external\">$1</a>");
 
    if (posts[0].in_reply_to_screen_name) {
        text += ' <a href="http://twitter.com/'+posts[0].in_reply_to_screen_name+'/statuses/'+posts[0].in_reply_to_status_id+'" class="aktt_tweet_reply external">';
        text += 'als Antwort auf '+posts[0].in_reply_to_screen_name+'</a> ';
    }
    $('#tweet').html(text);
 
    var thedate = new Date(posts[0].created_at);
    var thetime;
    var isodate = thedate.format("c");
    thetime = '[<a href="http://twitter.com/'+ posts[0].user.screen_name +'/statuses/'+ posts[0].id +'" class="aktt_tweet_time external timestamp" timestamp="' + isodate + '" title="' + isodate + '">';
    thetime += 'am '+ thedate.format("j. M Y") + ' um ' + thedate.format("H:i");
    thetime += '</a> via ' + '<a href="http://twitter.com/'+ posts[0].user.screen_name +'/" class="external">Twitter</a>]';
 
    $('#tweettime').html(thetime);
    $(".timestamp").timeago();
    $("#twitter .preloader").addClass('hide');
    $("#twitter .status").removeClass('jshide');
  });
});

Mein HTML ist im Java­script fest ein­co­diert und muss ent­spre­chend ange­passt wer­den. Und natür­lich muss die rich­tige Twit­te­rID ange­ge­ben werden.