【完全版】これであんたもシェア名人。Facebookシェアボタンの実装方法まとめ

Facebookシェアボタン実装まとめ

スポンサーリンク

どうも、イソップです。

Facebookシェアの実装方法って何種類もあってわかりづらかったのでまとめてみました。

シェアボタンはいいねボタンとどう違うのか。
それから公式ボタンの作成方法やリンクでのシェア設定、JavaScriptでの設定方法をご紹介します。

Facebookシェアとは

Facebookのシェアは、シェアしたいサイトの情報を自分と友達のタイムラインに表示させる仕組みです。

勘違いしてほしくないのですが、「いいね!」とは少しだけ挙動が違います。

いいねは友達のタイムラインにいいねしたことが表示されますが、自分のタイムラインには表示されません。

いいねはリアクションで、シェアは共有という位置づけなので、Facebookで拡散させるにはシェアが断然効果的です

また、シェアされる情報はシェアするページのOGP情報です。
ボタンの設定ではシェア内容は変更できませんのでご注意を!

それではさっそく実装方法を紹介していきましょう。

中には高度な内容のものもあるので、自分に合ったやりかたを選んでもらえれば幸いです。

公式シェアボタン(初心者向け)

公式サイトで取得できるシェアボタンです。
サイト上で設定を入力すると、簡単にシェアボタンのHTMLコードを生成できます。

シェアボタン – 開発者向けFacebook

HTMLがわからない人はまずこのサイトでボタンを作りましょう!

コード取得手順

まずシェアボタンの生成ページにアクセスします。

ここでは、設定項目をフォームに入力します。

Facebook シェアボタン構成ツール

設定項目は以下の通りになります。

設定HTML5の属性説明初期値
シェアするURLdata-hrefシェアするページのURLを絶対パスで指定します。
例: http://blog.yuhiisk.com/
XFBMLバージョンとHTML5バージョンでは現在のURLが初期値。
レイアウトdata-layoutボタンの表示レイアウトを指定します。
box_count、button_count、buttonのいずれかを選択します。
icon_link
モバイルiframedata-mobile_iframeこの項目をtrueに設定すると、シェアボタンを押した時に、ポップアップではなくモバイル用のモーダルウィンドウが表示されます。モバイルでのみ利用可能でデスクトップでは表示されません。false
ボタンサイズdata-sizelargeとsmallの2つのサイズのボタンを選択可能です。small

入力内容に問題なければ、「コードを取得」ボタンを押すとHTMLコードが表示されます。

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

ステップ2とステップ3のところで、HTMLコードが2つ表示されているのがお分かりでしょうか。

つまり2箇所にコードを配置します。

まずステップ2に表示されている次のコードを、bodyの開始タグのすぐ後に貼り付けます

<body>
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10&appId=419866574778905";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  ...

次にステップ3に表示されているコードを、サイト内で配置したい箇所に貼り付けます

<div class="fb-share-button" data-href="http://blog.yuhiisk.com/" data-layout="button_count" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fblog.yuhiisk.com%2F&src=sdkpreparse">シェア</a></div>

これで設定は終わりです!

サイトを表示してみて、次のようにボタンが表示されていれば設定完了です。

↓↓↓↓↓↓

モバイルiframeって?

モバイルiframeの表示画面

モバイルiframeにチェックを入れると、モバイル端末でシェアボタンをタップしたときのみ、モバイルに最適化されたシェア画面を表示させることができます。

別ウィンドウを作成せずモーダルウィンドウを表示するので、ユーザビリティにとても優れています。

特に理由がなければ、モバイルiframeの項目にチェックを入れておくことをオススメします。

ダイレクトリンクでのシェア設定(初心者〜中級者向け)

公式のシェアボタンを使わずに、HTMLのリンク設定でシェア画面を表示させることも可能です。

シェアボタンの見ためをカスタマイズしたいときがありますが、このダイレクトリンク設定を利用すると、画像やテキストでボタンを作成できます。

残念ながらシェアのカウント表示はできないのでご注意ください。

コードの設定手順

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

[URLエンコードしたサイトの絶対パス]にシェアしたいURLを置き換えてください。

URLエンコードをしないと上手く動作しませんので、必ずURLエンコードをすることをオススメします。

http://blog.yuhiisk.com/

http%3A%2F%2Fblog.yuhiisk.com%2F

URLエンコードには次のサイトで簡単に変換できます。

UrlEncode.net URLエンコード

最終的なコードサンプルは次のとおりです。

<a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fblog.yuhiisk.com%2F" onclick="window.open(this.href,'FBwindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア">share.phpでシェア</a>

このコードをサイトの配置したい箇所に貼り付けます。

ボタンのカスタマイズサンプル

シェアボタンのデザインカスタマイズはダイレクトリンクでの設定が一番簡単でオススメです。

aタグの中身を画像にするだけでシェアボタンをカスタマイズできます。

<a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fblog.yuhiisk.com%2F" onclick="window.open(this.href,'FBwindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;" title="Facebookでシェア">カスタマイズサンプル</a>

テキストリンク

この記事をシェアする

カスタムボタン
カスタム画像ボタン

Share Dialog(中級者〜上級者向け)

最後はShare Dialog(シェアダイアログ)というFacebookの仕組みを利用した実装方法です。

この仕組みを利用することで、サイトの記事を自分のタイムラインや友達のタイムライン、グループに向けて投稿したり、メッセンジャーで非公開のメッセージを送信することができます。

Share Dialogの最大の特徴は、JavaScriptでシェアを操作できる点です。

JavaScriptで実装することにより、シェアが完了したかどうかシェアされた投稿のIDを取得したりできます。

Webアプリケーション開発などで、シェアを絡めた複雑なことをしたいときにはShare Dialogを利用するのが効果的でしょう。

Share Dialogの設定方法は、JavaScriptでの設定とダイレクトリンクの2通りがあります

JavaScriptでの設定手順

JavaScriptからShare Dialogを利用するには、あらかじめJavaScript用Facebook SDKをサイトで読み込む必要があります。

公式シェアボタンで生成したHTMLコードを思い出してください。

<body>
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10&appId=419866574778905";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  ...

bodyの開始タグのすぐ後に上記のコードを貼り付けました。
実はこれがJavaScript用Facebook SDKなんです。

これがすでに貼り付けられていれば、何もする必要はありません。
もしまだコードがなければ、生成ページからコードを取得・貼り付けしてください。

ではShare Dialogを実装してみましょう。

document.getElementById('btn').onClick = function() {
  FB.ui({
    method: 'share',
    href: 'http://blog.yuhiisk.com/',
  }, function(response){});
};

↓↓↓↓↓↓

Share Dialogでこの記事をシェア

id属性がbtnの要素をクリックした際に、シェアするコードです。
Facebook SDKを読み込むと、グローバル変数FBが利用可能になります。
FBのuiメソッドを実行することで、FacebookのAPIを利用することができます。

Share Dialogは、methodをshareに指定するだけで最低限実装可能です。
その他の詳しい設定項目は次のとおりです。

共通設定項目
パラメータ説明
app_idアプリIDを指定します。SDKの読み込み時に指定していない場合、必須項目です。
redirect_uriシェア完了後にリダイレクトさせるURLを指定します。
ダイレクトリンクを利用する場合は必須項目です。
displayダイアログの表示方法を指定します。

ダイレクトリンクを利用する場合、Facebookのサイトでの表示になります。(page)

JavaScript SDKを使用する場合、アプリにログインしている利用者向けのモーダル「iframe」、Facebook.com上のゲームで使用される「async」、その他の場合の「popup」ウィンドウがそれぞれデフォルトとなります。

モバイルウェブアプリの場合は「touch」の表示タイプが初期値になります。
Share設定項目
パラメータ説明初期値
hrefシェアするページのURLを指定します。現在のページのURL
hashtagシェアコンテンツに追加するハッシュタグ。

例: #facebook
null
quoteシェアする文章を指定します。null
mobile_iframe※同じfalse

コールバック関数の利用

FB.ui({ ... }, function(response){
  // ...
});

FB.uiメソッドの第2引数にはコールバック関数を設定できます。
引数で渡ってくる値は次のとおりです。

パラメータ説明
post_id公開されたOpen Graph storyのIDが返ります。
Facebookを利用してアプリにログインしていて、publish_actionsを許可したときにのみ利用できます。
error_messageエラーメッセージが返ります。
Facebookログインを使用してアプリにログインしているときにのみ利用できます。

この値を利用してエラーハンドリングなどを行います。

ダイレクトリンクでの設定手順

Share Dialogはダイレクトリンクで設定することも可能です。

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

app_idとredirect_uriが必須項目になります。
その他のパラメータはJavaScript版と同じなので、上で紹介した表を確認ください。

※上記サンプルの改行は削除してください。

Share Dialogのダイレクトリンクでシェア

【参考】 Share Dialog

まとめ

今回はFacebookシェアボタンの実装方法についてできる限り丁寧に紹介しました。

シェアボタンの実装は次の3種類で行えます。

  • 公式サイトでシェアボタンを生成して配置する。
  • ダイレクトリンクによるシェアボタンを設定・配置する。
  • Share Dialogを利用して、FacebookのAPIをフル活用する。

上記3つの中から、その時々の状況にあった利用方法を選んでもらえばいいと思います。

繰り返しになりますが、いいねボタンよりもシェアボタンのほうが拡散されやすいです。

積極的にシェアボタンを配置して、たくさんの人にサイトを見てもらえるようにしましょう!

ちなみにOGPに関しては一切触れていないので、わからない人はこちらを参考にしてください。

また、ページに配置したボタンを動的に再読み込み(リロード)したい場合は次の記事も読んでみてください。

Ajaxで動的に追加したSNSボタンを表示させる方法と、SNSボタンの再読み込みについて

2013.10.01
Facebookシェアボタン実装まとめ


イソップへのお悩み相談募集中

イソップに相談しませんか?

当ブログで紹介しているような、Web制作やフリーランスへの悩みをイソップに相談してみませんか?
回答できることがあれば記事の中でご紹介します。