「Open Graph Pro」とFacebookコメントの設定方法まとめ

 「Open Graph Pro」とFacebookコメントの設定方法について、できる限りわかりやすく、まとめてみます。

1.「Open Graph Pro」とは

 「Open Graph Pro」とは、OGP(Open Graph Protocol)をWordPressに設定するプラグインです。OGPとは、FacebookなどのSNSとWebページを連携させるための仕組みです。

 OGPを設定すると、Facebookで「いいね!」や「シェア」がされた時に、「いいね!」や「シェア」した人の友達のニュースフィードにも、Webページのタイトルやサムネイル画像、URLが、正確に表示されるようになります。

2.OGPの設定を宣言する

 HTMLの一番上のDOCTYPEタグとHEAD開始タグの間に、次のコードを追加します。これが、OGPを設定する宣言になります。

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

【2014年4月17日追記】
この部分は後日、Markup Validation Serviceのエラーをなくすため、次のように変更しました。

<html lang="ja" prefix="og: http://ogp.me/ns# fb: http://www.facebook.com/2008/fbml">

 理由は理解していません。次のサイトを参考にしました。

WordPressのオリジナルテーマをHTML5に移行する際につまずいたことをメモ

OGPの記述後もValidなHTML5文書にするマークアップ方法のメモ|Blog|Skyward Design

3.アプリの基本設定

 Facebookアプリの設定を行います。次のURLにアクセスしてください。

http://developers.facebook.com/setup

 「Create New App」という画面が開きます。「App Name」に任意の名前を入力してください。ブログ名がいいと思います。その他の項目は、そのまま空欄にしておきます。「続行」をクリックすると、セキュリティチェック画面になります。表示された文字を入力して、「送信」をクリックしてください。

 アプリの「基本設定」画面が表示されます。「App ID」は、あとで使いますのでメモしてください。

 設定する項目は次のとおりです。それ以外の設定は削除してください。ここで余計な設定を残しておくとエラーメッセージが表示される原因になります。

(1)Display Name

 最初に入力した「App Name」が表示されています。

(2)Namespase

 空欄のままで結構です。

(3)連絡先メールアドレス

 連絡先のメールアドレスを指定してください。

(4)App Domains

 ブログのドメイン(URLから「http://」を抜いたもの)を入力してください。それ以外のドメインが表示されていたら、削除してください。

(5)カテゴリ

 そのまま「その他」で結構です。

(6)Hosting URL

 何か選択されていたら削除してください。

(7)Sandbox Mode

 「オフ」のままで結構です。

(8)Website with Facebook Login

 ブログのURLを記入してください。

(9)その他のアプリ

 選択されていた場合は削除してください。

(10)変更を保存

 「変更を保存」をクリックして、設定を保存してください。

4.「Open Graph Pro」の設定

 プラグイン「Open Graph Pro」をインストールして、有効化します。[設定]→[Open Graph Pro]を開き、基本的な情報を設定します。

(1)「Object Type」の指定

 「Object Type」の選択ができます。私は「Website」を指定しています。経験的に、「Website」のほうが、エラーになることが少ないと感じています。

(2)サムネイル画像の指定

 サムネイル画像は、指定しなくても、アイキャッチ画像をサムネイル画像とします。アイキャッチ画像がない場合は、記事の本文に含まれる画像を、それもない場合はカスタムヘッダーのヘッダー画像をサムネイル画像とします。
 ただし、指定をしないとあとで説明するオブジェクトデバッガで、エラーが表示されます。そのため、私は、適当な画像をテーマを格納しているフォルダに転送し、そこのURLを指定しています。

 なお、サムネイル画像は、縦横200ピクセル以上の大きさでないと、エラーメッセージが表示されます。

(3)ユーザIDの指定

 [Admin User(s)]にFacebookのユーザーIDを指定します。

 FacebookのユーザーIDは、FacebookのプロフィールページのURLに含まれている「?id=~」の値です。

 http://www.facebook.com/profile.php?id=XXXXXXXXXXXXXXX

 ユーザーネームを指定している場合は、「http://graph.facebook.com/ユーザーネーム」というURLにアクセスします。すると、次のようにユーザーの情報が表示されます。”id”の値がユーザーIDです。

{
   "id": "XXXXXXXXXXXXXXX",
   "name": "xxxxxxxxxxxx xxxxxxxxxxxx",
   "first_name": "xxxxxxxxxxxx",
   "last_name": "xxxxxxxxxxxx",
   "link": "http://www.facebook.com/xxxxxxxxxxxx",
   "username": "xxxxxxxxxxxx",
   "gender": "male",
   "locale": "ja_JP"
}

(4)[Application ID]の指定

 [Application ID]に「3.アプリの基本設定」でメモした「App ID」を指定します。

(5)変更を保存

 [Advanced Settings]のところは、そのままにして、「変更を保存」をクリックして設定を保存します。

5.Facebookコメントの設定

 Facebookコメントの設定ページにアクセスします。

https://developers.facebook.com/docs/reference/plugins/comments/

(1)[URL to comment on]

 [URL to comment on]は、「http://example.com」のままにしておきます。

(2)[Numbers of posts]

 デフォルトで表示されるコメントの数を設定します。

(3)[Width]

 コメント欄の横幅を設定します。自分のサイトに合う幅を設定できます。

(4)[Color scheme]

 コメント欄の色を設定します。

※[Numbers of posts][Width][Color scheme]を変更すると、変更に応じたプレビューが表示されます。

(5)[Get Code]

 [Get Code]をクリックすると、HTMLのタグが2つ生成されます。

 1のタグは、BODY開始タグのすぐ下に挿入します。

 2のタグは「http://example.com」を、ブログ記事のパーマリンクを出力する次のコードに変更して、Facebookコメントを表示したいところに挿入してください。

<?php the_permalink(); ?>

6.管理用METAタグの挿入

 次の管理用METAタグをHEAD開始タグのすぐ下に挿入します。

<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}" />
<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}" />

 「/>」の前には半角のスペースがあります。

 {YOUR_FACEBOOK_USER_ID}は、「4.(3)ユーザIDの指定」で調べたFacebookのユーザーIDに置き換えます。

 {YOUR_APPLICATION_ID}は、「3.アプリの基本設定」でメモした「App ID」に置き換えます。

 管理用METAタグにについては、Comments – Facebook開発者に英語で説明がありますが、ここに記載されているタグは、「/>」の前に半角のスペースがなく、このまま使うとエラーメッセージが表示されます。

7.テスト

(1)デバッガー

 次のサイトにアクセスして、自分のサイトのURLを入力し、「デバッグ」ボタンをクリックしてください。

デバッガー – Facebook開発者

 エラーがあると、英語ですが、修正箇所が表示されます。エラー内容をググると、たいていの場合、解決方法を掲載しているブログ記事が見つかります。これまで、「エラーメッセージが表示されます」と書いていたのは、このデバッガーでエラーメッセージが表示されるという意味です。

(2)ニュースフィードでの表示を確認する

 自分のサイトで「いいね!」をクリックして、自分のFacebookのニュースフィードに掲載されることを確認できます。確認後削除することもできます。

  • このエントリーをはてなブックマークに追加

フォローはこちらからお願いします。

会社勤めから起業するためのウェブ集客セミナー
会社勤めから起業するための7つのステップ