Dynamische Facebook Thumbnails für WordPress Beiträge

Tutorial: Dynamische Facebook-Thumbnails für WordPress Beiträge

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.

Dynamische Facebook Thumbnails für WordPress BeiträgeDoch 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 ‘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!

20 comments
uncle yc
uncle yc

Hallo Leute kann hier jemand einen code schnipsler weiterhelfen? Ich habe folgenden meta im head der die Image bestimmen soll: Das schräge daran ist das die Grafik im URL Linter Link: http://developers.facebook.com/tools/lint/?url=http://web385.nextlogin.com/board/jgs_treffen.php%3Faction%3Dansicht%26view_id%3D361%26threadid%3D850%26 anzeigt wird. Im Facebook aber nicht funktionirt :( MFG

Christian Fiebich
Christian Fiebich

ja klar, meine html-tags wurden gefressen ;) erster link: [spitzeklammerauf]link href="http://adresse_zum_bild.jpg" rel="image_src" type="image/gif" /[spitzeklammerzu] zweiter link: [spitzeklammerauf]meta proprery="og:title" content="video title" /[spitze klammerzu]

Christian Fiebich
Christian Fiebich

Ich stand schon früher vor diesem "Problem", damals gabs noch eine sehr bescheidene Dokumentation von Facebook. Und zwar musste man im Header Bereich folgende Zeile eingeben (funktioniert aber immer noch): Somit werden auch sämtliche automatischen Vorschläge von Facebook overruled. Schade nur, dass man bis jetzt nicht mehrere Bilder zur Auswahl festlegen kann. Offizielle Dokumenation von Facebook: http://developers.facebook.com/docs/share (Achtung: Facebook hat eine schlechte Qualitätskontrolle. Teilweise steht in der Dokumenation "" ... natürlich muss das meta-tag PROPERTY und nicht PROPRERY heißen ;)))

Andreas Ostheimer
Andreas Ostheimer

Danke für diesen Artikel - kann ich nur weiterempfehlen. Ich habe auf www.meinhaushalt.at übrigens das Wordpress Plugin Open Graph Protocol Tools in Verwendung/Test welches auch das og:image Attribut setzt.

Michael Bartos
Michael Bartos

Vielen Dank für die hilfreichen Infos und Anregungen! Toller Artikel!

Robert
Robert

Hi Ritchie, Danke für den hilfreichen Beitrag - hab ich gleich eingebaut. Zwei kleine Fehler haben sich allerdings in dein Skript eingeschlichen, weshalb es zu allererst nicht funktioniert hat: echo '" />\; echo "\n"; echo ''; echo "\n"; echo '<meta property="og:image" content="'; lg Robert

rob
rob

Bei mir wird seltsamerweise seit einer kurzen Zeit GARKEIN Miniaturbild mehr angezeigt, wenn ich einen Link von meinem Blog poste...?? Irgendeine Idee??

brainstorming
brainstorming

Ich hab' hier zwar absichtlich immer das gleiche Bild eingestellt, um den 'Wiedererkennungswert' zu steigern, aber unterschiedliche Bilder, machen bei Blogs die von 'Teaserimages' leben, durchaus Sinn. Danke auf alle Fälle für den Tipp zur Generierung der weiteren (dynamischen) Metatdaten: og:title und og:description. :)

Jan
Jan

Klasse!! Der Beitrag hat mir sehr weitergeholfen. sieht wirklich klassen aus. :frog6: Vielen Lieben Dank.. Gruß Jan

FeuerwehrDude
FeuerwehrDude

sehr gute und ausführliche erklärung! danke man :frog6:

Sarah.M
Sarah.M

auch ich muss mich bedanken, dieser beitrag hat mir sehr geholfen.

Ivy
Ivy

Super! Danke für den tollen Beitrag. Ich hatte immer dieses Problem und hoffe es jetzt so zu lösen. Thx

Ritchie Blogfried Pettauer
Ritchie Blogfried Pettauer

Tausend Dank! Bei solchen Scripts sind auch die kleinsten Copy-Paste-Fehler "tödlich" - hab's ausgebessert, das verschollene Anführungszeichen ist wieder da!

Ritchie Blogfried Pettauer
Ritchie Blogfried Pettauer

Ja - es scheint, dass die Specs geändert wurden. Wie groß ist dein Bild? Probier mal, ob's mit einer kleineren Version geht, mehr als die Maximalgröße des Feed-Images ist nicht erforderlich (aber auch dann nimmt FB nicht das Originalbild, sondern rechnet *immer* runter.)

Ritchie Blogfried Pettauer
Ritchie Blogfried Pettauer

Aber gerne doch! Ich denke, immer das gleiche Bild zu verwenden ist aus Branding-Gründen hier nicht unbedingt nötig: du hast ja sowieso immer den Avatar der Page beim Posting mit dabei, und die TLD steht unter der Titel des Links.

Ritchie Blogfried Pettauer
Ritchie Blogfried Pettauer

Gerne! Ich kannte dein Blog noch gar nicht, sehr spannendes Thema, hab den Feed gleich abonniert.

Ritchie Blogfried Pettauer
Ritchie Blogfried Pettauer

Gerne - ich hab den Beitrag ja deshalb so ausführlich geschrieben, weil ich selber schon ewig dran rumbastel und man die Informationen zwar verstreut, aber nirgendwo an einer Stelle findet. Und wie gesagt: achte unbedingt drauf, dass dein Theme die neuen Features (speziell die Featured Images) unterstützt!