Dynamische Facebook Thumbnails für WordPress Beiträge

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

blogging mit WordPressdatenschmutzdigitalia

Warnung des EU-Kommisars für PHP-Angelegenheiten: in die­sem Beitrag geht’s rela­tiv tech­nisch zu! Im Endeffekt reicht zwar ein wenig Copy-Paste, aber um die im fol­gen­den beschrie­be­nen Schritte umset­zen zu kön­nen, soll­ten Sie mit dem Editieren von WordPress-Templates ver­traut sein. Die –Files (vor­zu­fin­den im Ordner wp-content/themes/THEMENAME/) lie­gen im php-Format vor und las­sen sich auch direkt über das CMS bear­bei­ten, und zwar über das Menü Design->Editor. Lassen Sie sich von den vie­len Code-Beispielen nicht abschre­cken. Ich hätte aus die­sem Beitrag ein­fach nur eine kurze Notiz mit txt-Datei Download machen kön­nen, aber Sie ken­nen mich mitt­ler­weile ja: ich bin fest davon über­zeugt, dass ein klei­ner Blick unter die Haube kei­nes­falls scha­det. Selbst alte WordPress-Hasen dürf­ten unter Umständen nicht mit der hier ver­wen­de­ten und erst seit Version 2.9 ent­hal­te­nen the_post_thumbnail Funktion ver­traut sein.

Dynamische Facebook Thumbnails für WordPress BeiträgeDoch damit genug der kryp­ti­schen Vorreden, worum geht’s hier denn über­haupt? Ganz ein­fach erklärt, um die mit­un­ter recht läs­tige –Thumbnail-“Problematik”: wie kann man fast voll­au­to­ma­tisch jedem ein­zel­nen Blogbeitrag eine eigene Grafik für Shares und Link-Postings auf und ande­ren Social Networks zuweisen?

Facebook-User ken­nen die Thematik zur Genüge: Wann immer Blogbeiträge auf unse­rem Lieblings-Netzwerk gesha­red wer­den, und zwar egal ob vom Blogbesucher oder vom Beitragsautor selbst, ver­wen­det die –Funktion (deutsch: tei­len) stan­dard­mä­ßig die erste auf der Seite vor­ge­fun­dene Grafik. Bei meh­re­ren Thumbnails kann der User mit­tels vor/zurück Pfeilchen wäh­len, oder, falls kein bzw. nur ein unpas­sen­des Bild (hallo RSS Icon!) gefun­den wird, ganz auf die Illustration ver­zich­ten. Mit der nach­fol­gend beschrie­be­nen Methode nut­zen WordPress-Blogger die recht neue “” Funktion, um ohne Mehraufwand auch gleich Facebook + Co. immer mit dem rich­ti­gen Thumbnail zu ver­sor­gen. No code-angst, please — ich habe mich bemüht, alle Schritte aus­führ­lich zu erklä­ren, und für Fragen steht das Kommentarformular jeder­zeit zur Verfügung.

ACHTUNG, STOLPERFALLE: diese Script ver­wen­det erwei­tere Template-Funktionen, die erst mit aktu­el­le­ren WordPress-Versionen ein­ge­führt wur­den. Wenn Sie ein älte­res Theme ver­wen­den, unter­stützt die­ses die neuen Hooks ver­mut­lich nicht. In die­sem Fall müs­sen Sie in die “functions.php” Datei Ihres Themes eine neue Code-Zeile ein­fü­gen — in unse­rem Fall kon­kret den Thumbnail-Support. Genaue Informationen dazu fin­den Sie im WordPress Codex.

Open Graph Metadata: og:image

Grundsätzlich fal­len natür­lich gra­fisch geschmückte Links auf Facebook wesent­lich mehr auf als reine Textbeiträge. Allerdings muss man kein beson­ders kon­troll­wü­ti­ger sein, um anstelle der mehr oder weni­ger zufalls­ba­sier­ten Auswahl lie­ber selbst das pas­sende Bild zu bestim­men. Soweit kein Problem — Facebook sieht in der Open Graph Spezifikation unter ande­rem die Möglichkeit vor, mit­tels Metatag im Header der Seite eine Grafik vor­zu­ge­ben. Dazu ist fol­gende Zeile ein­zu­fü­gen (für eine kom­plette Über­sicht der Open Graph Metadaten, emp­fehle ich einen Blick ins Like-Button Whitepaper von Digital Affairs):

{code type=HTML}{/code}

So weit, so gut — mit die­sem Metatag lässt sich mit­tels eines sta­ti­schen Pfades eine Grafik fest­le­gen, die auf einem belie­bi­gen Webserver lie­gen kann. (Facebook lädt die Datei natür­lich nicht bei jedem Aufruf, son­dern die Grafik wan­dert in den Cache.) Allerdings hat diese Methode den gra­vie­ren­den Nachteil, dass man ein sta­ti­sches Thumbnail fest­legt. Wesentlich ele­gan­ter wäre aber eine spe­zi­elle Grafik für jeden Beitrag, also lau­tet die Aufgabe: wir müs­sen den oben ange­ge­be­nen Thumbnail Pfad für jeden Beitrag dyna­misch zuwei­sen, falls das betref­fende Posting ein “fea­tured image” besitzt, und falls nicht, eine Default-Grafik ein­fü­gen. Gäbe es in WordPress eine ein­fa­che Funktion, um die URL eines Grafik-Attachments direkt auf­zu­ru­fen, wäre die Sache schnell erle­digt. Allerdings lie­fert der featured-image-Hook immer nur den kom­plet­ten Image-Tag zurück, uns inter­es­siert hier aber nur die Adresse, als der Inhalt von src=”…”. [Anmerkung: Die hier beschrie­bene Vorgehensweise ist auch in ande­ren Kontexten nütz­lich, etwa wenn man in Beiträge ein­ge­bun­dene Grafiken nicht via Image-Tag, son­dern als via CSS defi­nier­ten div-Hintergrund ein­fü­gen möchte.]

Featured Image für Facebook nutzen

Natürlich exis­tie­ren meh­rere ver­schie­dene Lösungsansätze. So könnte man bei­spiels­weise ein “benut­zer­de­fi­nier­tes Feld” ver­wen­den, um für die betref­fende URL für jeden Beitrag hän­disch ein­zu­ge­ben. Wesentlich ele­gan­ter geht’s aber mit einer prak­ti­schen Funktion, die WordPress seit Version 2.9 von Haus aus mit­bringt: diese nennt sich “Featured Image” und taucht als Box in der Seitenleiste des Beitrag-Editieren-Bildschirms auf.
Wir müs­sen also ledig­lich die URL zu die­sem “fea­tured image” dyna­misch in den oben erklär­ten Metatag ein­fü­gen. Leider stellt WordPress dafür keine eigene Funktion bereit, den the_post_thumbnail lie­fert wie schon oben erwähnt ledig­lich die Grafik in wähl­ba­rer Größe inner­halb inklu­sive kom­plet­ten img-Tag zurück. Um nur die URL zu extra­hie­ren, müs­sen wir also auf einen klei­nen “Trick” zurück­grei­fen. Der hört auf den Namen get_children, denn die betref­fende Funktion lie­fert uns die URLs aller Attachments des aktu­el­len Beitrags als Array zurück. Den mime_type beschrän­ken wir auf Bilddateien (jpg, png, gif), mit , ‘num­ber­posts’ =>‘1’ beschrän­ken wir den Inhalt unse­res 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’ => ‘attach­ment’, ‘post_mime_type’ =>‘image’) );
foreach ( $attach­ments as $attachment_id => $attach­ment ) {
echo wp_get_attachment_thumb_url( $attachment_id, ‘medium’ );
}
{/code}

Damit aus dem gan­zen ein Schuh (und kein White-Screen) wird, “zer­le­gen” wir den Thumbnail-Meta-Tag, was sich am ein­fachs­ten mit zwei zusätz­li­chen ECHO-Zeilen bewerk­stel­li­gen lässt. Das gesamte Script für den Header sieht dann so aus:

{code type=PHP}
echo “

$attach­ments = get_children( array(‘post_parent’ => get_the_ID(), ‘post_type’ => ‘attach­ment’, ‘post_mime_type’ =>‘image’) );
foreach ( $attach­ments as $attachment_id => $attach­ment ) {
echo wp_get_attachment_thumb_url( $attachment_id, ‘medium’ );
}
echo “\” />”;
{/code}

Wird in einem Beitrag bei­spiels­weise das Bild “http://.datenschmutz.net/wp-content/uploads/2010/10/frosch.png” als “Featured Image” gewählt, so lie­fert uns das Script brow­ser­sei­tig fol­gende Zeile zurück:

{code type=HTML}{/code}

Allerdings fehlt uns noch ein Puzzlestück: denn falls ein Beitrag kein Bild ent­hält, bleibt das content-Argument leer, aber dazu kom­men wir spä­ter — vor­her noch ein paar Worte zu ande­ren dyna­mi­schen Metadaten.

Mehr dyna­mi­sche 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 ande­ren Open Graph Metadaten wie Autor, Beitrags-URL etc. ein­zu­fü­gen. Während Felder wie Adresse etc. in der Regel mit sta­ti­schen Informationen befüllt wer­den kön­nen, greift man Beitragstitel, bei der URL und bei der Description auf WordPress-Hooks zurück. Diese drei Einträge könn­ten dann bei­spiels­weise so aussehen:

{code type=PHP}echo “ the_title();
echo ’” />’;
echo ;
echo ;{/code}

CAVEAT: für die Description ver­wende ich nicht die Standard-WordPress-Funktion, son­dern das wesent­lich fle­xi­bler kon­fi­gu­rier­bare The Excerpt re-reloaded.

Wer bereits Share– oder Like-Buttons ein­setzt, sollte aber vor­her prü­fen, ob die oben erwähn­ten Tags nicht bereits im Quelltext vor­han­den sind, denn einige die­ser Plugins gene­rie­ren eben­falls zumin­dest einen Teil der Metadaten — und dop­pelt gemop­pelt bringt die­sem 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 sta­ti­sche Pages, Archiv-, Such-, Tag-Seiten etc.) rele­vant sind, scha­det es kei­nes­falls, alle Open Graph Metadaten in eine IF-Abfrage zu packen und nur bei Einzelbeiträgen anzu­zei­gen. Die ein­schlie­ß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 fer­tige Script

Bis hier­her gehen wir davon aus, dass man für *jeden* Beitrag ein Bild hoch­ge­la­den und als “fea­tured image” aus­wählt. Wenn der Thumbnail-Metatag mit lee­rem Content-Attribut im Quelltext steht, bie­tet Facebook aber kein alter­na­ti­ves Thumbnail an. Im Zeitalter des Social Sharing emp­fiehlt es sich zwar ohne­hin, für jeden Beirag eine sol­che Grafik zu defi­nie­ren — aber falls man mal dar­auf ver­gisst, lässt sich mit­hilfe einer wei­te­ren if-Abfrage über­prü­fen, ob denn über­haupt ein “fea­tured 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 unse­rer lan­gen Reise — hier das kom­plette Script inklu­sive aller Metadaten und der oben beschrie­be­nen if-Abfrage. Die Default-Grafik, die ver­wen­det wird, wenn kein fea­tured image gesetzt wurde, müs­sen Sie ein­fach nur ins Unterverzeichnis /images/ Ihres Theme-Verzeichnisess laden, also z.B. /wp-content/themes/twentyten/images/facebook-default.png:

{code type=PHP}
glo­bal $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ür­lich nicht zwin­gend erfor­der­lich, sor­gen aber für bes­se­ren Quelltext-Überblick. Mithilfe eines Plugins ließe sich diese Facebook-Thumbnail-Funktionalität natür­lich leicht nach­rüs­ten, aber mir ist der­zeit keine Erweiterung bekannt, die diese so wich­tige Funktion imple­men­tiert. Ein wenig Copy-Paste zahlt sich also in jedem Fall aus, denn pas­sende uni­que Thumbnails füh­ren direkt zu höhe­ren Klickraten — wir Surfer sind nun mal aus­ge­spro­chen visu­ell ori­en­tierte Informationsnomaden.

Bonuslevel: Praktischerweise über­nimmt auch mein Lieblings RSS-to-Facebook-Service dlvr.it die so ein­ge­füg­ten Thumbnails beim Posten auf Facebook Pages, was einen äußerst kom­for­ta­blen Workflow ermög­licht. Aber das ist eine andere Geschichte und soll ein ander­mal erzählt werden…

Disclaimer: Nur um hier keine Missverständnisse auf­kom­men zu las­sen: es würde mir nicht im Traum ein­fal­len, mich als php-Könner auf­zu­spie­len. Von Programmierung hab ich beängs­ti­gend wenig Ahnung — was Code betrifft, bin ich ein typi­scher User, der ein­fach nur im Trial-and-Error-Verfahren vor­geht. Den Image-Code hab ich in ande­rem Kontext im WordPress-Forum gefun­den, der Rest ist hand­ge­strickt, und zwar mit hei­ßen Nadeln *g* Wenn jemand eine ele­gan­tere Methode bzw. ein Plugin kennt, freue ich mich sehr über Anregungen und Code-Optimierungs-Vorschläge!

Share Button
19 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!