Facebookのshare(シェア)ボタンをサイトやブログに設置する方法

このブログでもFacebookの「いいね!(like)」ボタンを設置する方法は書いたことがあるし、同じように「いいね!」の解説ページは他にもたくさんあるんだけど、各種「share(シェア)」ボタンのオプション設定の解説を日本語で書いてるページはあまり見あたらない。(現在はいいね!数をカウントしている「share+カウント数ボタン」の解説ページはある。)

しかも「facebook share」でGoogle検索するとトップにでてくるShare on FacebookにアクセスするとなぜかLike Buttonの方にページ移動させられて、shareボタンのヘルプページが見つかりにくいという問題もある模様。というわけで「shareボタンの設定と設置方法」を書いてみた。ブログやサイトに設置するときに参考にどうぞ。

各種sahreボタンの解説

shareボタンも「いいね!」ボタンと同じようにヘルプページが存在して、そこに解説が書かれている。

現在はヘルプページ自体がなくなって、いいね!(like)ボタンの方にリダイレクトされている模様。Facebookとしてはいいね!の方に統一したいのではないかと思われる。

[追記2]
どうやら設定方法に大きな変化があったようなので、記述内容を加筆・修正しました。(2012年8月)

とはいえ相変わらずドキュメントは英語で日本語化されていないので、コード例を引用しつつ説明してみたい。

一番シンプルなsahreボタンの設置方法

一番簡単な設置方法は以下のコードをshareボタンを設置したい場所に書き込むだけ。

<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
表示例

Facebook - icon_link

※最後のものを除きボタンは単なる画像で動作しません。

Facebookのアイコンの横に「Share」と書かれたボタンが表示される。以前は全体がボタンのように表示されるタイプだったが、デフォルトの表示形式が変更された様子。なおコードの例ではaタグの後にFacebookのJavaScriptが読み込まれているが、実際はheadタグなどの好きな部分に1回記述しておけばいい。(これはこれから先に説明するどのボタンタイプでも同じ。)

注意点としては実際にshareされるページは「今開いてるページ」なので、ブログのトップページのような「記事が一覧表示されてるページ」では、個別の記事をshareしようとしても正常に機能しない。また何らかの問題でURLが取得できないことがあるようで、そのようなとき(ページで)はボタンそのものが出てこないなど正常に表示されないことがある模様。そのような場合は、以下のボタンのようにタグの属性部分にURLの設定を書き込む。

buttonタイプ

「Share」と書かれた横長のボタンのようなものが表示されるタイプ。

コード例
<a name="fb_share" type="button" share_url="[記事のURL]"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
表示例(google)

Facebook - button

aタグのtypeに「button」と記述し、share_urlにshareしたいURLを書き込む。後述の「button_count」と似ているが、いくらシェアされていてもカウントが表示されない点が異なる。

button_countタイプ

「button」タイプの右にカウントが表示されるボタン。

コード例
<a name="fb_share" type="button_count" share_url="[記事のURL]"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
表示例(google)

Facebook - button_count

「button」のボタンにシェア数のカウント数が追加されたもの。ネットで一番見かけるスタンダードなタイプかもしれない。

icon linkタイプ

Facebookのアイコン+「Share」のタイプ。

コード例
<a name="fb_share" type="icon_link" share_url="[記事のURL]"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
表示例(google)

Facebook - icon_link

「type」を設定しない場合と同じ。意図的にデフォルトと同じ動作をさせるときに使う設定。

iconタイプ

アイコンだけが表示されるタイプ。

コード例
<a name="fb_share" type="icon" share_url="[記事のURL]"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
表示例(google)

Facebook - icon

小さいアイコンのみが表示される。スペースを取らない反面、ただ見ただけでは押して何が起こるかわからないのが問題かもしれない。

box_countタイプ

横長のボタンと吹き出しでカウント数が表示されるタイプ。

コード例
<a name="fb_share" type="box_count" share_url="[記事のURL]"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
表示例(google)

Facebook - box_count

Shareボタン+吹き出しカウントの大きなサイズのボタンが特徴。目立たせたいときやスペースに余裕があるときに使用するとよさそう。

好きな画像やテキストをshareボタンにする

Facebookのshareボタンはリンクのみで作ることができるため、JavaScriptを一切使わず任意の画像やテキストを使って同等の機能を再現することが可能になっている。(ただしこの場合は標準のアイコンが表示されないので、必要ならフリーのFacebookアイコンなどを別途用意する必要がある。)

コード例

<a href="http://www.facebook.com/sharer.php?u=[記事のURL]&amp;t=[記事のタイトル]" rel="nofollow" target="_blank">[任意のテキストや画像タグ]</a>

表示例(このページ)

この記事をFacebookで共有する

リンクに含める記事のURLはURLエンコードするべきと公式のヘルプページには書いてあるものの、テストしてみたところURLエスケープしなくてもとりあえず機能する模様。(もちろんエンコードできるなら指示どおりにした方が間違いない。)逆に記事のタイトルはページがUTF-8でない場合は文字化けして正常に動作しなくなるので、URLエンコード済みのタイトルを記述するか「&amp;t=[記事のタイトル]」ごと削除するようにする。

とはいえ実際はタグ内の「&amp;t=~」を削ってしまってもFacebookが自動でタイトルを取得するので、URLから記事のタイトルを消す方法をとった方がスマートかも知れない。

HTMLエラーがないValidなコードにしたい場合

Facebookの標準Shareボタンもこの手のサービスにありがちな「ValidでないHTMLタグ」になってしまっている。これはボタンの設定に「type」や「share_url」という存在しない属性が使われているため。typeやshare_urlが存在しない最初の「<a name="fb_share"></a>」ならエラーは発生しないが、そうするとShareするURLが設定できなくなってしまう。(href属性では機能しない。)

これを解決するには個別(の記事)ページのみに「name="fb_share"」だけを設定したshareボタンを設置するか、通常のリンクを使う前述の「任意の画像やテキストを使うボタン」を利用するしかないと思われる。