Twitter einbinden mit jQuery

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.

INFO

Das jQuery Plugin wurde übrigens nicht von mir Erstellt, sondern Ledentlich Übersetzt und ein klein wenig Angepasst. Leider ist mir die Original Quelle nicht mehr bekannt da das Script schon was Länger auf meiner Festplatte liegt, sollte jemand einen Link zum Original Plugin haben, bitte in den Kommentaren Hinterlassen.

Im Übrigen kann das jQuery Plugin auch außerhalb von WordPress genutzt werden um z.B. die Letzten Tweets auf eurer Statischen Webseite Anzeigen zu lassen.

Download

jQuery_tweets.zip
Größe: 12,40 kBytes
Downloads: 112

Artikel Informationen

Veröffentlicht am 26. November 2009 um 08:45 Uhr von Fabian.
Abgelegt unter WordPress.
Verwendete Schlagwörter: , , , , , , , , .
Trackback URL | Kommentar-Feed .
Quelltext Anzeigen · Seite Drucken · Artikelnr. 373.

Ähnliche Artikel
Der Autor

Fabian Fabian Künzel wurde 1986 in Neuss geboren und lebt seit 1988 in der am Niederrhein liegenden Stadt Kleve. Seit 2000 beschäftigt er sich mit dem Thema Webdesign und ist seit 2004 Freier Webworker. Er unternimmt ausserdem viel mit seinen Freunden und seinem Hobby RC-Car das er seit Anfang 2009 nachgeht. Mehr Über ihn erfahrt ihr in seinem Web-Profil


Folgende Kommentare wurden hinterlassen

Es sind noch keine Kommentare vorhanden.

Hinterlasse auch du einen Kommentar

Deine Persönliche Angaben

Deine Kommentar Text

Vor dem Abschicken Lesen!

Um mir ein wenig Arbeit und Ärger zu ersparen, gibt es ein paar einfache Regeln und Hinweise, die beim Kommentieren auf fkBlog.de jeder einzuhalten hat.

Regeln!
  • Kommentare die Ausschließlich der Werbung eines Produktes oder der eigenen Webseite dienen, werden nicht Genehmigt und/oder Gelöscht.
  • Kommentare die nicht zum Thema oder zur Diskussion passen, werden ebenfalls ohne Ankündigung Gelöscht.
Hinweise!
  • Jeder 1. Kommentar muss erst von mir Freigeschaltet werden. Dies geschieht normalerweise innerhalb von 24Stunden.
  • Es wäre toll, wenn du mit deinen richtigen Vornamen Kommentierst oder einen Pseudonym unter denn man dich im Internet findet.