Auch Entwickler brauchen Platz zum Spielen

19. Juni 2012 /

Performance in WordPress: Twitter-Link mit Caching-Funktion

Code-Schnipsel für die Generierung eines TweetThis!-Links in WordPress. Mit integrierter Zwischenspeicherung der ShortURL für mehr Performance.

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.

Sergej Müller

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

Thematisch ähnliche Beiträge