[WordPress] Automatisch erstes Bild im Artikel für Like-Button wählen
Geschrieben am 16.07.2011 um 18:44 von Michael Eugster, abgelegt in der Kategorie WWW.

Heute möchte ich euch einen kurzen, aber vor allem für Blogger bestimmt interessanten Artikel zum Thema Facebook Like-Button und WordPress mit euch teilen.
Via Google kam ich zum Blog Prometeo, welcher die Problemlösung für meine Frage bot. Wie ihr bestimmt schon bemerkt habt, habe ich unter meinen Beiträgen einen Like-Button von Facebook eingebunden. Wenn man diesen bisher anklickte, erschien auf dem Profil oder im Homestream von Facebook ein entsprechender Vermerk mit einem Bild, das gar nichts mit dem Artikel zu tun hatte, sondern nur ein Button auf dieser Seite war.
Ich wollte jedoch, dass jeweils automatisch das Bild ausgewählt wird und auf Facebook angezeigt wird. Ich wollte dazu nicht immer ein Bild definieren, das dann dort erscheint, sondern ebend as erste Bild des Beitrages und sonst das Logo meines Blogs.
Wenig Code, viel Spass
Im besagten Artikel von Prometeo habe ich also zwei Codeschnipsel gefunden, die genau dies erledigen:
In die functions.php eures aktuellen Themes diesen Code einfügen:
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){
$first_img = "/images/default.jpg"; // default image
}
return $first_img;
}
Dort, wo als Kommentar «default image» hinten Steht, kann man zwischen die Anführungs- und Schlusszeichen noch den Pfad für ein Standardbild angeben, das verwendet wird, falls sich kein Bild im Artikel befindet.
Die folgende Zeile gehört dann noch in die header.php eures aktuellen Themes in den <header>-Bereich:
<meta property="og:image" content="<?php echo catch_that_image(); ?>" />
Das wars dann schon, man darf glücklich sein und in Zukunft erscheint auf Facebook das erste Bild des Artikels. Ihr dürft es gerne anhand diese Beitrages gleich mal testen und unten auf den Button klicken, denn ich habe den genau gleichen Code hier in meinem Blog-Theme verwendet.
[Update] Für die Bequemen: Als Plugin
Klaeui hat mich in den Kommentaren darauf hingewiesen, dass man die ganze Sache auch mit einem Plugin lösen kann (hier der Link direkt zum Plugin auf WordPress.com). Der Wermutstropfen dabei: Man kann kein ein Standard-Bild definieren, sollte es einmal kein Bild im Artikel haben (EDIT: Ist nun möglich, danke JCFrick).






RSS-Feed
Kommentar von klaeui — 16. Juli 2011, 20:15
anstatt mit codeschnipsel rumschlagen gäbe es da auch ein plug-in das läuft. ohne standardbild, falls kein bild im beitrag ist.
Kommentar von klaeui — 16. Juli 2011, 20:17
kann es sein dass deine kommentare geschluckt werden? darum jetzt zweiter versuch: es gibt da auch ein plug-in, dass das erste bild aus dem beitrag in facebook anzeigt, einfach wenn kein bild im beitrag ist, gibts halt kein standardbild zum definieren
Pingback von m_Blog » [Wordpress] Automatisch erstes Bild im Artikel für Like … » Beliebteste Suchbegriffe — 17. Juli 2011, 00:42
[...] den Originalbeitrag weiterlesen: m_Blog » [Wordpress] Automatisch erstes Bild im Artikel für Like … Content/ Zitat Ende Klicken Sie einfach auf den Link unter "Beitrag weiterlesen", dann gelangen [...]
Kommentar von Michael Eugster — 17. Juli 2011, 11:05
@klaeui: deine kommentare sind irgendwie direkt im spam gelandet – keine ahnung, was aksimet da machte…
auf jeden fall besten dank für den hinweis, ich werde das gleich noch im artikel ergänzen. :)
Kommentar von Jean-Claude Frick — 17. Juli 2011, 12:36
In dem im Beitrag und den Kommentaren angegebene PlugIn kann inzwischen auch ein Standard Bild definiert werden
Super Beitrag
gruss JC
Kommentar von Michael Eugster — 17. Juli 2011, 15:20
@Jean-Claude Frick: merci für den hinweis, habs oben entsprechend korrigiert.
Kommentar von c.meier — 28. Juli 2011, 08:22
Hallo, ein sehr hilfreicher post hier auf dem Blog. Dieser hat mir sehr geholfen. Jetzt kann ich meinen ” Gefällt mir” button gestalten. :-)
Kommentar von sergey — 16. Oktober 2011, 17:54
Was vielleicht auch nicht schlecht ist, so als Hilfe: Den Code nicht ins ‘Standard’ Theme einfügen das man gerade benutzt, sondern ein Child Theme machen, wo die Änderungen reinkommen. So vermeidet man den unschönen Effekte, die Änderungen bei einem Theme Update wieder einzufügen. ;) (Falls man denn nicht das PlugIn wählt. ;))