WEBをもっとおもしろくする会社 株式会社コンテンツ庵

教授の授業
Webサイトの利用規約
ケータイ販促
こんてんつ塾
コンテンツ庵ホームページ
仕事内容
会社概要

Facebookの「いいね!」ボタン設置方法

「いいね!」ボタン設置方法と動作確認方法の紹介です。 「いいね!」ボタンを設置したら、意図したとおりにウォールに反映されているかなども含め、実際に操作して動作確認を行ってください。テストURLやアクセス制限されている環境では、テストになりません。

  • このページの設置方法は、大量ページに一度に導入する方法としては向きません。
  • このページの内容は、iframe版の説明です。HTML5版とXFBML版では異なる場合があります。
  • このページは、2012年3月16日時点での情報を元に作成されています。仕様変更等が発生している可能性がありますので、その都度、公式サイト等で最新情報をご確認ください。

↓「いいね!」ボタン | ↓オープングラフタグ | ↓動作確認

公式リンク

「いいね!」ボタン作成とオープングラフタグの作成
https://developers.facebook.com/docs/reference/plugins/like/
「いいね!」ボタンデバッガー
http://developers.facebook.com/tools/debug
The Open Graph protocol
http://ogp.me/

「いいね!」ボタンの作り方

https://developers.facebook.com/docs/reference/plugins/like/Step 1 - Get Like Button Codeで、必要箇所の入力をして、 「Get Code」ボタンを押すと、「いいね!」ボタンを表示するためのコードを取得できます。 下のボタンは、上記の設定から生成された実物の「いいね!」ボタン(IFRAME版)です。
「URL Like to」は、入力しなくても、エラーが出ずに「いいね!」ボタンが生成されるのですが、これを設定しないと正常に動かないようです。

「いいね!」ボタンを表示するためのコードは、WEBページの<body></body>内の好きな位置に記述できます。他のボタン(ツイートボタンなど)ときれいに並べて配置するためには、少しレイアウト調整が必要です。

オープングラフタグ(OGPタグ)の書き方

「いいね!」ボタンを配置しただけでは、FaceBookと連携できたとは言えません。「いいね!」ボタンを有効にするために、オープングラフタグをページに導入します。
https://developers.facebook.com/docs/reference/plugins/like/Step 2 - Get Open Graph Tagsに、必要箇所を入力して、「Get Tags」ボタンを押します。

上の図の一番下にある「Admin」という入力欄は、Facebookユーザーがログインした状態だと、自動的にアカウントを表す数字が入るようです。ここがブランクのまま「Get Tags」ボタンを押した場合、エラー表示はされるものの、他の入力した情報のコードは生成されます。Adminをきちんと設定しておくと、管理者として「インサイト」という解析画面が見れるようになるので効果測定などに便利です。Adminの設定をしない場合でも、その他のタグ設定が正常なら、効果の一部を得ることはできますが、後述のような不具合が起きます。「いいね!」ボタンを適切かつ有効に活用するためには、設定必須として最初から入れておくのがお勧めです。Admin欄に入れた設定は、Facebookのmetaタグとしては、「fb:admins」として生成されますが、「fb:app_id」(アプリ登録が必要)を変わりに設定することもできます。

「いいね!」ボタンのインサイト(解析画面)

下のタグは、上記の設定から生成されたオープングラフタグです。WEBページの<head></head>内に記述します。オープングラフタグを何も設定しない場合でも、「いいね!」ボタン自体は設置できますが、不足しているオープングラフタグがあると、「いいね!」してくれた人やそのともだちのウォールに表示されなかったり、設置ページでのカウントが正常に動かなかったりします。titleやdescriptionのオープングラフタグが存在しない場合には、<html>の<meta>タグ内のtitleやdescriptionから情報が持って行かれるようです(要確認)。

<meta property="og:title" content="Facebookの「いいね!」ボタン設置方法" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.contents-an.co.jp/sns/facebook.html" />
<meta property="og:image" content="http://www.contents-an.co.jp/images/logo.gif" />
<meta property="og:site_name" content="株式会社コンテンツ庵" />
<meta property="fb:admins" content="10000********" />

xmlns属性の追加

オープングラフタグを使用するページでは、Open Graph Protocol を使用するために、次の「xmlns属性」を追加します(追加するとW3CやDreamWeaverのバリデータなどでは、文法上エラーになってしまいますが…)。

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

このページは、HTML 4.01で作られているため、次のように適用されています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">

動作確認:「いいね!」ボタンがうまく動かないときは…

上記のような生成ツールを使って、無事に「いいね!」ボタンが生成された場合でも、設置してボタンを押してみると、思ったように動かないことがあります。たとえば、ボタンを押してもすぐ戻ってしまったり、 というエラーが起きることがあります。赤字のエラーという文字をクリックすると、次のようなメッセージが表示されることがあります。(Step 1 - Get Like Button CodeのLayout Styleで「standard」を選んでいないと、エラーが起きていても気付かない場合があります。)

There was an error liking the page. If you are the page owner, please try running your page through the linter on the Facebook devsite (https://developers.facebook.com/tools/lint/) and fixing any errors.

案内に従って、 https://developers.facebook.com/tools/lint/にアクセスすると、「いいね!」ボタンデバッガーのhttp://developers.facebook.com/tools/debugに飛ばされます(「URLリンター」→「オブジェクトデバッガー」)。 Input URL or Access Tokenと書いてあるので、問題の起きているページのURLを入力して、「デバッグ」ボタンを押します。下の画面は、このページのURL(http://www.contents-an.co.jp/sns/facebook.html)を入れた時のキャプチャです。

「解決する必要があるオープングラフの警告」として、

Inferred Property:The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.

と書かれています。<html>の<meta>タグ内にも<meta name="description">が存在するので、ogタグとしては存在しなくても、致命的な状態にはなりませんが、できれば明確に記述することが望ましいようです。エラー解決につながるかもしれないので、オープングラフタグとしてもdescriptionを記述してみます(下の例では一番最後の行)。警告は出るものの、なぜかオープングラフタグの生成ツールには、descriptionを設定する欄がないので、ルールに沿って自分で記述する必要があります。

<meta property="og:title" content="Facebookの「いいね!」ボタン設置方法" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.contents-an.co.jp/sns/facebook.html" />
<meta property="og:image" content="http://www.contents-an.co.jp/images/logo.gif" />
<meta property="og:site_name" content="株式会社コンテンツ庵" />
<meta property="fb:admins" content="10000********" />
<meta property="og:description" content="Facebookの「いいね!」ボタン設置方法と動作確認の方法を紹介しています。" />

もう一度デバッグして、警告が消えたことを確認します。

しかし、コードの記述等に問題がないはずなのに、正常に動作しない場合があります。og:descriptionが不在なことや、他にも推奨されるタグが入っていないこと自体は、エラーの原因ではなかったというケースです。下のキャプチャのように、「いいね!」ボタンをつくるときに、後で正式なURLを入れようとして、「URL to Like」をブランクにしていた場合は、「URL to Like」に正しいURLを入れて生成しなおすと、解決される場合があります。

また、アップしたばかりだと動かないこともあるようです。そのような場合は少し待ってみることも必要です。

「いいね!」ボタンデバッガーは、Facebookのキャッシュをクリアする働きもあるようです。公開後に、「いいね!」ボタンが押されたときに表示するサムネイル画像を変更したい場合などは、og:imageを変えてすぐには反映されないことがありますが、デバッグツールでURLを送ると、わりとすぐに反映されるようです。

動作確認:「いいね!」ボタンが押された場合の表示例

タイムラインやウォールに意図通り表示されるかを確認します。

SNS導入インデックス