Facebook Gefällt mir Button – „richtiges“ Bild im Artikel einbinden

Der Gefällt mir Button (Like Button) von Facebook ist schnell integriert, ohne weitergehende Maßnahmen tendiert Facebook jedoch dazu immer das falsche Bild zusammen mit der Webseiteninfo auf der Pinnwand des Nutzers zu nehmen.

Zum Glück gibt es eine einfache Abhilfe, die Verwendung des Open Graph Protokoll. Das Open Graph Protokoll ermöglicht es einem Websitebetreiber, seine Website in den Social Graph zu integrieren. Wer mehr Hintergrundwissen dazu möchte, findet eine gute Beschreibung bei Thomas Hutter.

Damit eine Website in den Social Graph integriert werden kann, müssen die entsprechenden Inhalte in Graph Objekte verwandelt werden. Dafür müssen Tags des Open Graph Protokolls sowie der “Like”-Button in die Website integriert werden.

Diese Tags ermöglichen es, strukturierte Informationen über die Seite zu spezifizieren. Umso mehr Informationen zur Verfügung gestellt werden, desto mehr Möglichkeiten bietet Facebook zur Darstellung heute und in Zukunft.

Für unser Problem, das richtige Bild in den Artikel einzubinden ist nur eines der Meta Tags erforderlich. Dieses muss für Anwender von WordPress in der header.php im Bereich vor dem schließenden </head>  eingebaut werden:

<meta property="og:image" content="URL">

Trägt man nun eine Bild URL ein, nutzt Facebook logischerweise immer nur das Bild, das in der URL angegeben ist. Auf die Dauer ist dies ein wenig monoton und alles andere als ein Eyecatcher.

Bei der Suche nach einer universellen Lösung bin ich auf verschiedene Ansätze gestoßen, jedoch nicht auf eine Lösung welche meiner Philosophie entspricht. Meine Forderung war:

1. Falls vorhanden wird das Artikelbild verwendet (Post Thumbnails muss im Themes integriert sein).
2. Es müssen Artikelbilder aus der WordPress Mediathek und aus NextGen Galerie unterstützt werden.
3. Falls kein Artikelbild vorhanden ist, wird das erste Bild aus dem Artikel ausgelesen (<img…).
4. Falls alle Bedingungen vorab nicht erfüllt sind, wird ein default Bild ausgegeben (in meinem Beispiel das Logo).

Lösung -Facebook Gefällt mir Button – „richtiges“ Bild im Artikel einbinden :

In der function.php folgenden Codeschnipsel einbauen:

function catch_that_image() {
global $post, $posts;
// Start Stufe 1, Artikelbild erfassen
$image_id = get_post_thumbnail_id();
// If the post thumbnail id has the form ngg-xyz then it is a NextGen image
if ( is_string($image_id) && substr($image_id, 0, 4) == 'ngg-') {
$ngg_image_id = substr($image_id, 4);
$image = nggdb::find_image($ngg_image_id);
if ($image) { // Safety check for null pointer.
$imageURL = $image-&;>thumbURL;
return $imageURL;
}
}
// if the post thumbnail is wp standard format
elseif (($image_id !='ngg-') AND ($image_id !='')) {
$imageURL = wp_get_attachment_image_src($image_id,'thumbnail');
$imageURL = $imageURL[0];
return $imageURL;
}
// Start Stufe2 falls kein Artikelbild gefunden wurde
else {
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('//i', $post-&>post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){
$first_img = bloginfo('template_url').'/img/logo.gif'; // default image
}
return $first_img;
}
}

Nun noch in der header.php vor dem schließenden </head> den folgenden Codeschnipsel einbauen:

<!-- Start Facebook Opengraph -->
<meta property="og:image" content="<?php echo catch_that_image(); ?>;"/>

Bei Verwendung eines Child Theme „richtiges“ Bild verwenden

Nachdem ich in vielen Anwendungen inzwischen auf die Child Struktur zurückgreife muss der dokumentierte Code angepasst werden.
Der beschriebene Code Zeile 28 greift, falls kein Artikelbild gefunden wird auf das Logo des Basis-Themes zurück! Um universell den richtigen Zugriff sicherzustellen (bei verwendetem Child das Logo im Child) muss der Code wie folgt korrigiert werden:

$first_img = get_stylesheet_directory_uri().'/img/logo.gif';

Ergänzung, Info:

Nur der Vollständigkeit halber hier weitere Meta Einstellmöglichkeiten. Für das Open Graph Protokoll sind fünf notwendig Einstellungen/Werte definiert:

og:title –  Der Titel des Objekts wie er im Social Graph dargestellt werden soll
og:type – Der Typ des Objekts
og:image – Ein Image-URL, der im Zusammenhang mit dem Objekt im Graph dargestellt werden soll. Das Bild muss im Minimum 50×50px und ein Maximum Verhältnis von 3:1 aufweisen.
og:url – Der Canonical-URL als permanente ID für das Objekt im Social Graph
og:site_name – Ein durch Menschen lesbarer Name der Seite

Zusätzlich zu diesen Basis-Angaben muss ein zusätzlicher Wert hinzugefügt werden, dass die Seite verbunden werden kann mit:

fb:admins oder fb:app_id – eine kommagetrennte Liste der Facebook-Benutzer-ID’s
og:description – eine Beschreibung der Seite.