FacebookはLikeから

Facebookをファンページを作るのも良いけど、企業特にコマースやメディアサイトは「いいね！」ボタンを追加する方が先の方が良いと思うわけですよ。今のところファンページよりも価値が高いです。（個人的見解）

なぜ「いいね！」ボタンなのか？

企業がFacebookと関わるにあたってという部分をまず考えてみます。アプローチは大きくは２つぐらいあります。

• Facebook上にファンページ、アプリを提供すること
• Facebookの一部の機能をサイトに取り込むこと

１つめは今非常に盛り上がっているところですね。ファンページやアプリをFacebook上で提供することでファンを増やしていこうという試みだったりするわけです。

後者は「いいね！（Like）」ボタンに代表されるようなFacebookが提供している機能を自分のサイト側に取り込む感じです。

全社についてはFacebook内で完結してしまうことが非常に多くあり、イメージ的には別サイトを運営管理している感じに少し近くなります。

これに対して後者はFacebookと自社のサイトの距離を縮める働きをしてくれる感じかなぁと感じています。そしてこの距離を縮めてくれる最も簡単かつ重要なアプローチが「いいね！」ボタンなんですっ！

「いいね！」ボタンのしてくれること

Facebookの中にも至る所に「いいね！」は存在しているのですが、ここではサイト上に統合できる「いいね！」にフォーカスします。

サイト内に表示出来るようにした「いいね！」ボタンはログインをしているFacebookユーザーが押すと、Facebook側にデータが送信されその人のウォール上に表示されます。

これによってその人と友達になっている人にもこの内容が見えるようになるわけですね。これが基本的な動きです。

サイト上には「いいね！」ボタンを押した人が何人であるか、ログインしているユーザーの友達になっている人の誰が押したかなどが見えるようになっています。

まぁ「いいね！」ボタンを追加すれば、そのページを「いい」と思った人がFacebook上の友達にリンクをどんどん見せていってくれるという素晴らしい仕組みなわけです。

実は深いい仕組み

大まかな機能はこれだけなのですが、そうです。このブログは解析ブログであり、最適化ブログです。計測や最適化の部分について少し触れていきましょう。（ここは少し技術的セクション）

まず最も重要なのが「いいね！」ボタンで生成されたリンクから来訪した人をどのくらいなのか知れるようにする方法です。

Facebookから来訪した人というだけであれば、リファラがfacebook.comである人でほとんど捕捉できるわけですが、それだと少しFacebook戦略を行っていく上ではデータの粒度が大きすぎてしまします。

実は「いいね！」ボタンによってFacebook上に表示されたリンクから来訪した場合は、それを特定することが出来るような仕組みが用意されています。 （上の図の４の部分）

「いいね！」を設置する際にパラメータによって見た目などを操作することが出来るようになっています。この中に「ref」というパラメータがあるのですが、これが非常に重要なものとなっています。

これをパラメータとして指定すると「いいね！」ボタンの押したユーザー上に表示されたリンクに２つのパラメータが付与されます。（仕様の詳細：Like Button – Facebook開発者）

実際には例えば「http://an-k.jp/blog/archives/2289」が「いいね！」が押されたリンクだとすると「http://an-k.jp/blog/archives/2289?fb_ref=fblike&fb_source=profile_oneline」といった感じのURLが設定されることになります。

１つめの「fb_ref」というパラメータでは、「いいね！」ボタンで指定した「rel=”XXXX”」という部分のXXXXが＝の後ろに設定されます。上の例では「fblike」というのを設定しています。ここの使い方次第で様々な効果測定が出来ます。

そしてもう１つが「fb_source」というパラメータです。アンダーススコア（_）でつながれた２つの情報が含まれたものになるのですが、こちらはFacebook上のどこで表示されたのかという情報が入ってきます。

前に入っている部分が「home」「profile」「search」「other」とFacebook上の大きなカテゴリが入ってきます。後ろに入る部分は「oneline」「multiline」という単一内容のウォールか複数内容のウォールかのいずれかがわかるようになっています。

はい。ということでこれら２つのパラメータを解析ツールで集計できるようにしておきます。そうすることで、Facebookから来た訪問者というだけではなく、パラメータの指定方法によっては「どこの製品のプロダクトで押された「いいね！」ボタンから、どのくらい流入があって、どのくらいコンバージョンに貢献しているのか」という部分がわかるようになるわけです。

つまりですね「いいね！」を利用するのに「ref」指定をしないはありえないのですっ！

表示される画像だって変えられる

先ほどのサンプルのように「いいね！」を押されてユーザーのウォールに表示された場合、コメントが入っていたりするとそこに画像も表示されます。（上の図の２の部分）

何も指定していないとそのページにある適当な画像が表示されてしまうようです。それでは勿体ないですよね。製品詳細ページに置いてあるのであればその商品の画像を表示したいもの。

これはOpen Graph protocolというものを利用したものを設定することで可能だったります。といってもそんなに難しいものではなくページのソースのヘッダ部分に「これ使ってね」と指定する感じです。（仕様の詳細：Open Graph protocol – Facebook開発者）

このOpen Graph protocolもいくつか利用できる属性があるのですが、この画像については「og:image」というものを利用します。これをMETAタグというものを利用して設定する感じです。このブログであれば下記のような感じ。簡単です。

<meta property="og:image" content="http://an-k.jp/blog/wp-content/themes/arthemia/images/digit.png"/>

これで画像も任意のものが設定できるわけです。ありがたやありがたや。

「いいね！」が押された回数を知りたい

ここまでは「いいね！」がクリックされてから、その表示やその後戻ってきた時にきちんと計測できるところを見てみましたが、やっぱり「いいね！」のクリック回数も知りたいわけですよ。

出来ることのほとんどはサイトに設置した「いいね!」の押され具合をデータで解析する方法 | Web担当者Forumにまとまっています。

で、ここであえて触れた理由はやっぱり自分で使っているウェブ解析ツールでも取得したいじゃないですか。これが出来るんですよ。

「いいね！」ボタンの設置方法には大きく２つの方法があります。１つがジェネレータで作って簡単に入れられるiframe方式です。もう１つがFacebookの提供するJaveScript SDKを読み込んで利用するFBML方式です。

設置の簡単さで言えば断然iframe方式なんですが、導入している解析ツールでも取得をしたいのであればFBML方式を選択していただくことになります。

さてFBMLで導入をすると「FB.Event.subscribe」というのを利用して「いいね！」をクリックされた時のイベントをJavaScriptで取得することが出来ます。あとはここで解析ツールでのクリック計測のファンクションを仕込んでおけば良いわけです。簡単ですね。

なぜ取るのか？１つは別のサイトのデータと一覧できるようになること、もう１つは解析ツールによりけりですがアラートなどが使えることだったりします。運用を考えると結構大きいです。

まとめ

ということでFacebookの「いいね！」について少しまとめてみました。結構、デフォルトの何も設定しないまま導入してしまっていることが多いようですが「refの設定」「refの戻りの取得」「画像の設定」「いいね！の回数計測」のような設定を気をつけておくことで、よりフルにその効果を確認出来るようになると思います。

先ほど触れた設置方法ですが、企業は今後のことも考えてFBML方式での導入をおすすめします。これは「いいね！」ボタンだけの話だけではなく、今後、Facebookを自分のサイトに統合していくにあたって格段に拡張性が生まれそこに価値が作れるようになるためです。

この辺りはまたどこかで書きたいと思います。あと記事の下の「いいね！」ボタンも是非っ。