Performance in WordPress: Twitter-Link mit Caching-Funktion

Artikel vom 4. Juni 2009

Die Anzahl der auf Blogseiten platzierten “Tweet this!”-Buttons nimmt kontinuierlich und proportional zu der Beliebtheit von Twitter zu: Der moderne Leser soll den konsumierten Artikel nicht nur als Social-Bookmarks speichern, auch über Twitter soll der Beitrag weitergereicht werden – Empfehlungen per E-Mail sind längst out. Auch diverse WordPress-Plugins blenden im Blog mit Twitter verknüpfte Schaltflächen ein. Doch meine Lösung ist Performance-schonender und smarter.

Bemerkung vom 4. Mai 2010
Bedauerlicherweise wurde die weiter unten beschriebene Möglichkeit der URL-Konvertierung seitens Bit.ly eingestellt. Eine Umwandlung der Links ohne Verifizierung – also ohne den API Key eines gültigen Bit.ly Accounts – ist leider nicht länger möglich.

Außen hui, innen pfui
Quiz: Welchen gemeinsamen Nenner hat die Großzahl der TweetThis-Plugins für WordPress? Es ist durchaus üblich, die “ReTweet”-Schaltfläche direkt unter dem Beitrag abzubilden: Der Lesestoff kann somit unverzüglich und bequem getwittert werden, ohne die Artikeladresse manuell in die Zwischenablage umständlich kopieren zu müssen.

Leider versagen an dieser Stelle die meisten Plugins (die Software ist so dumm wie der dahinterstehende Entwickler). So wird der Button zwar einwandfrei ausgerichtet, allerdings lässt die im Blog installierte WordPress-Erweiterung bei jedem Seitenaufruf eine gekürzte Version des Permalinks erzeugen und kommuniziert dafür mit einer externen Schnittstelle. Auf wiederholte Weise.

Was bedeutet es im Klartext?

Eine Blogseite mit einem Post wird im Browser aufgerufen.
Für die Generierung eines Twitter-Links (ganz gleich, ob es ein grafischer Button oder ein Textlink ist) bedarf es eine ShortURL, um der begrenzten Zeichenanzahl gerecht zu werden.
Das “böse” Plugin baut eine Verbindung zu einem Drittanbieter wie z.B. tr.im auf, um solch eine knappe URL generieren zu lassen.
Die als Wert zurückgegebene URL wird als Verknüpfung verwendet, der Beitrag kann retwittert werden.

Bittere Zusammenfassung
Bei jedem Seitenaufruf wird eine ausgehende Verbindung hergestellt und auf eine Antwort seitens des ShortURL-Dienstes gewartet. Mit jeder Seite, immer wieder aufs Neue. Das kostet nicht nur unnötigen Traffic, vielmehr kommt es zum Ausbremsen des Ladevorgangs.

Wenn im Blog Optimierungsarbeiten durchgeführt werden müssen, dann ist dieser Punkt die Startlinie des Marathons. Zwischenspeichern ist die Devise!

TweetThis! mit Köpfchen
Die von mir entwickelte Lösung ist kleiner als jedes Plugin, daher gehört sie in die örtliche functions.php, die (fast) jedem Theme beiliegt und jederzeit geladen wird. Der wesentliche, gewinnbringende Unterschied zu der Konkurrenz: Die Cache-Funktion der gekürzten Adresse. Die Zwischenspeicherung trägt dafür Sorge, dass der externe Dienstleister (in unserem Fall ist es bit.ly) nicht wiederholt angesprochen werden muss. Deutliche Reduzierung der Verbindungsanzahl bringt mit sich schnellere Ladezeiten als Resultat.

Zuständige Funktionen | Gehören in functions.php

<?php
if (!function_exists('save_tweet_link')) {
  function save_tweet_link($id) {
    $url = wp_remote_retrieve_body(
      wp_remote_get(
        'http://bit.ly/api?url=' .get_permalink($id)
      )
    );
    if (!$url) {
      return sprintf(
        '%s?p=%s',
        get_bloginfo('url'),
        $id
      );
    }
    add_post_meta(
      $id,
      '_tweet_trim_url',
      $url
    );
    return $url;
  }
}

if (!function_exists('the_tweet_link')) {
  function the_tweet_link() {
    if (!$url = get_post_meta(get_the_ID(), '_tweet_trim_url', true)) {
      $url = save_tweet_link(get_the_ID());
    }
    echo sprintf(
      'http://twitter.com/home?status=%s%s%s',
      urlencode('Lese grade: '),
      $url,
      urlencode(' (via @wpSEO)')
    );
  }
}
?>

Alternativer Code mit dem Beitragstitel im Tweet

<?php
if (!function_exists('save_tweet_link')) {
  function save_tweet_link($id) {
    $url = wp_remote_retrieve_body(
      wp_remote_get(
        'http://bit.ly/api?url=' .get_permalink($id)
      )
    );
    if (!$url) {
      return sprintf(
        '%s?p=%s',
        get_bloginfo('url'),
        $id
      );
    }
    add_post_meta(
      $id,
      '_tweet_trim_url',
      $url
    );
    return $url;
  }
}

if (!function_exists('the_tweet_link')) {
  function the_tweet_link() {
    if (!$url = get_post_meta(get_the_ID(), '_tweet_trim_url', true)) {
      $url = save_tweet_link(get_the_ID());
    }

    echo sprintf(
      'http://twitter.com/home?status=%s%s%s%s',
      urlencode(get_the_title()),
      urlencode(': '),
      $url,
      urlencode(' (via @wpSEO)')
    );
  }
}
?>

Funktionsaufruf der Link-Generierung | Gehört in single.php

<?php if (function_exists('the_tweet_link')) { ?>
  <a href="<?php the_tweet_link() ?>">ReTweet</a>
<?php } ?>

Als WordPress Plugin verfügbar
Modifizierte Version des obigen Code: Bit.ly Retweet for WordPress

Hinweise
Ab WordPress 2.7 nutzbar. Der untere Link “Artikel twittern” basiert auf dem vorgestellten Verfahren.

Nachgefragt
Habt ihr auch ein “TweetThis!”-Plugin im Einsatz? Was denkt ihr, wie oft wird der Button überhaupt von der Leserschaft genutzt, um einen Artikel in die Twittersphäre abzusetzen?

[Der Autor] Sergej Müller ist enthusiastischer Software Engineer mit Schwerpunkten Webentwicklung und WordPress. Seit 2007 programmiert und vertreibt er wpSEO, das weltberühmte und patentierte SEO-Plugin für WordPress-Blogs.

42 Kommentare zum Artikel

421 Tage zuvor | #1 Thomas Scholz

Die oft langsamen und unzuverlässigen externen Anbieter sind doch kalter Kaffee. Schon vor fast zwei Monaten habe ich gezeigt, wie man allein mit Bordmitteln eine kurze URL generiert: http://toscho.de/2009/shortlinks-in-wordpress/
Peter Kröner hat das in eine WordPress-Funktion eingebaut, die dann den Tweetlink erzeugt.

Man muß ja nicht immer gleich die Datenbank zumüllen. ;)

421 Tage zuvor | #2 Fabian

Nö, ich habe kein TweetThis-Plugin. Das liegt einfach daran, dass ich nicht twittere und dann (egoistischer Weise) auch nicht Werbung dafür mache.

Ich kann mir nicht vorstellen, dass solch ein Button viel genutzt wird. Es ist ja bestimmt nicht jeder Beitrag twitter-relevant und bei denjenigen, die es sind, wird der Twitterer sich die Mühe machen und den Link selbst verkürzen.

421 Tage zuvor | #3 Sergej Müller

@Thomas
Ja, dein Weg kommt zwar ohne einer Umwandlung des Permalinks aus, hat dafür aber auch Nachteile: Je nach länge der Domain kann die URL doch schon deutlich länger werden als der Pendant von tr.im – bei Twitter zählt jedes Zeichen.

Und mit “meinblog.de?p=xxx” als Permalinkstruktur der Artikel möchte nicht jeder Blogbetreiber nach außen kommunizieren, da sind die schönen selbstsprechenden URLs doch professioneller und eleganter – halt wie im Blog eingestellt.

Ist aber alles Geschmacksache, kommt auf den Anwendungsfall an. Hauptsache der Blogger hat eine Auswahl an funktionierenden und überlegen programmierten Lösungen.

421 Tage zuvor | #4 Peter Claus Lamprecht

Hallo Sergej,
eine ähnliche Lösung setze ich bereits seit April im Blog von Monika Birkner ein, übrigens auch mit tr.im.

Ergänzungsvorschlag:
Sollte einmal der URL-Shortener (tinyURL, tr.im…) nicht erreichbar sein, dann sollte die Funktion ‘save_tweet_link’ zumindest die nicht gekürzte Permalink-URL zurückgeben. Aktuell würde sie nichts oder gar eine Fehlermeldung liefern.

Die Funktion ‘the_tweet_link’ würde ich mit Parametern ausstatten, so dass man das, was vor und nach der gekürzten URL steht, beeinflussen kann (also die Texte ‘Lese gerade:’ und ‘(via…)’.

@Thomas:
Für WordPress gibt es eine weitere gute Lösung, um zu kurzen URLs zu kommen: twitter friendly links.
Dieses Plugin nutzt auch die ID des jeweiligen Blog-Artikels, jedoch in dieser Form: Blog-URL/xxx

Das Schöne daran: da die Links in Twitter direkt auf das Blog zeigen, steigt sehr wahrscheinlich auch dessen Linkpopularität.

Sonnige Grüße,
PC’L

421 Tage zuvor | #5 Sergej Müller

@Peter Claus
Danke für dein Feedback.

Warum hast du die Lösung denn nicht veröffentlicht? Dann hätte ich mir die Entwicklung sparen können ;)

Das Fallback für die Nichterreichbarkeit des Drittanbieters macht natürlich Sinn, habe jedoch bei tr.im nie einen Ausfall erlebt, da deren API auf anderem Server als die Website liegt. Baue ich ein.

Dagegen halte ich Parameter nicht für nötig, da es ja kein Plugin ist und jeder die Anpassungen beim Einfügen in die functions.php nach Wünschen vornehmen kann – direkt in der Funktion, der Aufbau ist ja recht übersichtlich.

Merci für ausführliche Vorschläge, weiß ich zu schätzen.

420 Tage zuvor | #6 Alex

Hallo,
ich habe gerade in meinem Blog den Button vom Tweet-Portal Tweetmeme im Einsatz. Und zusätzlich werden mein Blogfeed und der Kommentar-Feed via Twitterfeed.com nach Twitter übertragen.

Das dürfte auch ausreichen, wenn man mich fragt. Laut Pingdom-Tools lädt die Blogstartseite von Internetblogger.de derzeit in 6,2 s. Das ist ganz gut, wenn man mich fragt, vor allem, da es sich auch in meiner Blogsidebar zahlreiche Buttons befinden.

Ansonsten hat da jeder Blogger so seine eigene Lösung, falls dieser überhaupt twittert. Allerdings muss ich dir, Sergej, recht geben. Die Bekanntheit/Beliebtheit von Twitter in der deutschen Blogosphere wächst Tag für Tag.
Grüsse..

420 Tage zuvor | #7 Chris

Eine Ergänzung, um festzustellen wie oft der Button überhaupt von der Leserschaft genutzt wird, wäre doch die Eigenschaft vom TweetMeme Button. Dieser zeigt die Anzahl ja an.

Habe bisher die Funktionen von Peter Kröner, als auch von Dir getestet. Für meine Zwecke reicht mir aber derzeit ein Plugin aus.

420 Tage zuvor | #8 Alex

@Chris, es ist ja nicht so, das mein Blog extrem viele Besucher hätte und ich frage mich, wie es bei einem sehr grossen Blog mit den Ladezeiten wäre, wenn man TweetMeme-Button installiert hätte?
Das weiss ich eben nicht..

Bin mit TweetMeme derzeit zufrieden;-)

420 Tage zuvor | #9 Sergej Müller

@Chris
Absolut korrekt, der TweetMeme-Button zeigt die Anzahl der Tweets an. Das Problem ist jedoch das fixe Design des Buttons, mit dem nicht jeder Blogger etwas anfangen kann, da es zum Layout des Blogs nicht passt. Und wie Alex schon sagte: Die Ladezeiten können durch das Laden externer Quellen (Button wird via JavaScript ausgegeben) extrem beeinflusst werden.

420 Tage zuvor | #10 Sergej Müller

Habe soeben die Funktionen und entsprechende Aufrufe erweitert. Schönen Dank für die Vorschläge, Jungs.

420 Tage zuvor | #11 ocean90

Dankeschön, wieder ein paar Sekunden eingespart. :)
Und auch wieder was dazu gelernt; dass der Unterstrich für versteckte Daten existiert.

Weiter so.

417 Tage zuvor | #12 Chris

@Alex @Sergej: Ihr habt ja beide recht mit der Ladezeit.

@ Sergej: Kann man den Button nicht an das Layout des Blogs anpassen?
Hat sich aber wieder mit dem ersten @ Beantwortet ;-)

416 Tage zuvor | #13 Florian

Ich twittere zwar, aber ich benutze kein Tweet-this-Plugin. Erstens habe ich allgemein schon einmal sehr schlechte Erfahrungen mit Plugins gemacht (Server fast 24h down) und versuche deshalb, die Anzahl der installierten Plugins möglichst gering zu halten.

Des weiteren ist der Nachteil von Tweet-this-Plugins, dass sie immer auf Twitter.com verlinken. Der Großteil meiner Follower und auch ich selbst benutzen jedoch Desktop-Twitter-Apps, mit denen das ganze Spiel natürlich nicht funktioniert.

Deswegen dauert es immer noch wesentlich weniger Zeit, einen Link aus der Titelleiste ins Twitter-Feld zu kopieren, als sich zuerst bei Twitter einzuloggen.

Ich möchte dein Plugin ja nicht mies machen, es hilft bestimmt sehr vielen Menschen, aber habt ihr Tweet-this-Plugin-Entwickler diesen Aspekt überhaupt schon einmal bedacht?

416 Tage zuvor | #14 Sergej Müller

Dafür gibt es doch bei Twitter eine Checkbox, damit Twitter dich merkt und du dich nicht wiederholt einloggen brauchst. Aber das ist ja nicht nur das Problem von Twitter, sondern bei jedem Online-Dienst muss du dich entweder manuell verifizieren oder deine Daten für die spätere Erkennung im Cookie speichern lassen. Würde es wirklich eine Hürde darstellen, würden all diese Social-Buttons a la Digg, MisterWong nicht so gefragt sein und schon längst aus den Blogs verschwunden sein.

404 Tage zuvor | #15 Tim

Hi,
funktioniert super, aber nur wenn man NoScript deaktiviert hat. Gibts da irgendwie ne Möglichkeit das zu umgehen ohne NoScript zu deaktivieren? Die Domain ist in NoScript erlaubt…

403 Tage zuvor | #16 Tim

Ich weiß auch nicht warum der Alarm schlägt. Oben wird ganz kurz im Firefox nen Hinweis eingeblendet. Ich meine was mit XXS oder so. Und dann kommt die Twitterseite, wo nur steht, dass diese Seite nicht existiert. Wenn ich NoScript komplett deaktiviere funktioniert es ohne Probleme.

380 Tage zuvor | #17 Chris

Eben erst gefunden, hatte festgestellt dass ein bekanntes Tweet-Me Plugin unheimlich viel Ressourcen und db queries verbrauchte, da kommt mir dein tipp wie gerufen, danke dafür!

379 Tage zuvor | #18 Neotrix

Habe es auch mal drinn gehabt. Aber meist gibt es Probleme mit diesen “Tweet this” Plugins.

379 Tage zuvor | #19 Sergej Müller

@Neotrix
Deswegen auch diese Lösung, die problemlos läuft.

359 Tage zuvor | #20 Cy

Hallo,

ich bekomme seit neuestem eine Fehlermeldung (inkl. Grafik) bei neuen Beiträgen, das Tr.im überlastet ist. Das nun aber schon seit Tagen.
Noch jemand mit dem Problem? Hat sich bei der API vielleicht was geändert?

359 Tage zuvor | #21 Sergej Müller

Wie ich schon oben im Artikel geschrieben hatte, wird das gleiche Skript auch hier im Blog unter jedem Beitrag eingesetzt. Fehlerfrei.

Wenn ich mir deinen Quelltext anschaue und wie der “Tweet this”-Link aussieht, dann wundere ich mich sowieso, wie dein Blog-Design noch standhält. Du hast die Lösung entweder falsch verlinkt oder eingebunden oder was auch immer. Es ist ein Fehler ganz auf deiner Seite.

359 Tage zuvor | #22 Cy

Hat bisher auch immer einwandfrei funktioniert, das ist ja das merkwürdige. Erst nach dem 2.8.3 Update nicht mehr.

359 Tage zuvor | #23 Sergej Müller

Cy, wenn du nicht weiterkommst oder so, schreib mir eine E-Mail. Ich helfe gerne.

356 Tage zuvor | #24 Paul

Ich bin seit gestern bei Twitter angemeldet und benötige nun so schöne Buttons/Images für meine Seiten. Diese Funktion werde ich auch einbinden. Vielen Dank. =)

355 Tage zuvor | #25 Sergej Müller

Jepp, habe ich gelesen. Müssen wir wohl umdenken bzw. umstellen.

355 Tage zuvor | #26 Sergej Müller

Als Reaktion auf die baldige Schließung des Shorteners tr.im wurde der Funktionsaufruf umgestaltet und zwar so, dass der Dienst bit.ly für die Kürzung der Permalinks zuständig ist.

Bitte aktualisiert eure functions.php.

332 Tage zuvor | #27 plerzelwupp

Auch an dieser Stelle möchte ich mich nochmals bedanken, für den Support, den Du geleistet hast, Sergej.

Nicht nur für Deine genialen Plugins, sondern auch zu dem hier geposteten Artikel, bei dem Du mir per E-Mail behilflich warst und den Code entsprechend den besonderen Bedürfnissen meines Blogs angepasst hast.

Nochmals: Herzlichen Dank :-)

332 Tage zuvor | #28 Sergej Müller

@plerzelwupp
War mir eine Freude, dir helfen zu können.

328 Tage zuvor | #29 Jeriko

Bei zwei eingesetzten Blogs haben sich durch den Code ziemliche Probleme ergeben: Da ja gecached wird sollten eigentlich nie mehr URLs gespeichert sein als überhaupt Beiträge vorhanden sind. Trotzdem waren bei einem Blog mit ~1800 Einträgen knapp 7000 URLs (natürlich auch gedoppelte), bei einem anderen mit ~6700 Beiträgen sogar knapp 65.000 URLs in der Datenbank gespeichert. Dadurch ergeben sich über kurz oder lang PHP-Speicherprobleme, da die Metainfos zu Beiträgen automatisch mitgeladen werden.
Ob es jetzt an bit.ly liegt oder an den Blogs, keine Ahnung. Mittlerweile setze ich auf eine JavaScript-Lösung, die serverseitig überhaupt nichts mehr speichert.

328 Tage zuvor | #30 Sergej Müller

Jeriko, ich glaube dir kein Wort ;)
Jeder Bit.ly-Link wird dem jeweiligen Artikel zugewiesen – es wird keine extra Tabelle angelegt oder ähnlich. Es kann einfach nicht mehr Einträge mit Links in der Datenbank geben, als es Posts gibt. Die Speicherung der URL verwaltet nicht mal das Skript selbst, sondern nutzt dafür die API von WordPress.

328 Tage zuvor | #31 Jeriko

Ey, was weiss ich warum das ausgerechnet mir passiert? :-)

Ich versteh den Code ja, deswegen dürfte es ja auch nicht sein. Vielleicht hängts mit einem Cache Plugin zusammen oder irgendwas anderes fummelt an get_the_ID() rum, wer weiß. Aber da zumindest das zweite Blog deswegen kaum noch benutzbar war konnte ich den Code einfach nicht mehr einsetzen.

328 Tage zuvor | #32 Sergej Müller

Jeriko, hast du absolut Recht: Wenn ein Plugin dazwischenfunkt und es dementsprechend zu den Nachteilen kommt, dann bin ich ganz bei dir.

314 Tage zuvor | #33 plerzelwupp

Guten Tag,

eine Frage hätte ich doch noch, denn mit meinen bisherigen Versuchen bin ich gescheitert: Wie bekomme ich denn im obigen Beispiel (functions.php) noch den Titel des Artikel in die Tweet-Ausgabe (z.B. anstatt “lese gerade”)?

314 Tage zuvor | #34 Sergej Müller

plerzelwupp, bin ein wenig überrascht, von dir diese Frage gestellt zu bekommen, wo du doch in deinem Blog WordPress-technische Themen behandelst.

Mit get_the title() lässt sich der Titel natürlich einbinden. Es ist zu beachten, dass die Titellänge je nach Beitrag abweichen kann, die maximale Anzahl der Zeichen in der Twitter-Message steht jedoch fest und wird bei Überlänge abgeschnitten.

313 Tage zuvor | #35 plerzelwupp

Hallo Sergej,

vielen Dank für Deine Nachricht. Der Befehl ist mir auch durchaus bekannt, jedoch weiß ich nicht den korrekten Syntax bei der Verwendung innerhalb von urlencode(‘ ‘). Oder steh ich jetzt vollkommen auf dem Schlauch? Dann zieh ich auch die Schandmaske auf.

313 Tage zuvor | #36 Sergej Müller

plerzelwupp,

habe den obigen Artikel um den alternativen Code mit dem Beitragstitel im Tweet erweitert. Hoffe, das ist das, wonach du gefahndet hast.

313 Tage zuvor | #37 plerzelwupp

Ok, Du hast es mit 2x Urlencode gelöst – ich hab die ganze Zeit vergeblich versucht, es in den ersten “Urlencode” mit einzubauen, was Fehler verursachte. So weit reichte das Verständnis dann doch nicht; dennoch ärgere ich mich, nicht selbst darauf gekommen zu sein.

Dir nochmals vielen Dank :-)

313 Tage zuvor | #38 Sergej Müller

plerzelwupp, gern geschehen.

197 Tage zuvor | #39 Sergej Müller

Übrigens, den obigen Code gibt es in leicht modifizierter Version als Plugin: Bit.ly Retweet. Hab ich mir gedacht, ist für Anfänger einfacher als mit der functions.php zu hantieren.

Seit eben auch in der Version 0.2 mit j.mp als Adresse – man spart 2 Zeichen, die wiederum dem Titel im Tweet zugute gehen.

Happy Downloading.

181 Tage zuvor | #40 Matthias

Ich seh das Problem nicht so, denn so viele werden die Beiträge eh nicht twittern. Richtige Verlinkungen sind an sich auch so schon recht selten. Verkürzte URLs finde ich so auch schon nicht gut, denn ich will wissen wo ich raufklicke. Besser finde ich sprechende URLs, da braucht man keine zusätzliche Erklärung.

181 Tage zuvor | #41 Sergej Müller

@Matthias
BIn absolut bei dir. Deswegen stelle ich diese Funktion als Option zur Verfügung. Da entscheidet der Blogger ganz alleine, ob er dies seinen Lesern zumuten mag. Denn was immer geht: Das Plugin erst gar nicht installieren.

108 Tage zuvor | #42 Peter

Für Anfänger wie mich ist es mit obigem Plugin einfach leichter umzusetzen. Wenn es nicht unbedingt sein muß, lasse ich von der functions.php lieber die Finger. Was ich in den letzten Monaten so sehe, scheinen sich die Tweet bzw. ReTweet-Buttons aber schnell ausgebreitet zu haben. Ich probier`s einfach mal – danke für das Plugin.