WordPressをFacebookのOGPに対応させる

前回のソーシャルボタンを追加しようと思ったときに
当然その方法を探すために、ググっていろいろなサイトを見たわけですが、
その中に「いいね!ボタンを付けるなら、OGP対策をしないと意味ないよ」的な情報を見ました。

OGPって何?

The Open Graph protocol
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か – IT戦記

つまり、いいね!やシェアしたときに、いい感じにしてくれるらしい。(よく分かってない)

まずは、OGP対策前に試しにいいね!ボタンをクリックしてみました。
Facebookのウォールには以下のように表示されました。(1ヶ月くらい前の画像で申し訳ない)


アイキャッチ画像が何故か「はてブ」のアイコンになってるし、
記事の概要ではなく、サイトの説明(WordPressでいうところのキャッチフレーズ)だし、残念な結果に。

例のごとく、手っ取り早くプラグインでと思い、参考にしたサイトはここ。

WordPressをFacebookのOGPに対応させるなら「WP-OGP」より「Open Graph Pro」がオススメ – オレンヂ

ただ、この記事は2011年6月に書かれたもののようで、Facebookの仕様変更により現在では一部名称や画面が変わった部分がありますので、その辺も含めて以下に手順を書いてみました。

1.プラグイン「Open Graph Pro」をインストール

WordPressのダッシュボードから、「OGP」でプラグインを検索します。


「いますぐインストール」をクリック。インストール後、プラグインを有効化しておきます。

2.Facebookアプリケーションを作成します。

Facebook開発者のアプリのページへ行きます。


「新しいアプリケーションを作成」をクリックします。


App Nameに何でもいいので適当な名前を入れます。
他はいじらず(Web Hostingはチェック無し)、「続行」をクリックします。


セキュリティチェック画面で、画像の文字を入力して「送信」をクリックします。


作成したアプリの基本設定が表示されます。
1)一番上アイコン画像の横にある、App ID をメモしておきます。
2)アプリのドメイン欄にブログのドメインを記入します。(もしかしたら空欄でもOKかもしれません)
3)結合する方法でウェブサイトをクリックして、サイトURL欄にブログのURLを記入します。
「変更を保存」をクリックします。

ちなみにこのページは、アプリのページの「アプリを編集」からいつでもアクセスできます。

3.FacebookユーザーIDを確認します。

Facebookの自分のタイムライン(ウォール)を表示したときに、ブラウザのURL表示を見ます。


id=の後ろの数字がユーザーIDですのでメモしておきます。(上の画像は私のIDです)

4.WordPressプラグインの設定をします。

WordPressダッシュボードから「設定」→「Open Graph Pro」をクリックします。


先程の手順2と3でメモしておいた、FacebookユーザーIDとApp IDを、
それぞれ、FacebookのAdmin User(s)欄とApplication ID欄に入力します。
最後に「変更を保存」をクリックします。

基本的な作業はこれで完了なんですが、きちんと出来てるかチェックしましょう。

5.Facebookのデバッガーで出力されるOGP情報を確認する。

確認したいブログ記事のURLをコピーしておき、Facebookのデバッガーのページに行きます。


入力欄に、ブログ記事のURLをペーストし、「デバッグ」をクリックします。

上の画像のように、特にエラー表示がなければOKです。
Object Propertiesで、出力されるOGP情報が確認できます。

では実際どうなるか確認してみましょう。
いいね!をクリックすると、Facebookのウォールには以下のように表示されました。


成功です。アイキャッチ画像も記事概要もきちんと表示されました。

さて、このプラグインの導入と上記の設定は、実は1ヶ月ほど前に行ったものです。
その後、仕事が忙しくなり、Facebookは放置状態にしてしまったのですが、
最近再開したら、なんとトラブル発生!
その対策方法は?

つづく!!

保存保存