onygo

Aktuellen Tweet per jQuery ausgeben

24 Jan 2010 — 0 Comments — , , , — Estimated reading time: 4 minutes read

Cach­ing ist eine schöne Sache. Die Seiten wer­den schneller aus­gegeben und man muss kürzer warten. Mari­an hat auf uxzentrisch bes­chrieben, war­um schnelle Web­sites wichtig sind. 

Nur wie soll man dann aktuelle Daten wie den let­zten Tweet anzei­gen. Die Lösung ist Javas­cript und ins­beson­dere mal wieder jQuery.

Auf onygo ben­utze ich das Word­Press Plug-In WP Super Cache um die Word­Press Seiten zu cachen. Die gecacht­en Seiten wer­den nach 86400 Sekun­den — also einem Tag — gelöscht. 

Um die Tweets via jQuery abzurufen und aus­zugeben ver­wende ich die Plug-Ins jTwit­ter und Timea­go sow­ie die Date Erweit­er­ung Date.format. Zudem ben­utze ich das Word­Press Plug-In Twit­ter Tools von Alex King, um Tweets auch ohne Javas­cript — dann aber nicht den neuesten — anzuzeigen. 

Zudem ben­utze ich eine AJAX-Load­er-Grafik von Ajax­load.

Mein HTML besteht aus je einem span für den Tweet und einem für sein­en Zeit­stem­pel. Zudem wird ein Pre­load­er für die Ladezeit 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 beiden Ele­mente wer­den wie hier bes­chrieben abhängig vom Vorhanden­sein von Javas­cript angezeigt. Dafür wird fol­gendes 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 einge­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 Javas­cript fest ein­cod­iert und muss ents­prechend ange­passt wer­den. Und natür­lich muss die richtige Twit­ter­ID angegeben werden. 

1 Trackback

No comments yet

Post a comment

Your comment

Your Gravatar