Warnung des EU-Kommisars für PHP-Angelegenheiten: in diesem Beitrag geht’s relativ technisch zu! Im Endeffekt reicht zwar ein wenig Copy-Paste, aber um die im folgenden beschriebenen Schritte umsetzen zu können, sollten Sie mit dem Editieren von WordPress–Templates vertraut sein. Die Template-Files (vorzufinden im Ordner wp-content/themes/THEMENAME/) liegen im php-Format vor und lassen sich auch direkt über das CMS bearbeiten, und zwar über das Menü Design->Editor. Lassen Sie sich von den vielen Code-Beispielen nicht abschrecken. Ich hätte aus diesem Beitrag einfach nur eine kurze Notiz mit txt-Datei Download machen können, aber Sie kennen mich mittlerweile ja: ich bin fest davon überzeugt, dass ein kleiner Blick unter die Haube keinesfalls schadet. Selbst alte WordPress–Hasen dürften unter Umständen nicht mit der hier verwendeten und erst seit Version 2.9 enthaltenen the_post_thumbnail Funktion vertraut sein.
Doch damit genug der kryptischen Vorreden, worum geht’s hier denn überhaupt? Ganz einfach erklärt, um die mitunter recht lästige Facebook–Thumbnail-“Problematik”: wie kann man fast vollautomatisch jedem einzelnen Blogbeitrag eine eigene Grafik für Shares und Link-Postings auf Facebook und anderen Social Networks zuweisen?
Facebook-User kennen die Thematik zur Genüge: Wann immer Blogbeiträge auf unserem Lieblings-Netzwerk geshared werden, und zwar egal ob vom Blogbesucher oder vom Beitragsautor selbst, verwendet die Share-Funktion (deutsch: teilen) standardmäßig die erste auf der Seite vorgefundene Grafik. Bei mehreren Thumbnails kann der User mittels vor/zurück Pfeilchen wählen, oder, falls kein bzw. nur ein unpassendes Bild (hallo RSS Icon!) gefunden wird, ganz auf die Illustration verzichten. Mit der nachfolgend beschriebenen Methode nutzen WordPress–Blogger die recht neue “featured image” Funktion, um ohne Mehraufwand auch gleich Facebook + Co. immer mit dem richtigen Thumbnail zu versorgen. No code-angst, please — ich habe mich bemüht, alle Schritte ausführlich zu erklären, und für Fragen steht das Kommentarformular jederzeit zur Verfügung.
ACHTUNG, STOLPERFALLE: diese Script verwendet erweitere Template-Funktionen, die erst mit aktuelleren WordPress-Versionen eingeführt wurden. Wenn Sie ein älteres Theme verwenden, unterstützt dieses die neuen Hooks vermutlich nicht. In diesem Fall müssen Sie in die “functions.php” Datei Ihres Themes eine neue Code-Zeile einfügen — in unserem Fall konkret den Thumbnail-Support. Genaue Informationen dazu finden Sie im WordPress Codex.
Open Graph Metadata: og:image
Grundsätzlich fallen natürlich grafisch geschmückte Links auf Facebook wesentlich mehr auf als reine Textbeiträge. Allerdings muss man kein besonders kontrollwütiger Webmaster sein, um anstelle der mehr oder weniger zufallsbasierten Auswahl lieber selbst das passende Bild zu bestimmen. Soweit kein Problem — Facebook sieht in der Open Graph Spezifikation unter anderem die Möglichkeit vor, mittels Metatag im Header der Seite eine Grafik vorzugeben. Dazu ist folgende Zeile einzufügen (für eine komplette Übersicht der Open Graph Metadaten, empfehle ich einen Blick ins Like-Button Whitepaper von Digital Affairs):
{code type=HTML}{/code}
So weit, so gut — mit diesem Metatag lässt sich mittels eines statischen Pfades eine Grafik festlegen, die auf einem beliebigen Webserver liegen kann. (Facebook lädt die Datei natürlich nicht bei jedem Aufruf, sondern die Grafik wandert in den Cache.) Allerdings hat diese Methode den gravierenden Nachteil, dass man ein statisches Thumbnail festlegt. Wesentlich eleganter wäre aber eine spezielle Grafik für jeden Beitrag, also lautet die Aufgabe: wir müssen den oben angegebenen Thumbnail Pfad für jeden Beitrag dynamisch zuweisen, falls das betreffende Posting ein “featured image” besitzt, und falls nicht, eine Default-Grafik einfügen. Gäbe es in WordPress eine einfache Funktion, um die URL eines Grafik-Attachments direkt aufzurufen, wäre die Sache schnell erledigt. Allerdings liefert der featured-image-Hook immer nur den kompletten Image-Tag zurück, uns interessiert hier aber nur die Adresse, als der Inhalt von src=”…”. [Anmerkung: Die hier beschriebene Vorgehensweise ist auch in anderen Kontexten nützlich, etwa wenn man in Beiträge eingebundene Grafiken nicht via Image-Tag, sondern als via CSS definierten div-Hintergrund einfügen möchte.]
Featured Image für Facebook nutzen
Natürlich existieren mehrere verschiedene Lösungsansätze. So könnte man beispielsweise ein “benutzerdefiniertes Feld” verwenden, um für die betreffende URL für jeden Beitrag händisch einzugeben. Wesentlich eleganter geht’s aber mit einer praktischen Funktion, die WordPress seit Version 2.9 von Haus aus mitbringt: diese nennt sich “Featured Image” und taucht als Box in der Seitenleiste des Beitrag-Editieren-Bildschirms auf.
Wir müssen also lediglich die URL zu diesem “featured image” dynamisch in den oben erklärten Metatag einfügen. Leider stellt WordPress dafür keine eigene Funktion bereit, den the_post_thumbnail liefert wie schon oben erwähnt lediglich die Grafik in wählbarer Größe innerhalb inklusive kompletten img-Tag zurück. Um nur die URL zu extrahieren, müssen wir also auf einen kleinen “Trick” zurückgreifen. Der hört auf den Namen get_children, denn die betreffende Funktion liefert uns die URLs aller Attachments des aktuellen Beitrags als Array zurück. Den mime_type beschränken wir auf Bilddateien (jpg, png, gif), mit , ‘numberposts’ =>‘1’ beschränken wir den Inhalt unseres Arrays auf das erste Attachment. daher Dieses Skript schreibt nach Abfrage der Beitrags-ID die Adresse des Bildes in unser Template:
{code type=PHP}$attachments = get_children( array(‘post_parent’ => get_the_ID(), ‘post_type’ => ‘attachment’, ‘post_mime_type’ =>‘image’) );
foreach ( $attachments as $attachment_id => $attachment ) {
echo wp_get_attachment_thumb_url( $attachment_id, ‘medium’ );
}
{/code}
Damit aus dem ganzen ein Schuh (und kein White-Screen) wird, “zerlegen” wir den Thumbnail-Meta-Tag, was sich am einfachsten mit zwei zusätzlichen ECHO-Zeilen bewerkstelligen lässt. Das gesamte Script für den Header sieht dann so aus:
{code type=PHP}
echo “
$attachments = get_children( array(‘post_parent’ => get_the_ID(), ‘post_type’ => ‘attachment’, ‘post_mime_type’ =>‘image’) );
foreach ( $attachments as $attachment_id => $attachment ) {
echo wp_get_attachment_thumb_url( $attachment_id, ‘medium’ );
}
echo “\” />”;
{/code}
Wird in einem Beitrag beispielsweise das Bild “http://blog.datenschmutz.net/wp-content/uploads/2010/10/frosch.png” als “Featured Image” gewählt, so liefert uns das Script browserseitig folgende Zeile zurück:
{code type=HTML}{/code}
Allerdings fehlt uns noch ein Puzzlestück: denn falls ein Beitrag kein Bild enthält, bleibt das content-Argument leer, aber dazu kommen wir später — vorher noch ein paar Worte zu anderen dynamischen Metadaten.
Mehr dynamische Metadaten, bitte!
Wenn man schon mal Hand an die Meta-Section des Headers anlegt, zahlt es sich wie schon oben erwähnt aus, auch die anderen Open Graph Metadaten wie Autor, Beitrags-URL etc. einzufügen. Während Felder wie Adresse etc. in der Regel mit statischen Informationen befüllt werden können, greift man Beitragstitel, bei der URL und bei der Description auf WordPress-Hooks zurück. Diese drei Einträge könnten dann beispielsweise so aussehen:
{code type=PHP}echo “
the_title();
echo ’” />’;
echo ;
echo ;{/code}
CAVEAT: für die Description verwende ich nicht die Standard-WordPress-Funktion, sondern das wesentlich flexibler konfigurierbare Plugin The Excerpt re-reloaded.
Wer bereits Share– oder Like-Buttons einsetzt, sollte aber vorher prüfen, ob die oben erwähnten Tags nicht bereits im Quelltext vorhanden sind, denn einige dieser Plugins generieren ebenfalls zumindest einen Teil der Metadaten — und doppelt gemoppelt bringt diesem Fall rein gar nichts.
Open Graph-Metadaten nur für Einzelbeiträge
Da all diese Metatags ja nur für Einzelbeiträge (nicht aber für die Startseite, für statische Pages, Archiv-, Such-, Tag-Seiten etc.) relevant sind, schadet es keinesfalls, alle Open Graph Metadaten in eine IF-Abfrage zu packen und nur bei Einzelbeiträgen anzuzeigen. Die einschließende Bedingungen sähe dann so aus:
{code type=PHP}global $post;
if ( is_single() ) {
METADATEN inkl Script
} else {
echo ;
}
{/code}
Der Ersatzkandidat und das fertige Script
Bis hierher gehen wir davon aus, dass man für *jeden* Beitrag ein Bild hochgeladen und als “featured image” auswählt. Wenn der Thumbnail-Metatag mit leerem Content-Attribut im Quelltext steht, bietet Facebook aber kein alternatives Thumbnail an. Im Zeitalter des Social Sharing empfiehlt es sich zwar ohnehin, für jeden Beirag eine solche Grafik zu definieren — aber falls man mal darauf vergisst, lässt sich mithilfe einer weiteren if-Abfrage überprüfen, ob denn überhaupt ein “featured image” gesetzt wurde. Wenn ja, kommt das Script zum Einsatz, wenn nein wird die Standard-Grafik verwendet.
Und damit wären wir quasi auch schon am Ende unserer langen Reise — hier das komplette Script inklusive aller Metadaten und der oben beschriebenen if-Abfrage. Die Default-Grafik, die verwendet wird, wenn kein featured image gesetzt wurde, müssen Sie einfach nur ins Unterverzeichnis /images/ Ihres Theme-Verzeichnisess laden, also z.B. /wp-content/themes/twentyten/images/facebook-default.png:
{code type=PHP}
global $post;
if ( is_single() ) {
echo ;
echo “\n”;
echo ;
echo “\n”;
echo ‘\’;
echo “\n”;
echo ’
}
echo ’” />’;
echo “\n”;
} else {
echo ;
echo “\n”;
}
{/code}
Die Linebreaks (\n) sind natürlich nicht zwingend erforderlich, sorgen aber für besseren Quelltext-Überblick. Mithilfe eines Plugins ließe sich diese Facebook-Thumbnail-Funktionalität natürlich leicht nachrüsten, aber mir ist derzeit keine Erweiterung bekannt, die diese so wichtige Funktion implementiert. Ein wenig Copy-Paste zahlt sich also in jedem Fall aus, denn passende unique Thumbnails führen direkt zu höheren Klickraten — wir Surfer sind nun mal ausgesprochen visuell orientierte Informationsnomaden.
Bonuslevel: Praktischerweise übernimmt auch mein Lieblings RSS-to-Facebook-Service dlvr.it die so eingefügten Thumbnails beim Posten auf Facebook Pages, was einen äußerst komfortablen Workflow ermöglicht. Aber das ist eine andere Geschichte und soll ein andermal erzählt werden…
Disclaimer: Nur um hier keine Missverständnisse aufkommen zu lassen: es würde mir nicht im Traum einfallen, mich als php-Könner aufzuspielen. Von Programmierung hab ich beängstigend wenig Ahnung — was Code betrifft, bin ich ein typischer User, der einfach nur im Trial-and-Error-Verfahren vorgeht. Den Image-Code hab ich in anderem Kontext im WordPress-Forum gefunden, der Rest ist handgestrickt, und zwar mit heißen Nadeln *g* Wenn jemand eine elegantere Methode bzw. ein Plugin kennt, freue ich mich sehr über Anregungen und Code-Optimierungs-Vorschläge!
Ritchie Pettauer, Social Media Berater, Experte für digitale Kommunikation, Lektor an der Universität Wien, Blogger, mag Photographie, elektronische Musik, Hip Hop, Martial Arts, Technische Physik, Web-Fundstücke und Hunde.
