【追記：2012年01月30日】
何度も何度も Try and Error を繰り返していますが、やはり上手くいきません・・・と、そんな時、「glad design blog – Crazy One -::【WordPress】Facebook OGP 設定手順メモ」という投稿記事を見つけました。それによれば、以下の通りです。
普通にやれば普通に反映されるはずなのですが、何故かうまく反映されない、という事態に遭遇しました。URLリンターでチェックして、問題ないのに、ブログではイイねボタンが機能しなかったり、逆にリンターでエラーが出ているのに、イイねボタンが機能したり。いろいろと調べまくっても、まったく原因がわからず、他の用事をすませて、あらためて取り掛かると治っていたり・・・・。これがFacebookの仕様か・・・と思うほどでした。
な～んだ・・・私だけではありませんね、上手くいっていない様子は・・・しかも「「いいね！」ボタンが機能していたり、していなかったりでその原因がまったく理解できないと同じ状況！暫く様子を見ようかな、と考えています。まっ、それでも参考になりそうなウェブページをリストしておきましょう。
【公開時、投稿記事】
先日、Facebook 内に本ブログ用の「Facebookページ」を作成しました。作成には「webox blog::Facebookページ作成からWordPressとの連携までの道のり」を参考にさせて頂きました。詳細に渡って解かり易く「Facebookページ」の作成方法が記述されていますので簡単に設定できます。
そして「次」として、「ブログに OGP を設定する」ってことになったのですが、OGP ってのは以前チャレンジして断念しているので、今回はリベンジといったところでしょうか。まずは、OGP とは・・・から復習しました。
OGP とは
OGP とは、Open Graphic Protocol の略であることは知っていたのですが・・・「 IT戦記::フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か」が解かり易いと思いますのでちょっと引用しておきましょう。
簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。（中略）決まった OGP という書き方で HTML に情報を付加しておくことで、プログラムからも意味を理解しやすいウェブページを作っていこうってことです。
なるほど、とっても簡単だ！しっかし・・・どうしてこれが重要なの？ってことで上記の投稿記事からその重要性を引用しておきましょう。
（Facebook）「いいね！」ボタンや（mixi）「チェック」ボタンで、ウェブページが紹介されるようになって、ウェブ中の様々なウェブページがどんどん SNS の中に流れ込んでくるようになっているんですね。で、そうすると当然 SNS の中でそのページをどう表現すればいいか（リンクテキストはどうすべきか、画像はどうすべきか、どこに表示すべきか）という問題が出てきます。そこで、最近さまざまな SNS サイトで使われるようになった仕様が OGP なんですね。
私のような素人はここまで読めば、なんとなく OGP が Facebook との連携では重要だ、ってところは理解できそうです。WordPress を利用していますから、プラグインがきっとあって、ちょろちょろっと設定すれば、きっと機能するんだろうな～ってことでやってみたわけです！
WordPress のプラグイン、WP-OGP の設定
「webox blog::Facebookページ作成からWordPressとの連携までの道のり」にあるプラグイン、「WP-OGP」を利用して Facebook の OGP を設定しようと考えましたが、何やらコードを修正する必要がありそうです・・・そこで、他のプラグインが無いかと探したのですが・・・「IDEA*IDEA::WordPressのOGPプラグイン『WP-OGP』を正しく設定する方法」に記述されていますが、どうやらあまり選択肢がないようです。「まっ、詳細が説明されているから大丈夫だ！」と心に誓って、本ブログでも「WP-OGP」を利用することにしました！
プラグインのインストールは割愛します。通常のインストールとまったく同じです。そして「WP-OGP」の設定ですが、次の2項目の設定のみです。
- アプリケーション ID
- Facebook のユーザ ID
「アプリケーション ID」は、「Facebook Developers」へ行き、メニューの「アプリ」から新しいアプリを作って（「App Display Name」はブログ名、「App Namespace」は空欄で）登録していくと「アプリケーション ID」が取得できます。
「ユーザー ID」ですが・・・これが曲者！とにかく見つからず、四苦八苦しましたが最も簡単な方法は、https://graph.facebook.com/（ユーザー名）にアクセスして調べるのが最も簡単なような気がします！当然ですが「ユーザー名」を既に獲得している御自分のものに書き換えます。すろと・・・「id」ってのが登場してくれます。
これで「WP-OGP」の設定は終了！そして、コードの修正を実施します。ガイドラインに沿って・・・修正箇所は以下の通り。
function load_wpogp_settings() {
global $ogpt_settings;
$ogpt_settings['fb:appid'] = get_option(OGPT_SETTINGS_KEY_FB_APPID);
$ogpt_settings['fb:admins'] = get_option(OGPT_SETTINGS_KEY_FB_ADMINS);
}
上記の部分の「fb:appid」を「fb:app_id」に修正します。つまり以下のようになります。
function load_wpogp_settings() {
global $ogpt_settings;
$ogpt_settings['fb:app_id'] = get_option(OGPT_SETTINGS_KEY_FB_APPID);
$ogpt_settings['fb:admins'] = get_option(OGPT_SETTINGS_KEY_FB_ADMINS);
}
そしてもう一箇所。「wpogp_image_url()」関数の部分を書き換える必要があるそうです。
function wpogp_image_url() {
global $post;
$image = get_the_post_thumbnail_src(get_the_post_thumbnail($post->ID));
if ( empty($image) )
{ return wpogp_image_url_default();}
else
{ return $image; }
}
上記を以下の通りに修正。
function wpogp_image_url() {
global $post;
// $image = get_the_post_thumbnail_src(get_the_post_thumbnail($post->ID)); ← こちらをコメントアウト
$image = get_the_post_thumbnail_src($post->post_content); // ← こちらを追加。
if ( empty($image) )
{ return wpogp_image_url_default();}
else
{ return $image; }
}
更に、テーマファイルの header.php の HTML 宣言文を以下に書き換えます。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
意外に簡単だな・・・そして、上手く機能してるかどうかをチェックするために、Facebook が提供するテストツール「Debugger – Facebook Developers」にブログの個別記事の URL を入れてテスト！
ところが・・・テスト結果は・・・サムネイル・・・表示されません！不思議なことは、「WP-OGP」の Default のファイルを変更しても下記とまったく同じ結果になります。何で？？？
「Facebookページ」自体は、RSS を取得させて自動的に投稿記事を掲載するようにしていますから、普通に閲覧していただくことはできるのですが、「いいね！」ボタンはどうやら不思議な画像で埋め尽くされそうです・・・何がいけないのかな～何度も何度も修正部分を読み返しましたが、正しい・・・はずなんですけど・・・
