WordPressとFacebookを連携させる際、タイトルや説明およびアイキャッチ等の情報を渡す必要があります。この役割を担うのがOGPメタ情報です。
Facebook連携ボタンの表示例
FacebookはOGPメタ情報を通してブログ情報を取得します
Facebook関連のSNSボタンはソーシャルプラグインというページで作成します。このページではどのボタンを作るにも最低限ブログのURLアドレスを入力すると簡単にボタンが作成できます。それ以外の情報はどこから取ってくるのでしょう？
それは、ヘッダー部にかかれているOGPメタ情報から取ってきてます。
| メタ | 説明 | 使用例 |
og:title | ブログのタイトル情報 | <meta property=”og:title” content=”…” /> |
og:url | ブログのURL | <meta property=”og:url” content=”…” /> |
og:type | 記事は”article” トップは”blog”を指定 | <meta property=”og:type” content=”…” /> |
og:site_name | ブログのサイト名 | <meta property=”og:site_name” content=”…” /> |
og:description | ブログの説明 | <meta property=”og:description” content=”…” /> |
og:image | ブログ画像 | <meta property=”og:image” content=”…” /> |
All in ONE SEOプラグインを使えばOGPメタ情報を自動で挿入
WordPressでブログを作成している場合、このOGP情報を自動で作成してくれるプラグインがあります。それがAll in one SEOというプラグインです。All in one SEOは、WordPressには必ず使われるという定番中の定番のプラグインです。
FacebookのOGPメタ情報の登録については、こちらの記事に詳しく書いてあります。そちらを参照してください。
Facebook連携、いいねボタンを実際に作成してみる
Facebookいいね！ボタン作成ページを開く
それでは、実際にいいねボタンを作ってみましょう。次のURLをクリックしてページを開きます。
https://developers.facebook.com/docs/plugins/like-button
必要な情報を入力する
いいね！ボタンページを開いたら、必要な情報として
- 「いいね！」するURL
- Width
- アクションタイプ
- レイアウト
- standard
- ｢ボタンサイズ友達の顔を表示する｣オプションの選択
実際の入力例
「いいね！」するURLは、いいね！ボタンを設置するURLを入力、Widthはいいね！ボタンの幅をpx値で入力、アクションタイプは、Like(いいね)／Recommend(おすすめ)を選択しボタンのキャプションに表示します。レイアウトは選択値ボックスから次の値から選べます。
| レイアウト選択値 | レイアウト内容 | 実際の作成イメージ |
| Standard | 通常のボタン | |
| Box_count | カウンター付きのボタン１ | |
| Button_count | カウンター付きのボタン２ | |
| button | 通常のボタン | |
ボタンサイズにはsmallとlargeがあります。
最後にボタンを押した場合に、友達の顔を表示するかどうかのオプションを選択します。オプションを選択した場合、いいね！ボタンの表示と一緒に友達の顔もも表示されます。
コードを取得して貼り付けるだけ
後は、上記図の⑧の”コードを取得”ボタンを押してブログに貼り付けます。取得するコードは以下のように構成になっていて、まずは画面最上位にあるように対象のFacebookページを選択します。複数ページを持っていなければ表示されたままで結構です。
Facebookソーシャルプラグインページ
顔を表示したいいね！ボタン
Facebookいいねソーシャルプラグインページ
