WordPressをFacebookのOGPにプラグインなしで対応させる

つづく!! と言っといて放っといた、
WordPressをFacebookのOGPに対応させる のつづき。

プラグイン「Open Graph Pro」で、OGPへの対応をしたのですが、
仕事の都合で、Facebookはその後1ヶ月ほど放置。
4月に入ってからちょこちょこやり始めましたのですが、
このブログの記事をFacebookで紹介しようとしたところ、トラブル発生。

画像無くて申し訳ありませんが、
記事概要の部分に、サイトの説明が表示されてしまうのです。
これではプラグイン導入前と、たいして変わらないじゃん。

この1ヶ月で何かしたか? いや、いろいろしました。
WordPressのテーマのcssをいじったり、他のプラグインをアップデートしたり、
Facebook側もなんか変更あったみたいだし、タイムラインの導入もした。
しかし、Open Graph Proはアップデートしてないし、結局原因を特定できない。

しょうがないので、Open Graph Proをはずして、プラグインなしでOGP対応をすることにした。
参考にしたサイトはここ。↓

貼るだけ簡単!アクセスを倍増するWordPress用OGPコード | Oxy notes
プラグインに頼らず、思い通りに動作するOGP用のコードを書きました 2012年3月現在、日本のFacebook利用者数が768万人。Google+は200万人。Twitterは3000万人。mix …

この記事の後半に、プラグインを使わずにOGPの設定をする方法が載っています。
基本的にはここに載ってるコードを、使用しているテーマのheader.phpに貼り付け、
自分の環境に合わせて編集します。

これで完了。
だったんですが、下の記事を見てしまいました。

[Wordpress]これは簡単!プラグインを使わずにOGPを設定する方法! | こんちくわのぶろぐ
こんちくわ。 今日もTwitter、Facebookを楽しんでいる@conchikuwaです。 最近ではブログを読んでいただくだけでなくTwitterやFacebookにシェアしてもらえると嬉しさ倍増 …

トップページをシェアまたはいいね!をした場合に、
タイトルや画像がその時点での最新記事の内容になってしまうとのこと。
では、記事を参考に直します。

header.phpのxmlns属性を変更します。

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

同じくheader.phpにOGP用のコードを追加します。

[php]<!– ここからOGP –>
<meta property=”fb:admins” content=”●●●●●●●” /><!– FacebookアカウントID –>
<meta property=”fb:app_id” content=”●●●●●●●” /><!– FacebookアプリID –>
<meta property=”og:type” content=”blog”>
<?php
if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
echo ‘<meta property=”og:description” content=”‘.mb_substr(get_the_excerpt(), 0, 100).'”>’;echo “\n”;//抜粋を表示
endwhile; endif;
echo ‘<meta property=”og:title” content=”‘; the_title(); echo ‘”>’;echo “\n”;//単一記事タイトルを表示
echo ‘<meta property=”og:url” content=”‘; the_permalink(); echo ‘”>’;echo “\n”;//単一記事URLを表示
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo ‘<meta property=”og:description” content=”‘; bloginfo(‘description’); echo ‘”>’;echo “\n”;//「一般設定」管理画面で指定したブログの説明文を表示
echo ‘<meta property=”og:title” content=”‘; bloginfo(‘name’); echo ‘”>’;echo “\n”;//「一般設定」管理画面で指定したブログのタイトルを表示
echo ‘<meta property=”og:url” content=”‘; bloginfo(‘url’); echo ‘”>’;echo “\n”;//「一般設定」管理画面で指定したブログのURLを表示
}
?>
<meta property=”og:site_name” content=”<?php bloginfo(‘name’); ?>”>
<?php
$str = $post->post_content;
$searchPattern = ‘/<img.*?src=([“\’])(.+?)\1.*?>/i’;//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
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 {//投稿にサムネイルも画像も無い場合の処理
echo ‘<meta property=”og:image” content=”http://www.●●●.com/●●●.jpg”>’;echo “\n”;
}//投稿にサムネイルも画像も無い場合に表示する画像のURL
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo ‘<meta property=”og:image” content=”http://www.●●●.com/●●●.jpg”>’;echo “\n”;
}//単一記事ページページ以外の場合に表示する画像のURL
?>
<!– ここまでOGP –>[/php]

「fb:app_id」は必要ないかもしれませんが、せっかくなので追記しました。
投稿にサムネイルも画像もない場合、及びホームや固定ページの際に表示したい画像をアップロードしておき、
そのURLを後半に記述します。

以上で 今度こそ完了です。
参考にされる場合は自己責任でお願いします。

保存保存

コメント

  1. Facebook OGP 設定方法 | YAMAbros.COM より:

    […]  WordPress に Facebook の OGP を設定します。WordPress にOGPを設定する場合、プラグインを使うこともできますが、今回はプラグインを使わずに設定しようと思います。 OGP を設定していない場合 いいね!ボタン を押しても、下の画像のように 押してくれた人の Facebookのページには、リンクだけしか表示されません。WordPress コード記入 参考にさせていただいたサイトWordPressをFacebookのOGPにプラグインなしで対応させる[WordPress]これは簡単!プラグインを使わずにOGPを設定する方法!今すぐ確認した方が良い – FacebookのOGPがきちんと設定できているか調べる方法 […]

  2. […]   具体的には↓を参考にさせていただいて、header.phpを編集しました。 WordPressをFacebookのOGPにプラグインなしで対応させる – K2BLOG   こうやって↓ブラウザ内で完結するのは楽チンですな~   […]