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

2011.06.23

facebook

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

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

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

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

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

 

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

 

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

Facebookの「アプリケーションを作成」[Link]するページへ。
Open Graph Pro
適当な名前を入力後、利用規約に同意してアプリケーションを作成します。

 

3 FacebookアプリIDを確認する
 
Open Graph Pro
「マイアプリ」[Link]ページを開き、アプリID(赤線部分)を確認してメモしておきます。

 

4 FacebookユーザーIDを確認する
 
Open Graph Pro
ユーザーiDがわからない人はWhat is My ID[Link]をチェックしてメモしておきます。

 

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

 

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

 

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

関連してるかもしれない記事

Pocket