WordPressにFacebookのOGP(Open Graph Protocol)を簡単に設定できる「WP-OGP」プラグイン

WordPressにFacebookのOGP(Open Graph Protocol)を簡単に設定できる「WP-OGP」プラグイン

Posted at May 18,2011 2:22 AM
Tag:[OGP, Plugin, WordPress, WP-OGP]

ご存知の方も多いと思いますが、WordPressにFacebookのOGP(Open Graph Protocol)を簡単に設定できる「WP-OGP」プラグインを紹介します。

ブログにOGP(meta要素)を設定することで、例えばFacebookのウォールなどからブログをリンクされたときに、ブログの情報をFacebookのプログラムに正しく伝えることができます。

以下、設定方法です。

1.プラグインのダウンロード・インストール

管理画面の「プラグイン」→「新規追加」をクリック。

管理画面

キーワードに「WP-OGP」を入力して「プラグインの検索」をクリック。

プラグインの検索

「いますぐインストール」をクリック。

インストール

インストールが完了したら「プラグインを有効化」をクリック。

インストール完了

これでサイトの(X)HTMLにmeta要素が追加されます。

ソースコード

自動インストール機能が使えない場合は、WP-OGPのページの「Download version~」をクリックして、プラグインアーカイブをダウンロード。

WP-OGPのページ

アーカイブを展開して中にある「wp-ogp」フォルダをWordPressのpluginsフォルダにアップロードしたあと、プラグイン一覧にある「WP-OGP」の「有効化」をクリックしてください。

プラグイン一覧

2.Facebookアプリの登録

WP-OGPプラグインには、OGPの「fb:app_id」「fb:admins」を設定するオプションが用意されています。2項では「fb:app_id」にアプリケーションIDを設定するためのアプリケーション作成を行います。

開発者のページ」にある「マイアプリ」をクリック。

開発者のページ

ページ右上の「Set Up New App」をクリック。

開発者のページ

アプリケーション作成ページに移動するので、適当なアプリケーションを入力し、「同意する」を選択して、「アプリケーションを作成」をクリック。

アプリケーション作成ページ

セキュリティコードを入力して「送信」をクリック。

セキュリティコード

これでアプリが作成されたので「Web Site」タブをクリックして、ブログの「Site URL」にメインページのURL、「Site Domain」にメインページのドメイン(サブディレクトリは入力不要)を入力して「変更を保存」をクリック。また、ここに表示されている「アプリケーションID」はあとで使うのでテキストコピーしておきましょう。

Web Site

保存後の画面でも「アプリケーションID」の確認ができます。

3.オプション設定

3項では「fb:app_id」「fb:admins」を有効にするための設定を行います。

WordPress管理画面に戻って、「設定」→「WP-OGP」をクリック。

管理画面

オプション設定が表示されるので、

  • fb:appid:2項で作成したアプリの「アプリケーションID」
  • fb:admins:FacebookのあなたのユーザーID

を設定します。ユーザーIDが分からない場合は、同じページにある「http://apps.facebook.com/what-is-my-user-id/」のリンクをクリックして進めていけば分かります。

オプション設定

なお、ダウンロードしたバージョンではプラグインのソースコードにtypo(下のスクリーンショットの28行目は「fb:app_id」が正解ですが「fb:appid」になっている)があり、追加されたmeta要素が正常に機能しません。

ソースコード

ということで、plugins/wp-ogp配下にあるwp-ogp.phpを任意のエディタで開き、以下の赤色部分を青色の内容に修正してください。

変更前

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);
}

変更後

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);
}

修正後、元の位置にアップロードし、ページを表示すれば、正常に機能するようになります。

ソースコード

4.html要素の修正

テーマ編集画面を開いて、html要素に以下の青色のxmlns属性を追加してください。

<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
関連情報:HTML5+RDFaについて
関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

WP-OGPプラグインを修正して最適化する方法 from CreaMo!
Facebookのウォールに反映されるWordPress用プラグイン「WP-OGP」を修正して最適化する方法を載せていきます。バグ修正、サムネイル設定、マ... [続きを読む]

Tracked on June 4, 2011 3:36 PM

#WordPressニ#FacebookノOpen Graph Protocol (#OGP)ヲ設定シテミタ from MANJITOU.COM
The Open Graph Protocol 以前FacebookのコメントシステムをWordpressに組み込む様な事をしましたが、その際、Wordp... [続きを読む]

Tracked on June 24, 2011 12:34 AM

OGPに対応させてみた。その1WordPress編 from t'slab blog
この間、「zenback入れた」って記事を書きましたが、 それで、満足していちゃいけなかったようです... [続きを読む]

Tracked on June 26, 2011 5:59 PM
コメント

こんにちは、わかりやすい投稿をありがとうございます。おかげでなんとか設置できそうですが、HTML要素の追加は、header.php内の既存のhtml要素の下に追記するので良いのでしょうか?それともhtml要素を書き換える必要があるのでしょうか?
面倒なお願いで、申し訳ありません、ご教授いただけますとうれしいです、よろしくお願いいたします。

[1] Posted by Vacationclub.jp : June 19, 2011 4:09 PM

>Vacationclub.jpさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、header.php内の既存のhtml要素を書き換えてください。理由は、html要素はページに1度しか出現してはいけない要素であるためです。
それではよろしくお願い致します。

[2] Posted by yujiro logo : June 29, 2011 10:41 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)