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

2011.06.23

Facebookをはじめ、さまざまなSNSサイトで使われるようになったOGP。

OGP（Open Graph Protocol）とは、簡単言うとそのページになにが書いてあるかという情報をプログラムから読める形でHTMLに追加する方法のことです。

このブログでもそのうちやろうと思いつつ先延ばしにしてきたのですが、いいね！ボタンのコードが新しくなっていたので、チェックも兼ねて自分で押してみたところ、サムネイルがなんだかへんなのを引っ張ってきて酷いことになっていました。

なぜかTumblrのボタンがサムネイルになっています。

これはちょっと直しておかねばと人気のWordPressプラグイン「WP-OGP」を入れてみましたが、いろいろと不具合があるらしく「appid」を「app_id」に直したり、サムネイルを記事内の最初の画像にするためにコードを差し替えたりとしなくてはいけないようでして。。。

そこで別のプラグイン「Open Graph Pro」を試してみたら、ほんとに入れるだけだったので、こっちを強くオススメしておきます。

1　プラグイン「Open Graph Pro」をダウンロードしてインストールする

プラグインのインストールで「OGP」を検索すると上の方に出てくるので、「いますぐインストール」します。インストールが終わったら有効化させておきましょう。

2　Facebookアプリケーションを作成する

Facebookの「アプリケーションを作成」［Link］するページへ。

適当な名前を入力後、利用規約に同意してアプリケーションを作成します。

3　FacebookアプリIDを確認する

「マイアプリ」［Link］ページを開き、アプリID（赤線部分）を確認してメモしておきます。

4　FacebookユーザーIDを確認する

ユーザーiDがわからない人はWhat is My ID［Link］をチェックしてメモしておきます。

5　Open Graph ProにFacebookの情報を入力する

WordPressの「設定」＞「Open Graph Pro」をクリックして「Open Graph Pro Settings」内の「Facebook」の項目に3と4でメモした数字を入力します。

６　Facebook URLリンターで出力されるOGP情報を確認する

確認したいアドレスをURLリンター［Link］へ入力してLintをクリック。「ご注意」と表示されなければOK。どんな情報が出力されるのかも確認できます。

7　完成！

ブログのいいね！ボタンを押すとこんな感じでFacebookのウオールにちゃんとサムネイルつきで反映されるようになりましたよ。満足満足。