Aktuellen Tweet per jQuery ausgeben

1
 
 
24. Jan. 2010

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.

 

twitter als Primärmedium?

0
 
 
10. Apr. 2008

Screenshot twitter

Anfangs fand ich twit­ter sehr komisch. Wozu soll es gut sein? Wofür kann man es benut­zen? Jetzt ein Jahr spä­ter hat sich das Blatt deut­lich gewen­det. twit­ter ist zu einem mei­ner pri­mä­ren Kom­mu­ni­ka­ti­ons­me­dien gewor­den. Ich benutze es zur Kom­mu­ni­ka­tion mit Freun­den, als Pro­blem­lö­sungs­tool und um ein­fach up-to-date zu blei­ben. Viele Ideen nutze ich schon praktisch.

Vor eini­gen Jah­ren haben wir in einem Pro­jekt an der FH einen SMS–Ser­ver gebas­telt, mit des­sen Hilfe Dozen­ten ihren Stu­den­ten kurze Nach­rich­ten wie »Heute fällt die Vor­le­sung aus.« oder »Vor­le­sung ver­legt in Raum ABC« über­mit­teln könn­ten. Mitt­ler­weile würde ich so einen Dienst über twit­ter rea­li­sie­ren. Ich würde mei­nen Stu­den­ten zuerst eine kurze twit­ter Ein­füh­rung geben. Anschlie­ßend würde ich ihnen ent­we­der einen vor­le­sungs­spe­zi­fi­schen oder einen all­ge­mei­nen twit­ter Account mit­tei­len. Wel­che Vari­ante davon ich nut­zen würde, ist ein biss­chen Stern­deu­te­rei, hier wür­den Fak­to­ren wie Struk­tur der Hörer ein­flie­ßen. Die Stu­den­ten müss­ten dann den Account fol­lo­wen. Wie sie sich benach­rich­ti­gen las­sen müss­ten sie dann selbst ent­schei­den. Sogar eine SMS Benach­rich­ti­gung ist ja kos­ten­frei. Wesent­li­che Ankün­di­gun­gen wür­den dann im Wesent­li­chen nur noch über twit­ter — natür­lich mit Anbin­dung an meine per­sön­li­che Web­site — erfol­gen. Selbst meine direkte Kom­mu­ni­ka­tion mit den Stu­den­ten würde via twit­ter lau­fen kön­nen. Zumin­dest als Expe­ri­ment wäre das nicht uninteressant.

Natür­lich las­sen sich noch eine ganze Menge ande­rer Sze­na­rien ent­wi­ckeln. Ein »Rock für Zivil­cou­rage« oder ein »Rock am Zoll« würde mitt­ler­weile nicht mehr ohne twit­ter Account aus­kom­men. Und natür­lich auch nicht ohne ein ent­spre­chen­des twit­ter­verse Moni­to­ring.

Sehr schöne twit­ter Ein­füh­run­gen gibt es bei Caro­line Midd­le­brook und Oli­ver Über­holz. Viel­leicht kommt ja twit­ter auch bald in der nor­ma­len Welt an. Es wäre sehr nett.

 

Just Twittering

0
 
 
9. Apr. 2008

Meine Num­mer 1, jetzt ein Jahr her:

Erster Tweet

Warum? Darum!

 

Und noch mehr Communities…

0
 
 
25. Apr. 2007

Social Web ist in aller Munde. Auch ich habe schon mehr­mals dar­über geschrie­ben. Immer mehr Netz­werke für immer spe­zi­el­lere Inter­es­sen kom­men in den letz­ten Mona­ten auf den Markt. XING, Lin­ke­dIn und Stu­diVZ sind alte Hüte. Twit­ter ist gerade auch in aller Munde. In die­sem Wald von Com­mu­nities gibt es den­noch zwei Netz­werke die mir beson­ders gut gefallen.

Jog­map ist ein Ser­vice in dem man seine per­sön­li­chen Läufe ver­wal­ten kann. Ähnlich wie beim GMap Pedo­me­ter kann man hier Lauf­stre­cken auf Google Maps ver­mes­sen. Anders als beim Pedo­me­ter kann man aber auch ver­wal­ten, wann man in wel­cher Zeit, mit wel­chem Puls und wel­cehn Schu­hen gelau­fen ist. Zudem kann man von ande­ren Nut­zern erstellte Stre­cken auch per Click zu sei­nen eige­nen Stre­cken hin­zu­fü­gen. Ein echt fei­nes Tool, des­sen Com­mu­ni­ty­funk­tio­nen ich aber kaum nutze.

Ein ande­res schö­nes Kon­zept ist Town­kings, die ver­su­chen eine lokale Com­mu­nity Basis zu schaf­fen. Lei­der ist das Sys­tem noch ein biß­chen buggy, so dass ich mein Pro­fil der­zeit nicht upda­ten kann und auch kein Photo hoch­la­den kann. Ins­ge­samt ist das Sys­tem eine echt schi­cke Flash-Anwendung — eigent­lich kein Wun­der wenn Powerflas­her drin­steckt — mit hohem Poten­zial. Wie das Sys­tem nach der Beta­phase funk­tio­niert, wird echt spannend.

 

 
 
 
re:publica 12
 
 
 
ältere Einträge
neuere Einträge
 
Creative Commons-Lizenz BY-NC-SA 3.0 DE