Jump to the content

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

(Updated: ) SNS

    これであんたもシェア名人。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

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×