WordPress: Facebook das richtige Bild für “geteilte” Artikel mitteilen

Nachdem ich jetzt schon mehrmals darüber geschimpft habe, dass mir beim automatischen Artikel posten die falschen Bilder eingefügt werden, habe ich mich jetzt endlich mal damit beschäftigt und nachgelsesen, was man machen muss. Es ist relativ einfach, für Facebook gibt es einen extra meta-tag, der im Header eine Bildquelle angibt.

<meta property="og:image" content="<?php echo $img_url; ?>"/>

Hier mein Lösungsansatz, wie ich das in WordPress umsetze.
Für die Wahl der Bildquelle nehme ich mir das Plugin get_the_image von Justin Tadlock zu Hilfe. Über die Funktion get_the_image(); rufe ich das Plugin in meinem Theme auf. Das Plugin überprüft automatisch Custom Fields, Artkelbild oder auch den Artikel selbst nach Bildern, je nach Parametern wird eine dieser Bildquelle gewählt.

Auf Facebook wird in der Regel entweder die Startseite oder ein einzelner Artikel verlinkt. Also frage ich dies zunächst ab. Für die Startseite kann ich einfach ein generelles Bild, z.B. ein Logo, festlegen.

<?php
    if (is_single()) {
        global $posts; // da ausserhalb der Loop
        if ( function_exists( 'get_the_image' ) ) {
             $img_url = get_the_image( array( ... ) );
        }
    } else { 
        $img_url = get_bloginfo( 'template_url' ) . '/g/fbdefault.jpg'; 
    }
?>
<meta property="og:image" content="<?php echo $img_url; ?>"/>

Da das Plugin nicht nur die Bildquelle selbst ausgibt, muss ich die Ausgabe des Plugins noch über einen Filter Hook filtern. Folgende Zeilen kommen in die functions.php.

function overwrite_image( $image ) {
    $pattern = '/src="([^"]*)"/';
    preg_match( $pattern, $image, $matches );
    $src = $matches[1];
    unset( $matches );
    
    return $src;
}
add_filter( 'get_the_image', 'overwrite_image' );

Schlussendlich muss noch die Funktion get_the_image() mit ein paar Parametern gefüttert werden, damit das Ergebnis wie gewünscht erscheint.

'post_id' => $post->ID, // da ausserhalb der Loop
'echo' => false, // die Ausgabe verhindern
'default_image' => get_bloginfo( 'template_url' ) . '/g/fbdefault.jpg'
// Bildquelle festlegen, falls keine andere vorhanden ist

Noch einmal zusammen:

<?php
    if ( is_single() ) {
        global $posts; // da ausserhalb der Loop
        if ( function_exists( 'get_the_image' ) ) {
            $img_url = get_the_image( array( 
                'echo' => false, 
                'default_image' => get_bloginfo( 'template_url' ) . '/g/fbdefault.jpg',
            ) );
        }
    } else { 
        $img_url = get_bloginfo( 'template_url' ) . '/g/fbdefault.jpg'; 
    }
?>
<meta property="og:image" content="<?php echo $img_url; ?>"/>

Sicherlich kann man das auch noch schöner machen, aber es funktioniert und baut auf einem guten Plugin auf, welches z.B. auch das Cachen der Bildabfrage unterstützt.