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.

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

#1 Fabian am 5. Juni 2009 um 00:12

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.

#2 Thomas Scholz am 5. Juni 2009 um 00:38

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. ;)

#3 Sergej Müller am 5. Juni 2009 um 08:13

@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.

#4 Peter Claus Lamprecht am 5. Juni 2009 um 14:59

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

#5 Sergej Müller am 5. Juni 2009 um 15:55

@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.

#6 Alex am 6. Juni 2009 um 05:57

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..

#7 Chris am 6. Juni 2009 um 06:11

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.

#8 Alex am 6. Juni 2009 um 07:03

@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;-)

#9 Sergej Müller am 6. Juni 2009 um 09:37

@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.

#10 ocean90 am 6. Juni 2009 um 12:22

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

Weiter so.

#11 Sergej Müller am 6. Juni 2009 um 12:45

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

#12 Chris am 8. Juni 2009 um 22:54

@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 ;-)

#13 Florian am 10. Juni 2009 um 19:01

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?

#14 Sergej Müller am 10. Juni 2009 um 19:19

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.

#15 Tim am 22. Juni 2009 um 19:14

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…

#16 Tim am 22. Juni 2009 um 22:13

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.

#17 Chris am 16. Juli 2009 um 09:20

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!

#18 Neotrix am 17. Juli 2009 um 12:46

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

#19 Sergej Müller am 17. Juli 2009 um 12:49

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

#20 Cy am 6. August 2009 um 17:31

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?

#21 Sergej Müller am 6. August 2009 um 17:40

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.

#22 Cy am 6. August 2009 um 18:12

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

#23 Sergej Müller am 6. August 2009 um 18:39

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

#24 Paul am 9. August 2009 um 00:19

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. =)

#25 Cy am 10. August 2009 um 10:47

Oh, tr.im macht dicht!

#26 Sergej Müller am 10. August 2009 um 11:13

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

#27 Sergej Müller am 10. August 2009 um 22:09

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.

#28 plerzelwupp am 2. September 2009 um 19:44

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 :-)

#29 Sergej Müller am 2. September 2009 um 19:45

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

#30 Jeriko am 6. September 2009 um 03:47

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.

#31 Sergej Müller am 6. September 2009 um 09:43

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.

#32 Jeriko am 6. September 2009 um 13:14

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.

#33 Sergej Müller am 6. September 2009 um 13:19

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

#34 plerzelwupp am 20. September 2009 um 11:35

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”)?

#35 Sergej Müller am 20. September 2009 um 18:48

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.

#36 plerzelwupp am 21. September 2009 um 13:37

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.

#37 Sergej Müller am 21. September 2009 um 13:51

plerzelwupp,

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

#38 plerzelwupp am 21. September 2009 um 14:46

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 :-)

#39 Sergej Müller am 21. September 2009 um 14:48

plerzelwupp, gern geschehen.

#40 Sergej Müller am 14. Januar 2010 um 23:29

Ü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.

#41 Matthias am 31. Januar 2010 um 11:50

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.

#42 Sergej Müller am 31. Januar 2010 um 12:04

@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.