Tutorial: Wie du mehrere Twitter-Feeds auf einer Webseite integrieren kannst

Du willst deine aktuellen Tweets in einer Sprechblase auf deine Webseite oder deinem Blog integrieren? Kein Problem: Den Code dafür findest du auf der Twitter-Webseite in der Hilfe (»Can I put my Twitter updates on my blog?«). Diesen Code fügst du einfach auf deinem Blog ein, und schon kannst du auch auf deiner eigenen Webseite weiter zwitschern. Super!

Doch was, wenn du, wie auch wir auf der Elmastudio-Webseite, zwei oder mehrere Twitter-Feeds gleichzeitig anzeigen willst:
Du fügst einfach beide Codes untereinander auf deine Seite ein. FALSCH, denn das funktioniert leider nicht! Es wird lediglich der erste Twitter-Feed korrekt 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 einfach 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 folgendem Code-Schnipsel (vorletzte 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 mehrere Twitter-Feeds gleichzeigtig anzeigen zu können, musst du diese Datei jedoch herunterladen, 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 speicher die Datei als blogger.js (Javascript-Datei).

3. Ändere den Code der blogger.js Datei

Suche nach folgendem 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 darunter 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 einfach die Zahl hinter Callback, hier 3)

2. Dann suchst du noch folgenden Code-Schnipsel in der unteren Funktion:

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

Und und fügst ebenfalls 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änderte Datei blogger.js auf deinen eigenen Servser hochladen
(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 eigentlichen Twitter-Code aus Schritt 1 unseres Tutorials. Du musst diesen Code-Schnipsel jetzt noch einmal kopieren. Klar, denn du willst ja mindestens zwei Twitter-Feeds auf deiner Seite. :-) Den ersten Code lässt du unverändert.
Den zweiten Code änderst du von:

<ul id="twitter_update_list">

zu:

<ul id="twitter_update_list3">

Natürlich kannst du so viele Feeds einfügen, wie du willst. Dazu wiederholst du einfach die ganze Prozedur ;-) Jeder weitere Feed muss dann natürlich einen individuellen Namen haben.

Okay, und jetzt wirklich der allerletzte Schritt:
Natürlich willst du jetzt nicht mehr auf die Datei blogger.js von twitter.com linken, sondern auf deine eigene. Also ändere noch folgenden 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 korrekt angezeigt.

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

5 Kommentare zu “Tutorial: Wie du mehrere Twitter-Feeds auf einer Webseite integrieren kannst

  1. deejayepidemic

    Hallo,
    hab den o. g. Code umgeschrieben und alles so gemacht wie beschrieben, alles hat nichts gebracht.

    Als letzten Versuch hab ich einfach folgendes gemacht o. g. Code einfach mal höher gesetzt

    von

    /user_timeline/DeineTwitterIDhier.json?callback=twitterCallback2&count=1″>

    auf
    /user_timeline/DeineTwitterIDhier.json?callback=twitterCallback5&count=1″>

    Dadurch werden mir immer die letzten 5 Tweets angezeigt

    Ist doch so viel einfacher oder nicht?

  2. Dank für die Tipps, das werden wir gleich mal testen :-)

  3. Danke – es hat funktioniert ..!

  4. Die verlinkte Twitter Hilfeseite existiert nicht mehr und mit dem Code der hier steht hat es auch nicht geklappt. Kannst du kurz antworten wie man aktuell einen Tweet einbinden kann?

  5. Heyho,

    kurz zum letzten Abschnitt: Wenn die Webseite auf WordPress basiert, sollten die JS-Dateien vielleicht im Theme-Ordner sein und die Zeile in <script type="text/javascript" src="/javascripts/blogger.js“> umgeändert werden.

    Liebe Grüße,
    Jannik

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *