Facebook:シェアボタンの設置

最終更新日時:2012-01-24 17:20:17
Facebook

概要


Facebook のシェアボタンを任意の位置に設置する方法です。
シェアボタンをクリックされることにより、そのクリックした人のウォールにリンクが貼られますので、サイトの活性化の一環として有効です。
いいねボタンと異なり、シェアボタンがクリックされると Facebook 側のサイトに飛び、シェア内容の確認画面が表示されます。
この画面で、コメントを入れたり、サムネイルを選択することも可能です。

なお、いいねボタンとは異なり、シェアボタンはシェア数が3以上にならないと数字が表示されません。
ちょっと謎な仕様ですね。。。


設置方法


例えば、http://lightly.wjg.jp/ をシェアするようなシェアボタンを設置するには、以下の HTML コードを表示したい箇所に埋め込みます。

 <a name="fb_share" share_url="http://lightly.wjg.jp/" href="http://www.facebook.com/sharer.php">シェア</a>
 <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>


上記の例では、Facebook のデフォルトのシェアボタンが表示されます。
aタグの要素の「シェア」を変更することにより、ボタンの文字列が変更可能です。
なお、type 属性でボタンの種類が指定可能です。
box_count、button_count、button、icon_link、icon などがあります。

さらに、以下のように share_url を使わずに、sharer.php の QUERY_STRING で指定することにより、シェアボタンを設置することも可能です。
単なる aタグですので、こちらの方が自由度が高いですね。

 <a href="http://www.facebook.com/sharer.php?u=http://lightly.wjg.jp/&t=Lightly and Leniently">シェア</a>


u でシェアする URL を、t でタイトルを指定するのですが、t が実際に何に使われているのかは不明です(/_\*)

お問い合わせは 掲示板 にて。