Sponsored Link

今回は

記事をFacebookに投稿する場合に、
Facebookのタイムラインに表示される画像と設定方法

についての備忘録です。

これは、

自分で記事をFacebookに共有する場合だけでなく、
あなたの記事を読んだ誰かがFacebookにシェアした
場合にも有効な方法です。

この記事では、プラグインを使わないで
設定します。

特に、All in One SEO packを使っていて、エラーが出る場合は、
以下のとおりにすれば解決する可能性が高いです。

 

プラグインを使わない設定方法

 

１．xmlnsの変更

賢威6.1コーポレート版: ヘッダー (header.php)では、
一番上はこのようになっていました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="ja" lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" itemscope="itemscope" itemtype="http://schema.org/">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

この２行目の
<html xmlns=
から始まる部分を、

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

に変更します。

２．</head>の直前に以下のコードを貼付

<!--OGP開始-->
<meta property="fb:admins" content="カスタマイズ部分１" />
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="blog">
<?php
if (is_single()){// 投稿記事
     if(have_posts()): while(have_posts()): the_post();
                      echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">';echo "\n";//抜粋から
     endwhile; endif;
     echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//投稿記事タイトル
     echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」で入力したブログの説明文
     echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」で入力したブログのタイトル
     }
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿記事に画像があるか調べる
if (is_single() or is_page()){//投稿記事か固定ページの場合
if (has_post_thumbnail()){//アイキャッチがある場合
     $image_id = get_post_thumbnail_id();
     $image = wp_get_attachment_image_src( $image_id, 'full');
     echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//アイキャッチは無いが画像がある場合
     echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//画像が1つも無い場合
     echo '<meta property="og:image" content="カスタマイズ部分２：画像のURL貼付">';echo "\n";
}
} else {//投稿記事や固定ページ以外の場合（ホーム、カテゴリーなど）
     echo '<meta property="og:image" content="カスタマイズ部分３：画像のURL貼付">';echo "\n";
}
?>
<!--OGP完了-->
  • 上記カスタマイズ部分１には、Facebook IDを入れます。
    FacebookIDは、自分のFacebookのプロフィール画面で
    プロフィール画像をクリックしたとき、　後ろの方に
    &type=という文字がありますが、この前に表示された
    15ケタの数字です。
    （URL欄に、…&set=a.数字の羅列１.数字の羅列２.
    数字の羅列３&type=…と表示されているはずですが、
    これのうち数字の羅列３のことです。）
  • 上記カスタマイズ部分２, ３には、表示する画像を個別に
    指定しなかった場合に表示させる画像のURLを記入します。
    画像のURLは、メディア→表示させたい画像とクリックすると
    見られます。
    なお、画像の大きさは最低200px×200px以上でなければなりません。

３．function.phpの編集

jetpackを入れている方は、function.phpの好きな場所に
以下のコードを加えます。

add_filter('jetpack_enable_opengraph', '__return_false', 99);

私は、<?phpのすぐあとに加えてみました。

４．確認

以上の設定がすんだら、
デバッガーのサイトで
ホームページURLと、適当な記事のURLを入力します。

赤い警告がでなければそれでOKです。

５．おまけ：エラーメッセージ

当初私は、上の２．の項目で、異なる記述をしていました。

そうすると、上記デバッガーで確認したとき、

「More Than One OG URL Specified」
という赤い警告がでて、どうしても消えなかったのですが、

10行目と11行目の間に当初入っていた

echo ‘<meta property=”og:url” content=”‘; bloginfo(‘url’); echo ‘”>’;echo “\n”;//「一般設定」で入力したブログのURL

 

の記述と

12行目と13行目の間に当初入っていた

echo ‘<meta property=”og:url” content=”‘; the_permalink(); echo ‘”>’;echo “\n”;//投稿記事パーマリンク
} else {//投稿記事以外（ホーム、カテゴリーなど）

の記述を消したら

上手くいきました。

“og:url” が含まれる記述は、All in One SEO Packかいずれかのプラグインと
重複する記述だったのだと思います。
（私はWordbooker入れていないので）