いいね! ボタンHTML5

Fbのいいね! ボタンは、押されたあとに、指定された固定URLのOGPを参照するんだけど、そのために通常は1ページに1つだけ「いいね!」ボタンが存在できることになる。

だけど、この仕様では例えば1ページの中に複数の異なる「いいね!」ボタンを配置することができないので、そこを解決する。

今日現在、Facebookの公式デベロッパーページ( http://developers.facebook.com/docs/reference/plugins/like/ )から いいねボタンを作る方法は、HTML5、iframe、xfbmmlが選べるけど、恐らくは複数設置の概念から言って、HTML5がよいだろう。だからHTML5でのやり方を解説。デベロッパーページから入力して、出力すると以下のような感じ。en_USのママだと[LIKE!]ってなるから、[ja_JP]に直したらいいね。でも多言語環境からの閲覧時はどうなるかは分からんです。

<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

 

<div data-href=”http://www.qualitte.com/facebook/001.html” data-send=”false” data-width=”450″ data-show-faces=”false”></div>

このフォーマットが、html5での「いいね!」ボタンの出力になるんだけど、いいねぼたんを出力しているのは、青い部分のコードになるので、このコードを複数用意することで実現する。

今回は、001.html〜005.htmlまでの合計5ページを用意。それぞれに、OGPを設定してあり、そのページをいいねさせるということ。

表面上はうまく実装されているんだけど、OGP側の設定にエラーがあります。というのも、OGPの正確な記述方法には、<meta property=”fb:admins” content=”XXXXXXXXXXXX” />の項目が必要で、これは、facebookのデベロッパー登録してある人の固有番号で、誰が作ったのかをわかるようにしているみたい。(これが何故必要なのかはなんとなくわかる。追記で書きます)しかし、このコードを書くと、Facebookが自動的に恐らくはOGPで設定した「title」に相当する「Facebookページ」を自動的に「登録者」が作ったことにして生成してしまう。

この挙動は驚異で、まだ試してない状況だけど、商品が10000点あれば、おそらくは10000点のFacebookページが生成されてしまうんだと思う。これはなんかおかしい。それを避けるために、あえてfb:admins項目を書かないという選択肢をとっている。

これをどれだけのサイトがきちんと掲載しているのかは分からないけど、ページがどのようにOGPを設定しているのかをデバッグする機能がFacebookにはある。(リンターという名前で呼ばれているみたいだけど、リンターって何?汗)

Input URL or Access Token http://developers.facebook.com/tools/debug

これで、例えば「無印良品のオンラインストア」で特定の商品ページ(例:http://www.muji.net/store/cmdty/detail/4934761081151)をこのデバッガーに入力してみると、いくつか足りないことがわかる。足りなくても別に構わないということだろう。少なくともFb推奨のOGPすべてを記述する必要はないようだ。

そして最後に、このOGPは【メタ】記述であるという点が個人的にはセキュリティホールに近いのではないかと考えている。

この機能を用いると、自分の作った参考例 http://qualitte.com/facebook/000.html のようなサイトであると、いいねを押したあとのfacebookに表示される内容を事前に確認することができない。この機能を逆手にとって、ユーザーの意図しないページの「いいね!」を押させることができる。故意か事故かは別として、

<div data-href=”http://www.qualitte.com/facebook/001.html” data-send=”false” data-width=”450″ data-show-faces=”false”></div>

たったこの部分を編集することで、意図しないページを「いいね!」させることが可能になる。まあ、改訂の速いFbのことだから、そのうち同一ドメインだけとか、それこそ投稿内容の事前可視化&確認が必須になってしまうのかもしれない。