Artikelbild für Facebook bereithalten

Unter diesem Titel hat Sergej in seinem Blog bereits eine Funktion veröffentlicht, welche dafür sorgt, dass die Artikelbilder dafür hergenommen werden. Diese funktioniert bestens, hab sie hier getestet. Doch was ist nun, wenn der Artikel mal kein Artikelbild hat, sondern eingebettete Bilder, oder gar keine Bilder?

Dafür muss die Funktion etwas erweitert werden, um das erste Bild im Artikel zu finden oder bei Bedarf ein “Default”-Bild zu setzen. Ich hoffe Sergej ist mir nicht all zu böse, wenn ich seine Funktion erweiter :-)

erweiterte Funktion

Zunächst fällt in Zeile 11 die Prüfung auf ein Artikelbild !has_post_thumbnail($GLOBALS['post']->ID) weg, denn dieser Fall wird hier nun separat behandelt. Die Abfrage des Artikelbildes bleibt wie gewohnt – siehe Zeile 15. Hinzu kommt eigentlich alles danach, denn in Zeile 17 wird geprüft, ob das Ergebnis aus Zeile 15 auch ein Array ist und ob somit ein Artikelbild vorhanden ist. Ist dies nicht der Fall greift in Zeile 19 die “else”. Hier wird der Artikel nach Bildern durchsucht und das erste Bild, das gefunden wird, hergenommen – Zeile 23.
Sollte auch diese Suche erfolglos bleiben, so wird in Zeile 25 das zuvor definierte “Default”-Bild aus Zeile 20 eingesetzt. Das Ergebnis wird dann wie gewohnt mittels add_action in den HTML-Header eingefügt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?php
/**
 * Gibt das Vorschaubild u.a. fuer Facebook aus
 *
 * @since ppfeufer 2.3
 * @author  Sergej Müller (modified by: H.-Peter Pfeufer)
 */

function ppfeufer_fb_like_thumbnails() {
    if(is_feed() || is_trackback() || !is_singular()) {
        return;
    }

    /* Source */
    $array_Image = wp_get_attachment_image_src(get_post_thumbnail_id($GLOBALS['post']->ID));

    if(is_array($array_Image)) {
        $var_sFaceBookThumbnail = $array_Image['0'];
    } else {
        $var_sDefaultThumbnail = get_template_directory_uri() . '/images/ppfeufer-logo.jpg';
        $var_sOutput = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $GLOBALS['post']->post_content, $array_Matches);

        if($var_sOutput > 0) {
            $var_sFaceBookThumbnail = $array_Matches[1][0];
        } else {
            $var_sFaceBookThumbnail = $var_sDefaultThumbnail;
        }
    }

    /* Ausgabe */
    echo "\n" . '<!-- Facebook Like Thumbnail -->' . "\n";
    echo sprintf('<link href="%s" rel="image_src" />%s',
            esc_attr($var_sFaceBookThumbnail),
            "\n"
        );

    /**
     * Open:Graph-Tags für FB-Like
     */
    echo '<meta property="og:site_name" content="' . get_bloginfo('name') . '"/>' . "\n";
    echo '<meta property="og:type" content="Blog"/>' . "\n";
    echo '<meta property="og:title" content="' . get_the_title() . '"/>' . "\n";
    echo '<meta property="og:url" content="' . get_permalink() . '"/>' . "\n";
    echo '<meta property="og:image" content="' . esc_attr($var_sFaceBookThumbnail) . '"/>' . "\n";
    echo '<meta property="og:description" content="' . get_the_excerpt() . '"/>' . "\n";
    echo '<!-- Facebook Like Thumbnail -->' . "\n";
}

/* Aktion hinzufügen */
add_action('wp_head', 'ppfeufer_fb_like_thumbnails');
?>

Wohin damit

Diese Funktion wird schliesslich in die functions.php des verwendeten Themes eingebunden. Dort tut sie nun ab sofort ihren Dienst und das Wirrwarr mit den Bildern bei Facebook-Like hat ein Ende :-)

Wo liegt das “Default”-Bild

In diesem Beispiel innerhalb des verwendeten Themes im Ordner “images” und nennt sich “my-logo.jpg“. Der Name ist natürlich frei wählbar, genau so wie der Speicherplatz des Bildes. Es muss dann nur lediglich in der Funktion angepasst werden.

Artikel / Seite weiterempfehlen

30 Meinungen zu “WordPress: Artikelbilder für Facebook

  1. Prima Beitrag. Endlich mal ne nützliche Funktion. Facebook wird ja eh immer wichtiger (wobei noch bekannter geht ja nicht mehr) :-)

  2. Boah endlich, hat zwar ein wenig gedauert, aber jetzt kann ich endlich dieses nervige Bilderaussuchen ad acta legen! :D Daaaaaaaanke…
    Bin leider selber zu blöd sowas zu programmieren, deswegen freue ich mich immer wenn sowas wirklich nützliches vorgestellt wird.

  3. Hallöchen! :)

    Das ist ja mal interessant. Da ich gerade dabei bin ein Logo für meinen Blog zu entwickeln kommt mir diese Funktion wie gerufen, danke!

    Grüße aus Augsburg

    Mike, TmoWizard

  4. Hi

    ich bekomme folgende Fehlermeldung wenn ich meine functions.php ändere

    Fatal error: Call to undefined function get_post_thumbnail_id() in /www/htdocs/v109800/vbforum/wp-content/themes/pinksimplescheme/functions.php on line 148

    Was könnte das sein ?

    • Um welche WordPress-Version handelt es sich?
      Sind Post-Thumbnails überhaupt in dem Theme vorgesehen?

      Um herauszufinden ob die Unterstützung für Post-Thumbnails im Theme vorhanden ist, einfach die functions.php des Themes nach folgender Zeile durchsuchen:

      1
      add_theme_support( 'post-thumbnails' );

      Sollte die WordPress-Version älter als 2.9 sein, dann updaten, denn die Post-Thumbnails gibt es erst ab Version 2.9.

  5. ich benutze 3.0.1 und pinksimplescheme als Template.

    1
    add_theme_support( 'post-thumbnails' );

    Scheint im Template nicht vorhanden zu sein.

    Was kann ich tun?

    Ich möchte das Template eigentlich nicht gegen ein anderes tauschen.

    Hier mal meine functions.php

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    <?php

    include("settings.php");

    # WIDGET: Sidebar
    if ( function_exists('register_sidebar') )
        register_sidebar(array(
            'name' => 'Top Sidebar',
            'before_title' => '<h2>',
            'after_title' => '</h2>',
            'before_widget' => '<div class="box">',
            'after_widget' => '</div>',
        ));

    # WIDGET: Left Sidebar
    if ( function_exists('register_sidebar') )
        register_sidebar(array(
            'name' => 'Left Sidebar',
            'before_title' => '<h2>',
            'after_title' => '</h2>',
            'before_widget' => '',
            'after_widget' => '',
        ));
       
    # WIDGET: Right Sidebar
    if ( function_exists('register_sidebar') )
        register_sidebar(array(
            'name' => 'Right Sidebar',
            'before_title' => '<h2>',
            'after_title' => '</h2>',
            'before_widget' => '',
            'after_widget' => '',
        ));

    # Displays a list of pages
    function dp_list_pages() {
        global $wpdb;
        $querystr = "SELECT $wpdb->posts.ID, $wpdb->posts.post_title FROM $wpdb->posts WHERE $wpdb->posts.post_status = 'publish' AND $wpdb->posts.post_type = 'page' ORDER BY $wpdb->posts.post_title ASC";
        $pageposts = $wpdb->get_results($querystr, OBJECT);
        if ($pageposts) {
            foreach ($pageposts as $post) {
                ?><li><a href="<?php echo get_permalink($post->ID); ?>"><?php echo $post->post_title; ?></a></li><?php
            }
        }
    }

    # Displays a list of categories
    function dp_list_categories($num=0, $exclude='') {
        if (strlen($exclude)>0) $exclude = '&exclude=' . $exclude;
        $categories = get_categories('hide_empty=1'.$exclude);
        $first = true; $count = 0;
        foreach ($categories as $category) {
            if ($num>0) { $count++; if ($count>$num) break; } // limit
            if ($category->parent<1) {
                if ($first) { $first = false; $f = ' class="f"'; } else { $f = ''; }
                ?><li<?php echo $f; ?>>
                <a href="<?php echo get_category_link($category->cat_ID); ?>"><?php echo $category->name ?><?php echo $raquo; ?></a></li>
                <?php
            }
        }
    }

    # Displays a list of popular posts
    function dp_popular_posts($num, $pre='<li>', $suf='</li>', $excerpt=true) {
        global $wpdb;
        $querystr = "SELECT $wpdb->posts.post_title, $wpdb->posts.ID, $wpdb->posts.post_content FROM $wpdb->posts WHERE $wpdb->posts.post_status = 'publish' AND $wpdb->posts.post_type = 'post' ORDER BY $wpdb->posts.comment_count DESC LIMIT $num";
        $myposts = $wpdb->get_results($querystr, OBJECT);
        foreach($myposts as $post) {
            echo $pre;
            ?><a href="<?php echo get_permalink($post->ID); ?>"><?php echo $post->post_title ?></a><?php
            if ($excerpt) {
                ?><p><?php echo dp_clean($post->post_content, 120); ?>...</p><?php
            }
            echo $suf;
        }
    }

    # Displays a list of recent categories
    function dp_recent_comments($num, $pre='<li>', $suf='</li>') {
        global $wpdb, $post;
        $querystr = "SELECT $wpdb->comments.comment_ID, $wpdb->comments.comment_post_ID, $wpdb->comments.comment_author, $wpdb->comments.comment_content, $wpdb->comments.comment_author_email FROM $wpdb->comments WHERE $wpdb->comments.comment_approved=1 ORDER BY $wpdb->comments.comment_date DESC LIMIT $num";
        $recentcomments = $wpdb->get_results($querystr, OBJECT);
        foreach ($recentcomments as $rc) {
            $post = get_post($rc->comment_post_ID);
            echo $pre;
            ?><strong><a href="<?php the_permalink() ?>#comment-<?php echo $rc->comment_ID ?>"><?php echo $rc->comment_author ?></a></strong> on <a href="<?php the_permalink() ?>#comment-<?php echo $rc->comment_ID ?>"><?php echo $post->post_title; ?></a><?php
            echo $suf;
        }
    }


    # Displays post image attachment (sizes: thumbnail, medium, full)
    function dp_attachment_image($postid=0, $size='thumbnail', $attributes='') {
        if ($postid<1) $postid = get_the_ID();
        if ($images = get_children(array(
            'post_parent' => $postid,
            'post_type' => 'attachment',
            'numberposts' => 1,
            'post_mime_type' => 'image',)))
            foreach($images as $image) {
                $attachment=wp_get_attachment_image_src($image->ID, $size);
                ?><img src="<?php echo $attachment[0]; ?>" <?php echo $attributes; ?> /><?php
            }
    }

    # Removes tags and trailing dots from excerpt
    function dp_clean($excerpt, $substr=0) {
        $string = strip_tags(str_replace('[...]', '...', $excerpt));
        if ($substr>0) {
            $string = substr($string, 0, $substr);
        }
        return $string;
    }

    # Displays the comment authors gravatar if available
    function dp_gravatar($size=50, $attributes='', $author_email='') {
        global $comment, $settings;
        if (dp_settings('gravatar')=='enabled') {
            if (empty($author_email)) {
                ob_start();
                comment_author_email();
                $author_email = ob_get_clean();
            }
            $gravatar_url = 'http://www.gravatar.com/avatar/' . md5(strtolower($author_email)) . '?s=' . $size . '&amp;d=' . dp_settings('gravatar_fallback');
            ?><img src="<?php echo $gravatar_url; ?>" <?php echo $attributes ?>/><?php
        }
    }

    # Retrieves the setting's value depending on 'key'.
    function dp_settings($key) {
        global $settings;
        return $settings[$key];
    }


       


    ?>
  6. Morgen peter.

    Hinzufügen

    Wenn ich das machen bekomme ich folgende Fehlermeldung.
    Parse error: syntax error, unexpected T_STRING in /www/htdocs/v109800/vbforum/wp-content/themes/pinksimplescheme/functions.php on line 4

    Langsam macht es kein Spass mehr.^^

  7. Das mit dem Bild aus dem Artikel funktioniert wunderbar, aber das mit dem Defaultbild, welches ich angegeben habe, funktioniert irgendwie bei der Homepage nicht. Er nimmt entweder das logo oder das Banner aus der rechten sidebar

    • Hallo Heiko,

      Wenn ich es richtig verstehe, soll das heißen, dass dies auf der Startseite, also in der Artikelübersicht nicht funktioniert. Das ist richtig, das kann es auch nicht. Denn wie der Namer schon sagt, ist dies eine Artikelübersicht, also eine Auflistung mehrerer Artikel, für die im Idealfall jeweils ein Bild zur Verfügung gestellt werden muss. Da es bei dieser Funktion allerdings darum geht nur ein Bild pro Seite zur Verfügung zu stellen, wird dies auf der Artikelübersicht nicht berücksichtigt.

      Siehe auch im Code selbst.

      1
      2
      3
      if(is_feed() || is_trackback() || !is_singular()) {
          return;
      }

      Diese Abfrage heißt nichts anderes als:
      Wenn angezeigte Seite ein Feed ist – is_feed()oder ein Trackback ist – is_trackback()oder keine Einzelseite – is_singular() – dann breche die Funktion ab.

      Mit anderen Worten, diese Funktion greift nur bei Einzelseiten. Also einzelnen Artikeln oder CMS-Seiten.

  8. Diese Funktion würde ich auch gern verwenden, ich habe aber das Problem, dass mir nach der Einbindung die unten stehenden Fehlermeldungen um die Ohren gehauen werden. Woran kann das liegen?

    Ich hatte bei der Suche nach einer Lösung gelesen, dass es mit der Rechtevergabe Probleme geben könnte. Ich habe die Rechte für den WordPressordner entsprechend angepasst, aber ich finde z.B. keinen phptmp-Ordner, weshalb ich die Meldung komisch finde.

    Ich weiß, dass ich von Haus aus keinen Zugriff auf bestimmte Ordner habe, so kann ich bei meinem Provider z.B. keine Datein in den Ordner Backup verschieben. Kann das was damit zu tun haben?

    Fehlermeldung

    Warning: is_dir() [function.is-dir]: open_basedir restriction in effect. File(/) is not within the allowed path(s): (/var/www/web948/html/:/var/www/web948/phptmp/:/var/www/web948/files/:/var/www/web948/atd/:/usr/share/php/) in /var/www/web948/html/afrika/wp-includes/functions.php on line 2060

    Warning: file_exists() [function.file-exists]: open_basedir restriction in effect. File(/) is not within the allowed path(s): (/var/www/web948/html/:/var/www/web948/phptmp/:/var/www/web948/files/:/var/www/web948/atd/:/usr/share/php/) in /var/www/web948/html/afrika/wp-includes/functions.php on line 2051

    Warning: is_dir() [function.is-dir]: open_basedir restriction in effect. File(/) is not within the allowed path(s): (/var/www/web948/html/:/var/www/web948/phptmp/:/var/www/web948/files/:/var/www/web948/atd/:/usr/share/php/) in /var/www/web948/html/afrika/wp-includes/functions.php on line 2060

      • In dieser function.php habe ich bisher nie rumgespielt. Die betroffene function im Gesamten sieht so aus:

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        /**
         * Recursive directory creation based on full path.
         *
         * Will attempt to set permissions on folders.
         *
         * @since 2.0.1
         *
         * @param string $target Full path to attempt to create.
         * @return bool Whether the path was created. True if path already exists.
         */

        function wp_mkdir_p( $target ) {
            // from php.net/mkdir user contributed notes
            $target = str_replace( '//', '/', $target );

            // safe mode fails with a trailing slash under certain PHP versions.
            $target = rtrim($target, '/'); // Use rtrim() instead of untrailingslashit to avoid formatting.php dependency.
            if ( empty($target) )
                $target = '/';

            if ( file_exists( $target ) )
                return @is_dir( $target );

            // Attempting to create the directory may clutter up our display.
            if ( @mkdir( $target ) ) {
                $stat = @stat( dirname( $target ) );
                $dir_perms = $stat['mode'] & 0007777;  // Get the permission bits.
                @chmod( $target, $dir_perms );
                return true;
            } elseif ( is_dir( dirname( $target ) ) ) {
                    return false;
            }

            // If the above failed, attempt to create the parent node, then try again.
            if ( ( $target != '/' ) && ( wp_mkdir_p( dirname( $target ) ) ) )
                return wp_mkdir_p( $target );

            return false;
        }

        Die betroffenen beiden Zeilen:

        2051:

        1
        if ( file_exists( $target ) )

        2060:

        1
        } elseif ( is_dir( dirname( $target ) ) ) {

        Wenn ich den Code richtig verstehe, versucht die function etwas zu erstellen und dafür Rechte zu vergeben. Aber warum versucht sie das (und scheitert dabei), wenn ich versuche, deinen Code einzufügen?

        Irgendwelche Tipps?

        Das mit den Restriktionen vom Provider dachte ich mir schon. Danke für die Bestätigung.

  9. Den von dir gezeigten Code habe ich natürlich nicht in die Core-Datei geschrieben. Dann muss ich halt erst mal auf diese tolle Funktion verzichten, bis es eine bessere Lösung gibt.

  10. Habe den Code gerade eingebunden, und was soll ich sagen, perfekt! Hatte vorher ein statisches … link rel=”image_src” … aber mit der Funktion klappts natürlich noch besser! Danke! :)

  11. Die Facebook Buttons – Segen und Geißel [Teil 1 – der Like-Button]…

    Der Like-Button ist wohl momentan das omnipräsenteste Symbol im Web. Jeder Artikel, jedes Video und jedes Bild ist mit dem blauen Facebook-Daumen versehen und macht es den Benutzern möglich ihre Meinung mit einem einfach Klick kundzutun. Für einen fris…

  12. Hallo und danke erstmal für dieses prima Tutorial + Code!

    Bei mir funktioniert das auch super bis auf folgende Zeile (ich benutze keine excerpts, daher die Änderung auf content)

    1
    echo '<meta property="og:description" content="' . get_the_content( $stripteaser ) . '"/>' . "\n";

    Leider wird dieser Inhalt nicht korrekt übergeben. Woran kann das liegen?

Hinterlasse eine Antwort

Ihre Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind durch * markiert.

Sie können folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>