Hack Your Design!

開発者がfacebook「いいね!」ボタン設置時に注意すべきこと

(image)開発者がfacebook「いいね!」ボタン設置時に注意すべきこと

Facebookのいいね!ボタン設置をする際に、いくつか注意すべき点がありますのでまとめます。

設置方法について

設置方法に関してはいろんなページで紹介されているので、その手順に従えばOKです。

「いいね!」ボタンを設置しよう

注意すべきはhtml5の設置コードだとIEの古いブラウザで動かない場合があるので、Iframeを使うところでしょうか。(ただし機能に制限あり)

Shareボタンとはなんだ?

もうほとんどのサイトで見かけませんが一部の古いサイトでは、Likeボタンではなく、Shareボタンというのを見かけました。ですが本ボタンはもう廃止予定なので使わないでください。公式ページでも「We deprecated the Share Button when we launched the Like button」(いいねボタンを作ったときにシェアボタンは廃止したよ!)と説明されています。

OGタグとはなんだ?

OGタグ、つまりオープングラフタグとはウェブページがオープングラフの情報を持つために付加されるメタデータです。オープングラフとは、例えば「太郎さんが◯◯というウェブページでいいねボタンを押した」といったときの、◯◯に入る規格化された情報を示します。オープングラフについては詳しくは公式の「The Open Graph protocol」を見てみてください。

OGタグとは具体的に下記のようにhtmlのheadタグ内のmetaタグとして表現されます。

<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>

いいねボタンのデバッグツールを使おう!

開発者おなじみだと思いますが。こちらを使ってOGタグのテストをしましょう。

Debugger

※私が設置したサイトはたまたま海外IP判定を行なっていたのでFacebook側がうまくOGタグを認識してくれませんでした。FacebookサーバからOGタグが読み込めるように海外facebook IPは許可しておきましょう。

ボタンのテストにはテストユーザを使おう!

テストの度に自分のプライベートアカウントを使うのはイヤですよね。そんなときは公式で提供されているテストユーザ作成サービスを使いましょう。詳しくは下記。

Facebookがテストユーザー作成・編集画面をリリース

ボタン押したときに「承認」が出てきた

いいねをテストしまっくてたら「承認」ボタンが表示されるようになりました。この例は下記でレポートされているようにけっこう根が深い問題です。

その「承認」ボタンは、最近の導入した「いいね」ボタンに対する”like-jacking attack” への対応の一環です。ボタンの使われ方などを基準に、ボタンの設置ページで”like-jacking”が発生してることが推測された場合に、「承認」のステップが入ることになります。

facebookの「いいね」ボタンに「承認」が必要となるケースについて

facebook側は”like-jacking attack”が発生している可能性があるサイトをプログラムで自動検出して、「承認」ボタンを表示させているようです。

そしてこの「承認」ボタンはマニュアルでの解除依頼は受け付けていないようです。つまり「うちのサイトはスパムじゃないから承認ボタンは消してくれ!」とfacebookに依頼しても取り合ってはくれない、ということです。

上記でテストユーザを使えばいくらテストしても大丈夫なんでしょうか。それともいいねを取り消せばOKなのでしょうか。いずれにしても”like-jacking attack”と判定されうるような行動は避けたほうがよさそうです。

  • このエントリーをはてなブックマークに追加
comments powered by Disqus