| layout | title | published | image | description | tags |
|---|---|---|---|---|---|
post |
開発者がfacebook「いいね！」ボタン設置時に注意すべきこと |
true |
/images/posts/facebook.png |
Facebookのいいね！ボタン設置をする際に、いくつか注意すべき点がありますのでまとめます。 |
facebook |
Facebookのいいね！ボタン設置をする際に、いくつか注意すべき点がありますのでまとめます。
設置方法に関してはいろんなページで紹介されているので、その手順に従えばOKです。
注意すべきはhtml5の設置コードだとIEの古いブラウザで動かない場合があるので、Iframeを使うところでしょうか。（ただし機能に制限あり）
もうほとんどのサイトで見かけませんが一部の古いサイトでは、Likeボタンではなく、Shareボタンというのを見かけました。ですが本ボタンはもう**廃止予定なので使わないでください。**公式ページでも「We deprecated the Share Button when we launched the Like button」（いいねボタンを作ったときにシェアボタンは廃止したよ！）と説明されています。
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”と判定されうるような行動は避けたほうがよさそうです。