facebook「いいね」を押したときに表示されるサムネイル画像を指定する

WordPressで、記事に組み込んだfacebookの「いいね」ボタンを押したときにウォールに表示される画像をきちんと指定する方法です。

最近オープンしたサイトで、「いいね」を押したときにウォールに表示されるサムネイル画像が大半の記事で全く関係ない違和感たっぷりな画像が表示されてしまったので、ワタワタと対応しました。
（今までそんな問題はなかったのですが、、、気づいてなかっただけ？）

調べてみると、手動でウォールに投稿するときと違って「いいね」の場合はfacebookが適当に画像を選んでくれるらしく自分で画像を選ぶことができません。
サイトの方で指示してあげる必要がありますが、OGP (The Open Graph Protocol) を使うことで解決できそうだったので、検索で引っかかったサイトを参考にコーディングしてみました。
せっかくなので他のサイトでも使い回しきくように関数化。

add_action('wp_head', 'meta_facebook_og');
function meta_facebook_og(){
    global $post;
    if ( !is_singular() ) { return; } 
    $thumbnail = '';

    echo '<meta property="og:url" content="' . get_permalink($post->ID) . '"/>' . "\n"; 
    echo '<meta property="og:title" content="' . $post->post_title . '"/>' . "\n";    
    echo '<meta property="og:description" content="' . strip_tags(get_the_excerpt()) . '"/>' . "\n";
    echo '<meta property="og:type" content="article"/>' . "\n";

    if(has_post_thumbnail($post->ID)) {
        $tid = get_post_thumbnail_id($post->ID);
        $url = wp_get_attachment_image_src($tid);
        $thumbnail = $url[0];
    } else {
        $images = get_children(array(
            'numberposts' => 1,
            'post_parent' => $post->ID,
            'post_type' => 'attachment',
            'post_mime_type' => 'image',
            'order'      => 'ASC',
            'orderby' => 'menu_order ID',
        ));
        if ( empty($images) ){
            $thumbnail = get_bloginfo('template_directory') . '/images/noimage.png';
        } else {
            $image = array_pop($images);
            $url = wp_get_attachment_image_src($image->ID);
            $thumbnail = $url[0];
        }
    }
    echo '<meta property="og:image" content="' . $thumbnail . '"/>' . "\n";
}

これを、functions.php に打ち込めば動くはずです。

ざくっと作ったので og:description の詰めの甘さとかかなり適当感漂ってますが(^^;)、とりあえずはこれでサムネイルの問題は解決できたっぽいです。

記事に画像が無い場合は、テーマフォルダの中の images/noimage.png を読むようにしているので、50×50以上の画像を上げておいてください。
テーマフレームワークを使ってる場合は親テーマを見に行く設定になっています。

問題等あったらご指摘頂けるとうれしいです。