fk:Blog – Fabians Weblog

Twitter einbinden mit jQuery

Es gibt unzählige Plugins für WordPress um den Microblog Dienst „Plugin Directory auf WordPress.org sind 334 Plugins unter den Suchwort „jQuery“ ganz Simple direkt in der functions.php des Themes einbinden.

Dazu benötigt es nicht mehr als eine kleine JavaScript Datei (7kB) und ein wenig Code.

Anleitung

Als erstes laden wir uns die Zip Datei „jQuery_tweets.zip“ auf unserem Computer Herunter. Anschließend entpacken wir die Zip Datei und laden den Ordner js in unseren Theme. Alternativ können wir auch nur die Datei „jquery.tweet.js“ direkt in das Theme Root Laden.
Anschließend können wir das Script in unserem Theme einbinden.
Dazu öffnen wir die „functions.php“ unseres Themes. Sollte diese Datei noch nicht vorhanden sein, kannst du die functions.php aus dem Zip-Archiv verwenden und den Abschnitt „Einbindung in die functions.php“ Überspringen.

Einbindung in die functions.php

Nach dem wir nun die functions.php geöffnet haben, Scrollen wir ganz nach unten. Vor dem ?> fügen wir nun folgenden Code-Schnipsel ein.

/**
 * Last Tweets with jQuery / Letzte Tweets mit jQuery
 *
 * @author    Fabian Künzel
 * @link      http://fkblog.de/wp/jquery-lates-tweets/
 */
wp_enqueue_script('twitter_tweets','/wp-content/themes/YOUR_THEME/js/jquery.tweet.js', array('jquery'),'1.2.6');
function jquery_lates_tweets() {
  echo '
    <script type="text/javascript">
    jQuery(document).ready(function () {
      // jQuery Twitter Tweets
      jQuery(".tweet").tweet({
        username: "eisregen1986",
        join_text: "auto",
        avatar_size: 50,
        count: 5,
        auto_join_text_default: "sagte ich: ",
        auto_join_text_ed: "Ich",
        auto_join_text_ing: "Ich war",
        auto_join_text_reply: "Meine Antwort zu",
        auto_join_text_url: "URL: ",
        loading_text: "Lade tweets..."
      });
    });
    </script>
  ';
}
//  Add Filters to wp_head()
add_action('wp_head', 'jquery_lates_tweets'); 

Wichtig ist das in eurer header.php der Template Tag „wp_head();“ Definiert ist. Ohne diesen kann das Script nicht über WordPress eingebunden werden

Ebenfalls solltet ihr YOUR_THEME gegen euren Theme Namen Ändern (wp_enqueue_script()).

Einbau im Theme und somit zur Ausgabe der Tweets

Um nun auch eure Tweets in euren Theme Auszugeben, benötigt es nur noch einen kleinen HTML Schnipsel, den ihr an der gewünschten Stelle eures Themes schreiben müsst.

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

Das jQuery Plugin erkennt den Div Tag durch die Klasse „tweet“ und nutzt diese bei Aktivierten JavaScript Automatisch für die Tweets. Sollte der Benutzer kein JavaScript Aktiviert haben, so wird auch nix angezeigt.

Mehr wird nicht benötigt um eure Letzten Twitter Aktivitäten in euren Blog Anzuzeigen.

Einstellungen des jQuery Plugins

Das jQuery Plugin bringt auch ein paar Variablen mit, die ihr Einstellen könnt.

Wenn wir uns aus der functions.php z.B. den Code innerhalb script-Tags Anschauen, werden wir diese entdecken.

        username:"eisregen1986",
        join_text: "auto",
        avatar_size: 48,
        count: 20,
        auto_join_text_default: "sagte ich: ",
        auto_join_text_ed: "Ich",
        auto_join_text_ing: "Ich war",
        auto_join_text_reply: "Meine Antwort zu",
        auto_join_text_url: "URL: ",
        loading_text: "Lade tweets..."

Diese Angaben findet ihr auch in der jquery.tweet.js ganz zu Beginn und kannst sie auch dort editieren. Dazu schaue dir aber den Schluss Absatz zu „Einstellungen des jQuery Plugins“ an.

Zu den Einstellungen.

username dürfte selbstklärend sein. Anstelle von „eisregen1986“ gebt ihr dort euren Twitter Account Namen ein.
Ihr könnt mit Hilfe von username aber auch mehrere Benutzer in die Ausgabe des Plugins holen.
Dazu müsst ihr anstelle von username:”eisregen1986″, folgendes schreiben: username:["eisregen1986","Benutzer2"],
Somit könnt ihr die Letzten Tweets mehrerer Benutzer Anzeigen lassen.

avatar_size gibt die Größe (in Pixel) des Twitter Avatares aus. Hier sollte Maximal 48px gewählt werden, da sich die Avatare sonst verpixeln.

count gibt an, wie viele der Letzten Tweets Angezeigt werden sollen. Hier sollte jeder selbst ein ermessen finden.

auto_join_text_XX gibt bei eingeschaltetem Autotext (siehe ende Kapitel) automatisch die Vorgegebenen Texte aus. Wofür die einzelnen Text Passagen bentötigt werden, könnt ihr in der jquery,tweet.js nachlesen.

loading_text gibt einen Text aus, solange jQuery die API von Twitter abfragt. Hier empfehlt sich der vorgegebene Wert.

jquery.tweet.js

Alle Einstellungen können auch direkt in der jquery.tweet.js durchgeführt werden. Dort stehen alle Werte mit einem kurzen Kommentar direkt zu Beginn der Datei.

Solltet ihr die Einstellungen über die JS Datei benutzen wollen, müsst ihr die Werte in der functions.php innerhalb des script-tags entfernen.
Um alle Einstellungen aus der JS Datei zu nutzen, reicht es das ihr dann nur noch

<script type="text/javascript">
    jQuery(document).ready(function () {
      // jQuery Twitter Tweets
      jQuery(".tweet").tweet({
      });
    });
</script>

stehen habt.

Gestaltung der Letzten Tweets

Damit ihr die Ausgabe des jQuery Plugin euren Bedürfnissen anpassen könnt, gibt es folgende CSS Klassen für die Ausgabe.

.tweet

ul. tweet_list
li. tweet_first
li. tweet_odd
li. tweet_even

a.tweet_avatar

. meta
. tweet_text

Somit stehen euch alle Möglichkeiten der Gestaltung frei wählbar und eurer Kreativität sind keine Grenzen Gesetzt.

JQuery Tweets (297)