WordPressのOGPプラグイン『WP-OGP』を正しく設定する方法
- December 2nd, 2011
Facebookの「いいね！」したときに、サムネイル付きできちんとシェアするにはOGPなるものに対応しなくてはなりません。
そのためのWordPressプラグインが「WP-OGP」ですが、これがくせ者すぎる・・。以前挫折して放置していたのですが、facebookが普及してきたので重い腰をあげて設定してみましたよ・・。
↑ 正しく設定しないと、こんなかっこわるいことに。サムネイル欲しい！
というわけで、以下、ざざっと作業ログね。
■ WP-OGPの導入
以下からどうぞ。
» WordPress › WP-OGP « WordPress Plugins
インストールしたらActivateしておきましょう。
■ facebookアプリの設定
「Facebook Developers」へ行き、「Apps」から新しいアプリを作って（「App Display Name」はブログ名、「App Namespace」は空欄で）、ずんどこ登録していくと「App ID」というものがもらえます。
あとは自分のIDを調べなくてはいけないので https://graph.facebook.com/(ユーザー名) にアクセスして調べます。
■ WP-OGPの設定
WordPressに戻って左側メニューから「設定」→「WP-OGP」を選択、さきほど調べたApp IDを「fb:appid」に、自分のIDを「fb:admins」に入力します。
■ wp-ogp.phpの編集
プラグインページにいって、WP-OGPのところにある「編集」をクリックして以下を変更します。
まずは「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)); ← こちらをコメントアウト
$image = get_the_post_thumbnail_src($post->post_content); // ← こちらを追加。
if ( empty($image) )
{ return wpogp_image_url_default();}
else
{ return $image; }
}
■ html宣言を編集
テーマの編集で「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が提供するツールでテストします。以下にブログの個別記事のURLを入れてください。
» Debugger – Facebook Developers
次のようになればOKです。
↑ サムネイル来た！
ふー・・・わりと長い道のりですよね・・・。なぜプラグインが修正されない、もしくは新しいプラグインが出てこない・・・。他にもし便利なプラグインとか設定方法とかあったら是非教えてください・・・。
