Du willst deine aktu­ellen Tweets in einer Sprechblase auf deine Webseite oder deinem Blog inte­grieren? Kein Problem: Den Code dafür fin­dest du auf der Twitter-Webseite in der Hilfe (»Can I put my Twitter updates on my blog?«). Diesen Code fügst du ein­fach auf deinem Blog ein, und schon kannst du auch auf deiner eigenen Webseite weiter zwit­schern. Super!

Doch was, wenn du, wie auch wir auf der Elmastudio-Webseite, zwei oder meh­rere Twitter-Feeds gleich­zeitig anzeigen willst:
Du fügst ein­fach beide Codes unter­ein­ander auf deine Seite ein. FALSCH, denn das funk­tio­niert leider nicht! Es wird ledig­lich der erste Twitter-Feed kor­rekt angezeigt.

Doch keine Sorge, hier kommt der Trick:

1. Hol dir den Code für deinen Twitter-Feed

Das ist der Code von der Twitter-Webseite, du kannst in ein­fach kopieren. Vergiss nicht deine eigene TwitterID einfügen.

<div id="twitter_div">
<h2 class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/DeineTwitterIDhier" id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/DeineTwitterIDhier.json?callback=twitterCallback2&amp;count=1"></script>

2. Downloade die Datei blogger.js

Suche, in dem eben kopieren Code, nach fol­gendem Code-Schnipsel (vor­letzte Zeile):

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">

Normalerweise kannst du von der Twitter.com Seite auf die Datei blogger.js zugreifen. Um meh­rere Twitter-Feeds gleich­zeigtig anzeigen zu können, musst du diese Datei jedoch her­un­ter­laden, sie umschreiben und auf deinen eigenen Server hochladen.

Na dann mal los:
Kopiere den blogger.js Code hier, füge in in eine Textdatei ein und spei­cher die Datei als blogger.js (Javascript-Datei).

3. Ändere den Code der blogger.js Datei

Suche nach fol­gendem Code-Schnipsel:

function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters .length; i++){
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\< \>\)\]\!])/g, function(url) {
      return '&lt;a href="'+url+'">'+url+'';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'&lt;a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'';
    });
    statusHTML.push('&lt;li><span>'+status+'</span> &lt;a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}
</twitters>

Kopiere den Code und füge in direkt dar­unter ein zweites mal ein.
Jetzt musst du noch zwei Dinge ändern:

1. Zuerst änderst du den Namen der Funktion von:

function twitterCallback2(twitters) {

zu:

function twitterCallback3(twitters) {

(am besten änderst du ein­fach die Zahl hinter Callback, hier 3)

2. Dann suchst du noch fol­genden Code-Schnipsel in der unteren Funktion:

document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');

Und und fügst eben­falls die Zahl (in unserem Beispiel 3) hinzu:

document.getElementById('twitter_update_list3').innerHTML = statusHTML.join('');

Das war’s. Jetzt musst du nur noch die geän­derte Datei blogger.js auf deinen eigenen Servser hoch­laden
(z.B. bei http://www.deinedomain.de/blogger.js.).

Du hast es fast geschafft. Als letzten Schritt musst du nur noch die HTML-Datei anpassen. Na dann mal los zum Endspurt…

3. Ändere den XHTML-Code

Jetzt also zurück zu unserem eigent­li­chen Twitter-Code aus Schritt 1 unseres Tutorials. Du musst diesen Code-Schnipsel jetzt noch einmal kopieren. Klar, denn du willst ja min­des­tens zwei Twitter-Feeds auf deiner Seite. :-) Den ersten Code lässt du unver­än­dert.
Den zweiten Code änderst du von:

<ul id="twitter_update_list">

zu:

<ul id="twitter_update_list3">

Natürlich kannst du so viele Feeds ein­fügen, wie du willst. Dazu wie­der­holst du ein­fach die ganze Prozedur ;-) Jeder wei­tere Feed muss dann natür­lich einen indi­vi­du­ellen Namen haben.

Okay, und jetzt wirk­lich der aller­letzte Schritt:
Natürlich willst du jetzt nicht mehr auf die Datei blogger.js von twitter.com linken, son­dern auf deine eigene. Also ändere noch fol­genden Code von:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">

zu:

<script type="text/javascript" src="http://www.deinedomain.de/javascripts/blogger.js">

Du hast es geschafft. Deine zwei Twitter-Feeds werden jetzt auf deiner Webeseite kor­rekt angezeigt.

Ich hoffe, dieses Twitter-Tutorial hat dir Spaß gemacht. Und du kannst jetzt mit deinen Freunden oder Kollegen gemeinsam auf deiner Webseite los zwit­schern. Wenn du Fragen oder Anregungen zu meinem Tutorial hast, schreibe mir doch ein­fach unten einen Kommentar.