Auch Entwickler brauchen Platz zum Spielen

7. Dezember 2010 /

Artikelbilder in WordPress für Facebook bereithalten

Facebook kann auch im positiven Sinne überraschen: Kommt eine URL in der Antwort vor, versucht der Dienst ein Vorschaubild der betroffenen Webseite zu generieren und damit die Informationskachel optisch aufzuwerten. Das gleiche gilt für den Button „Teilen“. In der Regel mutiert das erste Bild der Zielseite zum Default-Thumbnail, die restlichen Grafiken der Seite werden gelistet und können abweichend zum Vorschaubild gewählt werden. Mit wenigen Codezeilen lässt sich das in WordPress definierte Artikelbild als festes Miniaturbild für Facebook festlegen.

Ungünstiges Miniaturbild einer Webseite in Facebook
Ungünstig gewähltes Miniaturbild einer Webseite in Facebook

Facebook als Crawler
Im unglücklichen Fall listet Facebook alle verfügbaren Grafikmotive zur Auswahl auf, das Standard-Bild entspricht nicht immer dem Kontext des Beitrags und gleicht einem Glücksspiel. Mit einer Metatag-artigen Zuweisung im Head-Bereich einer Webpage lässt sich eine gewünschte Grafik als „Cover“ festlegen und hilft Facebook bei der Initialisierung der notwendigen Miniatur.

Mit nachfolgendem Quelltext für die functions.php wird die Zuteilung der Image-Ressource für jeden Beitrag und jegliche Seite im Blog dynamisiert und direkt im Head mithilfe der WordPress-Aktion wp_head ausgegeben (auf die Funktion wp_head() im Template header.php achten). Hierfür wird das eingepflegte Artikelbild verwendet (vorteilhaft in 100×100 Pixel).

Artikelbild für das Antispam Bee Plugin für WordPress
Beispiel: Artikelbild für das Antispam Bee Plugin für WordPress

Artikelbild als Facebook-Miniatur anlegen

<?php
/**
* Gibt das Vorschaubild u.a. für Facebook aus
*
* @author  Sergej Müller
*/

function sm_image_src() {
  /* Nur Frontend */
  if (is_feed() || is_trackback() || !is_singular() || !has_post_thumbnail($GLOBALS['post']->ID)) {
    return;
  }
  
  /* Source */
  $image = wp_get_attachment_image_src(
    get_post_thumbnail_id($GLOBALS['post']->ID)
  );
  
  /* Ausgabe */
  echo sprintf(
    '<link href="%s" rel="image_src" />',
    esc_attr($image[0])
  );
}

/* Aktion hinzufügen */
add_action('wp_head', 'sm_image_src');
?>

Flexibilität der Lösung
Wer die Ausgabe des Link-Tags im Blog-Head lieber selbst in die Hand nehmen möchte, kann statt der genannten add_action (in letzten Zeilen des Codes) eine eigene WordPress-Aktion deklarieren und diese an der geplanten Stelle im Template zur Ausgabe starten.

Beispiel für manuellen Output von image_src

<?php
/* Aktion hinzufügen */
add_action('the_image_src', 'sm_image_src');

/* Aktion ausführen */
do_action('the_image_src');
?>

Thumbnail in Facebook auf Basis des Artikelbildes in WordPress
Thumbnail in Facebook auf Basis des Artikelbildes in WordPress

Hinweise

  • Ab WordPress 2.9
  • Für die Nutzung der WordPress-eigenen Thumbnails im Theme muss diese Funktionalität – wenn noch nicht geschehen – explizit hinzugeschaltet werden. Die Aufgabe übernimmt folgender Befehl.

Verwendung der Artikelbilder aktivieren in functions.php

<?php
add_theme_support('post-thumbnails');
?>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.