スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

facebookの「いいねボタン」とOGP(Open Graph Protocol)タグについて、そこまで関心がありませんでした。しかし、ここ最近では無視できないような勢いでデフォルト化しているので、今更ですがここで改めて利用方法について確認しておこうと思いました。

いいねボタンについて、ボタンが押されたときに、情報が展開されるかどうかはOGPタグが正しく設定されている必要があります。

OGPタグが設定されていない場合、いいねボタンが押されても、何人がボタンを押したかのカウントが追加されるだけで、Facebookからの非リンクなどは期待できません。
一方でOGPタグを設定した場合、いいねボタンが押されたら、ボタンを押したユーザのタイムラインにそのページの情報が表示されます。つまり、その情報の元がOGPタグで設定した情報なんですね。

いいねボタンのコードを取得する

いいねボタンのコードはfacebook developersの以下のページで取得することができます。
Like Button – Facebook開発者

ページ内の「Step 1 – Get Like Button Code」でコードを取得します。

一般的には、「Send Button」のチェックを外し、Layout Styleは「button_count」の設定で設置されていることが多いようです。後は必要に応じてカスタマイズします。

最後に「Get Code」ボタンを押してコードを生成し、指示通りサイトに貼り付けます。

OGPタグのコードを取得する

同ページよりOGPタグを取得することができます。

ページ内の「Step 2 – Get Open Graph Tags」でコードを取得します。

いいねボタンを押した際に、押したユーザのfacebookのタイムラインに表示される情報を設定します。
一般的にはコーポレートサイトやキャンペーンサイトでは固定で設定しますが、ブログやECサイトなど動的なサイトではページ単位で設定します。このとき、サイトの種類については「Type」の項目で「blog」など適宜選択します。
また、上の画像では「Admin」の項目は「0」になっています。これはfacebookユーザコードのようですが、facebookにログインした状態でアクセスするとコードを取得できます。
最後に「Get Tags」ボタンを押してコードを生成し、指示通りサイトに貼り付けます。

OGPタグではその他細かい設定が可能です。詳細は以下のドキュメントで確認できます。
Open Graph Protocol – Facebook開発者

html5でのヘッダの属性について

OGPタグを正しく認識してもらうために、属性を設定します。通常のXHTMLでは以下のように設定します。

<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">

但し、html5だと少し設定方法が異なります。Html5の場合は以下のように設定すればよいそうです。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

OGPタグをデバッグする

Facebookでは開発者向けにOGPタグ設定が正しいかどうかの診断ツールを公開しています。
デバッガー – Facebook開発者

こちらのフォームに確認したいページのURLを入力し、「デバッグ」ボタンを押すと、OGPタグが正しく設置されているかどうか、また、「こうしたほうがよい」といったアドバイスを示してくれます。

具体的にはこのページ(サイト)に設置済みなので、ソースをみてもらえれたばと思います。
さて、効果のほどは。。。

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search