「いいね！」より使える？「シェアバナー」の謎

2012.07.18追記
この記事で紹介している、公式のシェアボタンと、FacebookのCSSを読み込んでボタン風にするシェアリンクは表示できなくなりました。ただし、現時点ではshare.phpは機能しているので、自作のシェアリンク・シェアバナーには影響がありません。

昨年執筆に参加した、「Facebookページプロフェッショナルガイド」の続編が発売されることになりました。

今回はデザイン・マーケティングに分冊となり、私はマーケティング編「Facebookマーケティングプロフェッショナルガイド（仮）」の基礎知識などを執筆予定です。

今回は７月の発売イベントにも参加したいと思います。
どうぞよろしくお願いします　m(_ _)m

さて、私が担当するページには「いいね！ボタン」などの「ソーシャルプラグイン」の解説が含まれるのですが、前から気になっていることがあります。
Facebookに注力しているブログでよく見かける「シェアバナー」の存在です。

新しい本のPRも兼ねて、一種の「裏技」的に使われている「シェアバナー」についてまとめてみます。

シェアボタンとは

「シェアボタン」は、まだ「いいね！」機能がなかった頃に、Facebookが提供していたソーシャルプラグインです。

クリックすると、ポップアップでシェア画面が表示されます。

• facebook「シェア」ボタンの設置方法 – Hinemosu

シェアボタンは「いいね！」ボタンへの統合ともに非推薦扱いとなり、公式サイトの「Activity Feed」にも掲載されていません。

また、かつてのコードをiframe形式以外のいいね！ボタンやコメントを使っているページに使用するとスクリプトが衝突して、いいね！ボタン等が出なくなってしまいます。

なぜかまだ使える

ところが、上記のページでも触れられている「JavaScriptを使わないシェアボタン」は、現在でも使用することができます。

以下のように書くと、ポップアップにはなりませんが、以前と同じ機能を持ったシェアボタンが表示されます。
body内にCSSへのlinkを書くのが嫌な人は、head要素で読み込んでください。

<link rel="stylesheet" href="http://static.ak.fbcdn.net/connect.php/css/share-button-css" type="text/css" media="screen">
<a href="http://www.facebook.com/sharer.php?u=★シェアしたいページのURL★" target="_blank"><span class="FBConnectButton FBConnectButton_Small" style="cursor:pointer;"><span class="FBConnectButton_Text">シェアする</span></span></a>

リンクのURL部分は、使っているブログで変わります。
WordPressであれば、記事ループ内に以下のように書きます。

http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>

シェアボタンをバナー風にする

いいね！ボタンと違い、シェアは直接HTMLのソースコードを書いているので、リンクの対象をバナーにすることもできます。

WordPressだとこうなります。

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" target="_blank"><img src="★バナーのURL★" alt="この記事をFacebookでシェアする" /></a>

バナーだとサイトのデザインに合わせられますし、クリック範囲が広くて訴求効果もあります。
現在も「バナー」という形で見かけるのは、そのためかもしれません。

シェアの方がいいね！より効果がある？

いいね！とシェアの関係について、気になる記事があります。

ちょっと変わった靴で知られる、「クロックス・ジャパン」のECサイトには、いいね！ボタンとシェアボタンが使われています。

この効果をドメインインサイトで集計したところ、「シェアされたとき」のアクション回数が、「いいね！されたとき」の８倍に達していたというのです。

• Facebookページは「キャンペーンのちょっとした工夫」で活性化できる！クロックス・ジャパンのエンゲージメント構築手法

半年前の、2011年10月時点の集計であることと、クロックス・ジャパンの場合、いいね！ボタンにiframeタイプを使っている（いいね！ボタンではシェアできない）ことを考えると、このデータだけで結論を出すべきでないと思います。

ですが、「○○についていいね！と言っています」とだけ表示されるよりも、友だちの「これ、かわいいねー」とか「使ってるけどいいですよ」という一言が入っている方が、対象のページ・商品への好感度が上がるのは、間違いないでしょう。

そんなわけで、私もまねっこしてバナーを置いてみました。

このブログは有名でもないですし、相当時間をかけないと公平な結果は出ませんが、しばらく様子を見てみようと思います。

自分のブログでもシェアバナーを使ってみよう！という方は

1. 公式プラグインではないので、突然使用できなくなる可能性が高い
2. 対象ページにOGPを正しく設定していなければ意味がない
3. 対象ページの業種・傾向によって、シェアの効果は大きく異なる

という３点を理解したうえで、自己責任でお試しください。