WordPressとFacebook連携するには絶対必要-「OGPメタ情報」

WordPressとFacebookを連携させる際、タイトルや説明およびアイキャッチ等の情報を渡す必要があります。この役割を担うのがOGPメタ情報です。

Initializing...

Facebook連携ボタンの表示例

Facebook連携ボタンの表示例

FacebookはOGPメタ情報を通してブログ情報を取得します

Facebook関連のSNSボタンはソーシャルプラグインというページで作成します。このページではどのボタンを作るにも最低限ブログのURLアドレスを入力すると簡単にボタンが作成できます。それ以外の情報はどこから取ってくるのでしょう?
それは、ヘッダー部にかかれているOGPメタ情報から取ってきてます。

OGPメタタグはこれだけあります

メタ 説明 使用例
og:title
ブログのタイトル情報 <meta property=”og:titlecontent=”…” />
og:url
ブログのURL  <meta property=”og:urlcontent=”…” />
og:type
記事は”article”
トップは”blog”を指定
 <meta property=”og:typecontent=”…” />
og:site_name
ブログのサイト名  <meta property=”og:site_namecontent=”…” />
og:description
ブログの説明  <meta property=”og:descriptioncontent=”…” />
og:image
ブログ画像  <meta property=”og:imagecontent=”…” />

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 カウンター付きのボタン1
Button_count カウンター付きのボタン2
button 通常のボタン

ボタンサイズにはsmallとlargeがあります。

最後にボタンを押した場合に、友達の顔を表示するかどうかのオプションを選択します。オプションを選択した場合、いいね!ボタンの表示と一緒に友達の顔もも表示されます。

コードを取得して貼り付けるだけ

後は、上記図の⑧の”コードを取得”ボタンを押してブログに貼り付けます。取得するコードは以下のように構成になっていて、まずは画面最上位にあるように対象のFacebookページを選択します。複数ページを持っていなければ表示されたままで結構です。

次に画面①のコードはブログのヘッダ部に貼り付けます(1回のみ)。
②のコードは、ボタンを表示したい部分に貼り付けます。こちらはボタンを表示した部分に複数回貼り付けることが出来ます。
 
以上でいいね!ボタンは完成です!

Facebook-iine-page2

Facebookソーシャルプラグインページ

顔を表示したいいね!ボタン

顔を表示したいいね!ボタン

Facebookいいねソーシャルプラグインページ

Facebookいいねソーシャルプラグインページ

ソーシャルプラグイン - ドキュメンテーション - Facebook for Developers

コメント

タイトルとURLをコピーしました