「Open Graph Pro」とFacebookコメントの設定方法について、できる限りわかりやすく、まとめてみます。
１．「Open Graph Pro」とは
「Open Graph Pro」とは、OGP（Open Graph Protocol）をWordPressに設定するプラグインです。OGPとは、FacebookなどのSNSとWebページを連携させるための仕組みです。
OGPを設定すると、Facebookで「いいね！」や「シェア」がされた時に、「いいね！」や「シェア」した人の友達のニュースフィードにも、Webページのタイトルやサムネイル画像、URLが、正確に表示されるようになります。
２．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
３．アプリの基本設定
Facebookアプリの設定を行います。次のURLにアクセスしてください。
http://developers.facebook.com/setup
「Create New App」という画面が開きます。「App Name」に任意の名前を入力してください。ブログ名がいいと思います。その他の項目は、そのまま空欄にしておきます。「続行」をクリックすると、セキュリティチェック画面になります。表示された文字を入力して、「送信」をクリックしてください。
アプリの「基本設定」画面が表示されます。「App ID」は、あとで使いますのでメモしてください。
設定する項目は次のとおりです。それ以外の設定は削除してください。ここで余計な設定を残しておくとエラーメッセージが表示される原因になります。
（１）Display Name
最初に入力した「App Name」が表示されています。
（２）Namespase
空欄のままで結構です。
（３）連絡先メールアドレス
連絡先のメールアドレスを指定してください。
（４）App Domains
ブログのドメイン（URLから「http://」を抜いたもの）を入力してください。それ以外のドメインが表示されていたら、削除してください。
（５）カテゴリ
そのまま「その他」で結構です。
（６）Hosting URL
何か選択されていたら削除してください。
（７）Sandbox Mode
「オフ」のままで結構です。
（８）Website with Facebook Login
ブログのURLを記入してください。
（９）その他のアプリ
選択されていた場合は削除してください。
（１０）変更を保存
「変更を保存」をクリックして、設定を保存してください。
４．「Open Graph Pro」の設定
プラグイン「Open Graph Pro」をインストールして、有効化します。［設定］→［Open Graph Pro］を開き、基本的な情報を設定します。
（１）「Object Type」の指定
「Object Type」の選択ができます。私は「Website」を指定しています。経験的に、「Website」のほうが、エラーになることが少ないと感じています。
（２）サムネイル画像の指定
サムネイル画像は、指定しなくても、アイキャッチ画像をサムネイル画像とします。アイキャッチ画像がない場合は、記事の本文に含まれる画像を、それもない場合はカスタムヘッダーのヘッダー画像をサムネイル画像とします。
ただし、指定をしないとあとで説明するオブジェクトデバッガで、エラーが表示されます。そのため、私は、適当な画像をテーマを格納しているフォルダに転送し、そこのURLを指定しています。
なお、サムネイル画像は、縦横200ピクセル以上の大きさでないと、エラーメッセージが表示されます。
（３）ユーザＩＤの指定
［Admin User(s)］にFacebookのユーザーＩＤを指定します。
FacebookのユーザーＩＤは、FacebookのプロフィールページのURLに含まれている「?id=～」の値です。
http://www.facebook.com/profile.php?id=XXXXXXXXXXXXXXX
ユーザーネームを指定している場合は、「http://graph.facebook.com/ユーザーネーム」というURLにアクセスします。すると、次のようにユーザーの情報が表示されます。”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"
}
（４）［Application ID］の指定
［Application ID］に「３．アプリの基本設定」でメモした「App ID」を指定します。
（５）変更を保存
［Advanced Settings］のところは、そのままにして、「変更を保存」をクリックして設定を保存します。
５．Facebookコメントの設定
Facebookコメントの設定ページにアクセスします。
https://developers.facebook.com/docs/reference/plugins/comments/
（１）［URL to comment on］
［URL to comment on］は、「http://example.com」のままにしておきます。
（２）［Numbers of posts］
デフォルトで表示されるコメントの数を設定します。
（３）［Width］
コメント欄の横幅を設定します。自分のサイトに合う幅を設定できます。
（４）［Color scheme］
コメント欄の色を設定します。
※［Numbers of posts］［Width］［Color scheme］を変更すると、変更に応じたプレビューが表示されます。
（５）［Get Code］
［Get Code］をクリックすると、HTMLのタグが２つ生成されます。
１のタグは、BODY開始タグのすぐ下に挿入します。
２のタグは「http://example.com」を、ブログ記事のパーマリンクを出力する次のコードに変更して、Facebookコメントを表示したいところに挿入してください。
<?php the_permalink(); ?>
６．管理用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}は、「４．（３）ユーザＩＤの指定」で調べたFacebookのユーザーＩＤに置き換えます。
{YOUR_APPLICATION_ID}は、「３．アプリの基本設定」でメモした「App ID」に置き換えます。
管理用METAタグにについては、Comments – Facebook開発者に英語で説明がありますが、ここに記載されているタグは、「/>」の前に半角のスペースがなく、このまま使うとエラーメッセージが表示されます。
７．テスト
（１）デバッガー
次のサイトにアクセスして、自分のサイトのURLを入力し、「デバッグ」ボタンをクリックしてください。
エラーがあると、英語ですが、修正箇所が表示されます。エラー内容をググると、たいていの場合、解決方法を掲載しているブログ記事が見つかります。これまで、「エラーメッセージが表示されます」と書いていたのは、このデバッガーでエラーメッセージが表示されるという意味です。
（２）ニュースフィードでの表示を確認する
自分のサイトで「いいね！」をクリックして、自分のFacebookのニュースフィードに掲載されることを確認できます。確認後削除することもできます。
