「いいね！」ボタンは XFBML 版を設置して Facebook に最適化すべき
Facebook の「いいね！」ボタンはどれも同じ見た目に見えますが、実は XFBML 版と IFRAME 版の２種類があります。
IFRAME 版のほうが設置が簡単なので、IFRAME 版を使っているサイトも多いようですが、実は、XFBML 版にしたほうが Facebook で話題が拡散しやすくなるのでオススメです。
XFBML 版と IFRAME 版の違い
拡散しやすくなる理由はどこにあるのでしょうか。
XFBML 版と IFRAME 版、どちらも見た目は一緒です。違いはボタンを押したときの挙動にあります。
IFRAME 版の「いいね!」ボタンを押してみる
押した状態になって終わりです。
「いいね！」を押した時点では、自分のタイムラインはこうなっています。
右側の最近のアクティビティが増えています。もうちょっと下にある「いいね！」一覧も増えますが、あまり目立ってません。
XFBML 版の「いいね!」ボタンを押してみる
押した状態になるところまでは同じだけど、コメント入力用のポップアップが出てきます。
コメントを入力して投稿してみると、タイムラインはこうなります。
通常の投稿としてタイムラインに表示されましたね。
単に「いいね！」したときに比べて、目立つようになりました。
じゃ、ニュースフィードはどうなる？
自分のタイムラインは分かったので、友達のニュースフィードではどうでしょうか。
Facebook の開発者向けドキュメントには
If users do add a comment, the story published back to Facebook is given more prominence.
もしユーザーがコメントしたら、コメント内容は Facebook に反映されて、さらに目立つようになります。
と書いてあります (日本訳は私によるもの)。
コメントがついていれば、コメントつきで友人のニュースフィードに表示されるので、友人の興味を引きやすくなります。
ただ、効果はそれだけではありません。「いいね！」したページがニュースフィードに表示される条件は、経験的に
- 「いいね！」した人の人数
- 「いいね！」した人の仲のよさ
- コメントの有無
が関係しているように思います。
たとえば、仲のよい人が「いいね！」するとニュースフィードに表示されるけど、疎遠気味な人が「いいね！」しても表示されません。ただ、疎遠気味な人でも２人が同時に「いいね！」すると表示される、といった具合です。
この経験則が正しいとすれれば、コメントつきで「いいね！」したときには、より多くの友達のニュースフィードに表示されることになります。
XFBML 版のほうがうれしい理由をまとめる
サイト運営者は、「いいね！」したときにコメント入力してもらえれば、より多く友人に伝わるので、自分のサイトへの流入数が増えてハッピー。
Facebook ユーザーの立場からも、コメントを入力して面白さを友達に伝えられるし、より多くの友達に伝わってハッピー。コメントを入力したくないなら閉じればよいだけ。
XFBML 版なら、みんなハッピー！
XFBML 版にするにはどうするのよ？
XFBML 版にしたくなりました？ その前に、自分のサイトで使ってるのが XFBML 版なのか IFRAME 版なのかを確認しなきゃいけません。
「いいね！」ボタンを押してみれば分かるのですが、押さずに確認したいケースもあるかもしれません。
ボタンを押さずに XFBML 版かどうか確認する方法
HTML のソースを見ましょう。
「いいね！」ボタンの位置のソースが
- IFRAME 版 →
<iframe>タグ - XFBML 版 →
<div class="fb-like">か<fb:like>
となっています。
たとえば、はてなダイアリーのソースを見てみると…
はい、IFRAME 版ですね。
XFBML 版を埋め込む手順
自分が使ってるのが IFRAME 版だと判明したなら、XFBML 版に置き換えてみましょう。
WordPress などは XFBML 版での埋め込みに対応しているプラグインも多いようなので、ここでは、独自に埋め込みする方法を書いておきます。
独自に埋め込む場合は、開発者向けドキュメント の [Step1 - Get Like Button Code] から埋め込みコードを取得します。
- [URL to like] に URL を入力する。
- [Send Button] のチェックを外す。
- [Layout style] を [button_count] か [box_count] に設定する。
- [Get Code] をクリックする。
これで設置するためのコードが表示されます。
コードには「HTML5」「XFBML」「IFRAME」「URL」の４種類がありますが、「HTML5」「XFBML」が XFBML 版です (ややこしいですね…)。
「XFBML」は <html> タグに名前空間を追加しなきゃいけないのが少し面倒なので、それが嫌なら「HTML5」を使うといいんじゃないでしょうか。
「HTML5」と「XFBML」のどちらも JavaScript の埋め込みが必要です。非同期な埋め込みコードになってるので、Facebook のサーバーの応答が遅かったとしても、自サイトのレンダリングを阻害する心配はありません。
まとめ
XFBML 版の「いいね！」ボタンを設置したほうがお得かもしれないよ、という話をしました。
Facebook つながりで宣伝。このブログの Facebook ページを作りました。更新情報などを Facebook で配信していくので、興味がある人はぜひ「いいね！」してください。
補足
本文中では触れませんでしたが、IFRAME 版でもポップアップを表示するケースはあります。スタンダード スタイル (「いいね！」した人のアイコンを表示する大きいモード) のときです。ただ、個別の記事に対して大きい「いいね！」ボタンを設置しているケースはほとんど見たことないので、本文中での説明は省略しました。
また、XFBML 版でも、親タグで overflow: hidden にしてると、コメントのポップアップは表示されません。このブログでは、float でソーシャルボタンを横に並べて、Compass の clearfix ミックスインで float 解除していたのですが、この、clearfix ミックスインには overflow: hidden が含まれていたので、しばらく悩まされました。結局、pie-clearfix ミックスインを使って回避しました。皆様もお気をつけください。