これであんたもシェア名人。Facebookシェアボタンの実装まとめ

スポンサーリンク

Facebookシェアの実装方法って何種類もあってすごいモヤモヤしてたのでまとめてみた。
ちなみにOGPに関しては一切触れていないので、わからない人はこちらを参考にしてもらいたい。

併せてTwitterのシェア実装方法について知りたい人は次の記事も見て欲しい。
これであんたもシェアの匠。Twitterツイートボタンの実装まとめ

公式シェアボタン

公式のシェアボタンのウィジェット。
いいねボタンと同じようにサイト上でコードを生成できる。
シェアされる情報はシェアするページのOGP情報。

公式サイトでwidgetのコード生成

Share Button

昔ながらのリンク設定(share.php)

昔からあるシェア用リンク。
シェアする内容は指定するシェアURLのOGP情報を取得する。

ずっと非推奨だと言われてきて、一時期ドキュメントが削除されたり復活したりとあったが、
今は公式のシェアボタンを使えということの様子。

ダイレクトリンク

<a href="http://www.facebook.com/share.php?u=[URLエンコードしたURL]" onclick="window.open(this.href,'FBwindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア">share.phpでシェア</a>

share.phpでシェア

Feed dialog

シェアというか投稿という分類。
シェアする内容(タイトルやキャプション、説明文)をカスタマイズすることができる。

ダイレクトリンク

<a href="http://www.facebook.com/dialog/feed?app_id=419866574778905&link=[URLエンコードしたURL]&picture=[URLエンコードした画像パス]&name=[タイトル]&caption=[キャプション]&description=[説明]&redirect_uri=[リダイレクトURL]&display=page" title="Feed Dialogでシェア">Feed Dialogでシェア</a>

Feed Dialogでシェア

JavaScript

JavaScriptからも操作可能。
※事前にJavascript SDKを読み込む必要あり。

window.onload = function() {

    FB.ui({
        method: 'feed',
        link: 'https://developers.facebook.com/docs/',
        caption: 'キャプション',
    }, function(response){
        // callbackを指定可能
    });

};

Javascript SDKを使ってFeed Dialogでシェア

Feed Dialog

Share dialog

ダイレクトリンク

<a href="https://www.facebook.com/dialog/share?app_id=145634995501895&display=popup&href=[URLエンコードしたURL]&redirect_uri=[リダイレクトURL]" title="Facebookでシェア">Share Dialogでシェア</a>

Share Dialogでシェア

こちらもJavaScriptからも操作可能。

window.onload = function() {

    FB.ui({
        method: 'share',
        href: 'https://developers.facebook.com/docs/',
    }, function(response){
        // callbackを指定可能
    });

};

Javascript SDKを使ってShare Dialogでシェア

Share Dialog

まとめ

無難に公式のシェアボタンを使っておくのがいい。
ボタンのデザインをカスタマイズするならshare.php、Share Dialogを使うのが良いだろう。
ただshare.phpは非推奨なため、いつAPIが無くなってもおかしくないことを頭に入れておいて欲しい。

あとSend Dialogというのもあるんだけど、一般的にサイトに設置するシェアとは意味が異なるので今回は除外した。
また機会があったら紹介したいと思う。

また公式ボタンのみだが、ページに配置したボタンのみを動的に再読み込み(リロード)したい場合は次の記事もおすすめ。
ツイートボタンとかいいねボタンの再読み込み

参考

Sharing on the Web – Facebook Developers

スポンサーリンク