- 公開日
開発者が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タグのテストをしましょう。
※私が設置したサイトはたまたま海外IP判定を行なっていたのでFacebook側がうまくOGタグを認識してくれませんでした。FacebookサーバからOGタグが読み込めるように海外facebook IPは許可しておきましょう。
ボタンのテストにはテストユーザを使おう！
テストの度に自分のプライベートアカウントを使うのはイヤですよね。そんなときは公式で提供されているテストユーザ作成サービスを使いましょう。詳しくは下記。
ボタン押したときに「承認」が出てきた
いいねをテストしまっくてたら「承認」ボタンが表示されるようになりました。この例は下記でレポートされているようにけっこう根が深い問題です。
その「承認」ボタンは、最近の導入した「いいね」ボタンに対する”like-jacking attack” への対応の一環です。ボタンの使われ方などを基準に、ボタンの設置ページで”like-jacking”が発生してることが推測された場合に、「承認」のステップが入ることになります。
facebook側は”like-jacking attack”が発生している可能性があるサイトをプログラムで自動検出して、「承認」ボタンを表示させているようです。
そしてこの「承認」ボタンはマニュアルでの解除依頼は受け付けていないようです。つまり「うちのサイトはスパムじゃないから承認ボタンは消してくれ！」とfacebookに依頼しても取り合ってはくれない、ということです。
上記でテストユーザを使えばいくらテストしても大丈夫なんでしょうか。それともいいねを取り消せばOKなのでしょうか。いずれにしても”like-jacking attack”と判定されうるような行動は避けたほうがよさそうです。