Logo m_Blog Logo m_Blog

[WordPress] Automatisch erstes Bild im Artikel für Like-Button wählen

Veröffentlicht am 16.07.2011 » 8 Kommentare » Kategorie: WWW von Michael Eugster

Share on Facebook0Tweet about this on Twitter3Share on Google+1Pin on Pinterest0Share on TumblrBuffer this pageEmail this to someone

Facebook Like-Button und WordPress

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).

Schlagwörter: , , , , , , , , ,

  • http://www.klaeui-web.ch klaeui

    anstatt mit codeschnipsel rumschlagen gäbe es da auch ein plug-in das läuft. ohne standardbild, falls kein bild im beitrag ist.

  • http://www.klaeui-web.ch klaeui

    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: m_Blog » [Wordpress] Automatisch erstes Bild im Artikel für Like … » Beliebteste Suchbegriffe

  • http://meugster.net Michael Eugster

    @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. :)

  • http://www.iFrick.ch Jean-Claude Frick

    In dem im Beitrag und den Kommentaren angegebene PlugIn kann inzwischen auch ein Standard Bild definiert werden

    Super Beitrag

    gruss JC

  • http://meugster.net Michael Eugster

    @Jean-Claude Frick: merci für den hinweis, habs oben entsprechend korrigiert.

  • c.meier

    Hallo, ein sehr hilfreicher post hier auf dem Blog. Dieser hat mir sehr geholfen. Jetzt kann ich meinen ” Gefällt mir” button gestalten. :-)

  • http://sergey.steckdoseonline.com sergey

    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. ;))