facebook いいねボタンの仕様変更?OGPの設定についてまとめました（ localeプロパティについて）

『いいね!』ボタンのOPGについて

FacebookのいいねボタンのOGP設定に若干の変更がでておりましたので補足記事を含め作成しました。今回の記事だけでいいねボタンの作成からOGPの設定までを再構築しました。facebookは仕様がよく変わるので一部のキャプチャーが違うかもしれませんが大体同じ感じになっています。

現状(2011.12.16)でURLリンターを使ってみると下記のような『Warning』の警告が出てしまうようです。

『The og:locale property should be explicitly provided, even if a value can be inferred from other tags.』

警告のコメントを翻訳にかけてみた結果、どうやらlocaleの設定がないよと注意しているようです。そこで、下記のソースを付け足したら警告が消えました。

<meta property="og:locale" content="ja_JP" />

以上のことを含めまして、以前の記事も修正していますが、今回の記事でも『いいね！』ボタンの設置から『OGP』の設定までを下記に再構築しましたので良かったら見ください。

『いいね』ボタンと『OGP』について

『いいね』ボタンを設置する場合、『OGP(Open Graph Protocol)』の設定が重要になってきます。なぜなら『OGP』を設定しないで『いいね』ボタンをクリックすると、友人のニュースフィールドにその情報が表示されないからです。これではせっかく『いいね』ボタンをクリックされても他の人が見ることがないので広がりも少なくなってしまいます。
そこで友人のニュースフィールドにも『いいね』情報を表示させるために『いいね！』ボタンの設置と『OGP』の設定方法をご紹介いたします。

『いいね』ボタンの設置

Step1

アプリIDを取得するためにCreate an Appページに移動します。
http://developers.facebook.com/setup/

『いいね』ボタンを設置したいサイト情報を登録します。

Step2

『Create app』ボタンをクリック後にセキュリティチェックが表示されます。セキュリティチェックの文字を入力して『送信』ボタンをクリックしてください。その後、下の画像のようなアプリIDが記されたページが表示されるのでこのIDをメモしておきます。

『いいね』ボタンの設置

Step1

『いいね』ボタン設置用のソースコードを取得するためにLike Buttonページへ移動します。
http://developers.facebook.com/docs/reference/plugins/like/

Like Buttonページでは下の画像のような入力欄が表示されているので、画像の解説を参考に各入力欄の項目を埋めます。

※1：ボタンを設置するURL
ボタンを設置するURLは記事ごとに変わるので、WordpressやMTでは記事ごとのリンクを取得するタグに最終的には変更します。今はトップページなどの仮のURLを入れます。

※2：Sendボタン設置の有無
Sendボタンは『いいね』ボタンのように友人全員に情報を送るのとは異なり、友人を限定してコンテンツ情報を送ることができるボタンです。

※3：ボタンデザインを選択
『いいね』ボタンのデザインは『standard ・ button_count ・ box_count 』の3タイプから選択します。

※4：『いいね』ボタンをクリックした友人の写真表示の有無
友人の写真が表示されるのは、デザインが『standard』の場合のみになります。

Step2

『Get code』ボタンをクリックすると、画面中央に『いいね』ボタン設置用のソースコードが表示されます。ソースコードはiframe版とXFBML版の2種類が表示されます。大きな違いはXFBML版はJavaScriptの動く環境でないと機能しないけれど、iframe版と比べて多くのオプションがあり高機能ということのようです。※HTML5版が新たに追加されて3種類になりました(2011年12月現在)今回は、純粋に『いいね』ボタンを設置することが目的なのでiframe版で試したいと思います。今後、機会がありましたらXFBML版やHTML5版も試してみたいと思います。

上の画像のようにソースコードが表示されたら、iframeの方をコピーして『いいね』ボタンを表示させたい場所にペーストしてください。

Step3

ソースコードをペーストしたら、記事ごとにリンクを取得できるWordpress・MT用のタグにhref属性を変更します。

上記はiframe用のソースを1部抜粋していますが、赤文字のボタン設置先のURLを変更します。

【Wordpressの場合】

<?php the_permalink(); ?>

【MTの場合】

<$mt:EntryPermalink$>

以上で、『いいね』ボタンの設置は完了です。続いて『OGP』の設定になります。

OGPの設定

『いいね』ボタンの設置が完了しましたら、ソースコードを発行した公式サイトに戻り、そのまま下にスクロールすると『Get Open Graph Tags』と書かれた項目が画面上に表示されます。

Step01

Type・Site name・Adminの設定だけを行い、その他の設定は後で行います。また、下の画像に各項目の概要を示しましたので参考にしてみてください。

最後に『Get Tags』ボタンを押してください。

Step02

『Get Tags』ボタンを押すと、画面中央にソースコードが表示されます。これをコピーしてheadタグ内にペーストしてください。

ペーストしたら、各タグの内容を整えます。

※1：ページや記事のタイトル
記事のタイトルを表示するWordpress・MT用のタグを入れます。
<meta property=”og:title” content=”タイトル表示するタグを記述” />

【Wordpressの場合】

<?php the_title(); ?>

【MTの場合】

<$mt:EntryTitle$>

※2：ページタイプを選択
今回ページタイプをblogに選択しましたが、その他にも複数のページタイプがあります。制作するサイトに合わせて選んでください。

※3：ページや記事のURL
ページや記事へのリンクを取得するWordpress・MT用のタグを入れます。
<meta property=”og:url” content=”記事へのリンクを取得するタグを記述” />

【Wordpressの場合】

<?php the_permalink(); ?>

【MTの場合】

<$mt:EntryPermalink$>

※4：ページ画像
『いいね』ボタンが押された場合にニュースフィールドに表示されるサムネイルを指定します。

※5：アプリID
一番最初に取得しておいたアプリIDを記入します。
※ページを管理するFacebookユーザIDでも大丈夫です
（”fb:admins” content=”ID” ）

Step03

『OGP』のタグには、descriptionもあるのですが公式サイトでは生成してくれないので自分で付け足します。
<meta property=”og:description” content=”記事概要を表示するタグを記述“/>
※記事の抜粋を使用した場合です。これ以外でも記事ごとの概要を表示できるタグなら問題ありません。

【Wordpressの場合】

<?php the_excerpt() ; ?>

【MTの場合】

<$MTEntryExcerpt$>

※追加： localeプロパティ
新たにOGPを設定する際に『locale』プロパティを設定しないと警告が表示されてしまうようです。下記のソースも追記してください。(2011年12月現在)

<meta property="og:locale" content="ja_JP" />

Step04

最後にhtml要素に下記2つのxmlns属性を追加します。

xmlns:og=”http://ogp.me/ns#”
xmlns:fb=”http://www.facebook.com/2008/fbml”

以上で『OGP』の設定は完了になります。いままでの設定をWordpressとMTでそれぞれ下記にまとめました。よろしければ参考にしてみてください。

【Wordpressの場合】

<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
・
・
<title>記事タイトル</title>
・
・
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:description" content="<?php the_excerpt(); ?>※カスタムフィールドなどでも大丈夫です。"/>
<meta property="og:type" content="blog" />
<meta property="og:url" content="<?php the_permalink() ?>" />
<meta property="og:image" content="イメージ画像へのパス" />
<meta property="og:site_name" content="サイトのタイトル" />
<meta property="fb:app_id" content="アプリID" />
<meta property="og:locale" content="ja_JP" />

【MTの場合】

<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
・
・
<title>記事タイトル</title>
・
・
<meta property="og:title" content="<$mt:EntryTitle$>" />
<meta property="og:description" content="<$MTEntryExcerpt$>※記事ごとの概要を表示するタグを使ってください。"/>
<meta property="og:type" content="blog" />
<meta property="og:url" content="<$mt:EntryPermalink$>" />
<meta property="og:image" content="イメージ画像へのパス" />
<meta property="og:site_name" content="サイトのタイトル" />
<meta property="fb:app_id" content="アプリID" />
<meta property="og:locale" content="ja_JP" />

以上になりますが、Facebookの仕様は本当によく変わるので、もし気づいたことなどありましたら教えてください。

facebook いいねボタンの仕様変更?OGPの設定についてまとめました（ localeプロパティについて）

『いいね!』ボタンのOPGについて

『いいね』ボタンと『OGP』について

『いいね』ボタンの設置

Step1

Step2

『いいね』ボタンの設置

Step1

Step2

Step3

OGPの設定

Step01

Step02

Step03

Step04

この記事を書いた人

最近書いた記事

この記事に関連する記事

サイト内検索

最新のエントリー

まずはここから始めよう！作業効率を早めるPhotoshopとIllustratorのショートカットまとめ（ファイル操作・コピペ・ズーム関連）

Instagram（インスタグラム）の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。

アプリ風インターフェイスのフォトギャラリーをCSS3で作成する【jQuery連載17】