Twitter-Box auf der eigenen Website

Es gibt sehr viele Methoden einen Twitter-Stream in die eigene Website einzubinden. Ein bestimmtes Tool hat mich besonders überzeugt! Es handelt sich um folgendes.

Benötigte Dateien

• JQuery (Hier benutze ich die von Google)
• jquery.tweet.js
• jquery.tweet.css

Die Dateien könnt ihr euch hier herunterladen.

Anleitung zum Einbinden des Twitter-Tools

Zuerst binden wir die benötigten Javascript-Dateien im Head der Seite ein:

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="/tweet/jquery.tweet.js" type="text/javascript"></script> 

 Die Twitter Informationen werden hier definiert. Dieses Skript platzieren wir auch im Head der Seite

<script type='text/javascript'>
    jQuery(function($){
        $(".tweet").tweet({
            username: "seaofclouds",
            join_text: "auto",
            avatar_size: 32,
            count: 3,
            auto_join_text_default: "we said,",
            auto_join_text_ed: "we",
            auto_join_text_ing: "we were",
            auto_join_text_reply: "we replied to",
            auto_join_text_url: "we were checking out",
            loading_text: "loading tweets..."
        });
    });
</script> 

Bei username tragt ihr euren Twitter Benutzernamen ein, avatar-size bestimmt die Größe des Vorschaubildes, welches angezeigt wird. Mit count könnt ihr bestimmen, wieviele Meldungen angezeigt werden.

Einbinden der CSS-Datei

Den Pfad der CSS-Datei müssen wir ebenfalls in den Head der Seite platzieren. Das sieht so aus:

<link href="jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/> 

Achtet dabei unbedingt darauf, dass der Pfad richtig ist. Nun haben wir alle Dateien implementiert und können die Twitter-Box an eine beliebige Stelle in unserem Layout einfügen. Dazu reicht folgender Code im Body der Seite:

<div class="tweet"></div> 

Das war´s schon?

In der Tat war´s das schon. Nun sollte die Twitter-Box auf eurer Website angezeigt werden.