Fun & Stuff

Facebook gefällt mir Button – Erstes Bild im Artikel einbinden

gefaelltmirbuttonfacebook.png
Verfasst von Stephan Walcher

Zwei sehr beliebte Artikel hier auf Prometeo.de sind die Artikel Facebook gefällt mir Button extended und Facebook Gefällt mir Button und Share Button bündeln in denen ich erkläre wie man den gefällt mir Button in einen WordPress Blog einbaut und welche Vorteile die FBML Version mit sich bringt. Zwar soll die FBML-Version die Seite langsamer machen, anderseits kann man durch die Kommentar Funktion mehr Sichtbarkeit erzielen. Ein Schlüsselelement dabei, das automatisch eingebundene Bild, denn Bilder sind eyecatcher.

Anders als in meinem Beitrag Facebook gefällt mir Button extended verwende ich inzwischen das WordPress Plugin Facebook Like Button. Die Gründe hierfür sind recht einfach, ich fand das FBLike Plugin ein wenig dirty denn man musste die AppID und die Admin ID manuell im Theme hinzufügen außerdem kann man im Facebook Like Button ganz leicht zwischen iFrame und XFBML Version wechseln.

Wie ich im Beitrag Facebook Gefällt mir Button und Share Button bündeln gezeigt habe, bietet die FBML Version einen kleinen aber feinen Vorteil, User können nicht nur einen Beitrag liken, sie können auch einen Kommentar hinterlassen. Macht man dies, sucht sich Facebook automatisch ein Bild aus und nutzt es auf der Facebook Seite.

gefaelltmirbuttonfacebook

Wie man im Screenshot hier oben gut sehen kann Facebook tendierte dazu immer das falsche Bild zu nehmen. Zum Glück weiß Facebook das nicht alles 100% funktioniert und so gibt es die Möglichkeit über den Meta Befehl ein Artikelbild zu definieren.

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.

Viele WordPress Themes nutzen inzwischen die post-thumbnail function. Dabei wird ein Bild pro Artikel definiert und auf Anfrage ausgelesen. Sollte euer Theme diese Funktion nicht unterstützen hier gibt es eine Anleitung wie ihr sie nachträglich einbaut.

Ist das einmal gemacht kann man so zum Beispiel mit dem folgenden Code immer das aktuelle Artikel Bild an Facebook liefern.


 

Eine praktische Lösung doch nicht überall auch einsetzbar, denn wer wie ich, primär den Windows Live Writer dazu nutzt um Artikel in Blogs zu veröffentlichen, dem wird diese Lösung ein wenig lästig erscheinen, schließlich müsste man nach jeder Veröffentlichung eines Artikels diesen wieder öffnen und ein Artikel Bild definieren.

Doch wie wäre es wenn WordPress einfach von selbst das erste Bild eines Artikels über eine Variabel ausgeben würde?

Nach längerem Suchen bin ich am Ende auf eine nette Funktion gestoßen die genau das macht. Fügt zunächst den folgenden Code an geeigneter Stelle in die functions.php eures Themes ein:

function catch_that_image() {
	global $post, $posts;
	$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 = "/images/default.jpg"; // default image
	}  
	return $first_img;
}

Nun könnt ihr den Pfad zum ersten Bild in euren Beiträgen über den folgenden Code aufrufen:

Um das Ganze noch perfekt zu machen, braucht ihr nun nur noch den folgenden Code in eure header.php schreiben:

PS: Falls ihr das Facebook Like Plugin verwendet, achtet darauf, das Standard Bild vorher zu deaktivieren.

Feedback, Fragen, Ideen?

7 Kommentare

  • Hey,

    großes Danke für dieses kleine Tutorial. Durch die neuen Facebook-Like-Buttons musste ich es nun ernsthaft in Angriff nehmen. Nun scheint es wunderbar zu funktionieren.

    Danke!

  • Zuerst mal vielen Dank, sehr hilfreich.
    Ich möchte aber den default Wert so einstellen, dass immer auf das Logo in meinem Theme zugegriffen wird. Meine Frage ist nun wie baue ich eine automatische Abfrage des Pfades in den folgenden Code ein??

    $first_img = "/images/default.jpg"; // default image

    Ich denke es müßte mit mit der folgenden Abfrage gehen ???

    bekomme es aber nicht zusammen!

  • Hallo Elotse,

    wenn du immer das Logo verwenden möchtest dann musst du dir nicht die Arbeit machen das über den hier oben beschriebenen Code zu machen. es reicht völlig aus folgenden Metatag zu verwenden

  • Hallo,
    so jetzt habe ich alle meta tags eingefügt und besonders die richtige Adresse des Bildes verwendet – und trotzdem – immer kommt die Grafik mvom Flas-Player. Kann mir mal jemand sagen, was ich da falsch mache?