【完全版】これであんたもシェア名人。【完全版】これであんたもシェア名人。Facebookシェアボタンの実装方法まとめどうも、イソップです。Facebookシェアの実装方法って何種類もあってわかりづらかったのでまとめてみました。シェアボタンはいいねボタンとどう違うのか。それから公式ボタンの作成方法やリンクでのシェア設定、JavaScriptでの設定方法をご紹介します。Dialog(中級者〜上級者向け)まとめFacebookシェアとはFacebookのシェアは、シェアしたいサイトの情報を自分と友達のタイムラインに表示させる仕組みです。勘違いしてほしくないのですが、「いいね!」とは少しだけ挙動が違います。いいねは友達のタイムラインにいいねしたことが表示されますが、自分のタイムラインには表示されません。いいねはリアクションで、シェアは共有という位置づけなので、Facebookで拡散させるにはシェアが断然効果的です!また、シェアされる情報はシェアするページのOGP情報です。ボタンの設定ではシェア内容は変更できませんのでご注意を!それではさっそく実装方法を紹介していきましょう。中には高度な内容のものもあるので、自分に合ったやりかたを選んでもらえれば幸いです。公式シェアボタン(初心者向け)公式サイトで取得できるシェアボタンです。サイト上で設定を入力すると、簡単にシェアボタンのHTMLコードを生成できます。開発者向けFacebookHTMLがわからない人はまずこのサイトでボタンを作りましょう!コード取得手順まずシェアボタンの生成ページにアクセスします。ここでは、設定項目をフォームに入力します。設定項目は以下の通りになります。シェアするページのURLを絶対パスで指定します。XFBMLバージョンとHTML5バージョンでは現在のURLが初期値。ボタンの表示レイアウトを指定します。box_count、button_count、buttonのいずれかを選択します。この項目をtrueに設定すると、シェアボタンを押した時に、ポップアップではなくモバイル用のモーダルウィンドウが表示されます。モバイルでのみ利用可能でデスクトップでは表示されません。largeとsmallの2つのサイズのボタンを選択可能です。small入力内容に問題なければ、「コードを取得」ボタンを押すとHTMLコードが表示されます。ステップ2とステップ3のところで、HTMLコードが2つ表示されているのがお分かりでしょうか。2箇所にコードを配置します。ステップ2に表示されている次のコードを、bodyの開始タグのすぐ後に貼り付けます。...次にステップ3に表示されているコードを、サイト内で配置したい箇所に貼り付けます。noreferrer">シェア</a></div>これで設定は終わりです!サイトを表示してみて、次のようにボタンが表示されていれば設定完了です。↓↓↓↓↓↓モバイルiframeって?モバイルiframeにチェックを入れると、モバイル端末でシェアボタンをタップしたときのみ、モバイルに最適化されたシェア画面を表示させることができます。別ウィンドウを作成せずモーダルウィンドウを表示するので、ユーザビリティにとても優れています。理由がなければ、モバイルiframeの項目にチェックを入れておくことをオススメします。ダイレクトリンクでのシェア設定(初心者〜中級者向け)公式のシェアボタンを使わずに、HTMLのリンク設定でシェア画面を表示させることも可能です。シェアボタンの見ためをカスタマイズしたいときがありますが、このダイレクトリンク設定を利用すると、画像やテキストでボタンを作成できます。残念ながらシェアのカウント表示はできないのでご注意ください。title="Facebookでシェア">share.phpでシェア</a>[URLエンコードしたサイトの絶対パス]にシェアしたいURLを置き換えてください。URLエンコードをしないと上手く動作しませんので、必ずURLエンコードをすることをオススメします。type=”boader”]https://wp-blog.yuhiisk.com/↓http%3A%2F%2Fblog.yuhiisk.com%2F[/aside]URLエンコードには次のサイトで簡単に変換できます。URLエンコード最終的なコードサンプルは次のとおりです。title="Facebookでシェア">share.phpでシェア</a>このコードをサイトの配置したい箇所に貼り付けます。ボタンのカスタマイズサンプルシェアボタンのデザインカスタマイズはダイレクトリンクでの設定が一番簡単でオススメです。aタグの中身を画像にするだけでシェアボタンをカスタマイズできます。Dialog(シェアダイアログ)というFacebookの仕組みを利用した実装方法です。この仕組みを利用することで、サイトの記事を自分のタイムラインや友達のタイムライン、グループに向けて投稿したり、メッセンジャーで非公開のメッセージを送信することができます。Dialogの最大の特徴は、JavaScriptでシェアを操作できる点です。JavaScriptで実装することにより、シェアが完了したかどうかやシェアされた投稿のIDを取得したりできます。Dialogを利用するのが効果的でしょう。Dialogの設定方法は、JavaScriptでの設定とダイレクトリンクの2通りがあります。SDKをサイトで読み込む必要があります。公式シェアボタンで生成したHTMLコードを思い出してください。...bodyの開始タグのすぐ後に上記のコードを貼り付けました。これがすでに貼り付けられていれば、何もする必要はありません。コードがなければ、生成ページからコードを取得・貼り付けしてください。Dialogを実装してみましょう。Dialogでこの記事をシェアid属性がbtnの要素をクリックした際に、シェアするコードです。SDKを読み込むと、グローバル変数FBが利用可能になります。FBのuiメソッドを実行することで、FacebookのAPIを利用することができます。Dialogは、methodをshareに指定するだけで最低限実装可能です。その他の詳しい設定項目は次のとおりです。アプリIDを指定します。SDKの読み込み時に指定していない場合、必須項目です。シェア完了後にリダイレクトさせるURLを指定します。ダイレクトリンクを利用する場合は必須項目です。ダイアログの表示方法を指定します。ダイレクトリンクを利用する場合、Facebookのサイトでの表示になります。SDKを使用する場合、アプリにログインしている利用者向けのモーダル「iframe」、Facebook.com上のゲームで使用される「async」、その他の場合の「popup」ウィンドウがそれぞれデフォルトとなります。モバイルウェブアプリの場合は「touch」の表示タイプが初期値になります。シェアするページのURLを指定します。シェアコンテンツに追加するハッシュタグ。シェアする文章を指定します。...});FB.uiメソッドの第2引数にはコールバック関数を設定できます。引数で渡ってくる値は次のとおりです。storyのIDが返ります。Facebookを利用してアプリにログインしていて、publish_actionsを許可したときにのみ利用できます。エラーメッセージが返ります。Facebookログインを使用してアプリにログインしているときにのみ利用できます。この値を利用してエラーハンドリングなどを行います。Dialogはダイレクトリンクで設定することも可能です。Dialogでシェア</a>app_idとredirect_uriが必須項目になります。その他のパラメータはJavaScript版と同じなので、上で紹介した表を確認ください。※上記サンプルの改行は削除してください。Dialog[/aside]まとめ今回はFacebookシェアボタンの実装方法についてできる限り丁寧に紹介しました。シェアボタンの実装は次の3種類で行えます。公式サイトでシェアボタンを生成して配置する。ダイレクトリンクによるシェアボタンを設定・配置する。Dialogを利用して、FacebookのAPIをフル活用する。上記3つの中から、その時々の状況にあった利用方法を選んでもらえばいいと思います。繰り返しになりますが、いいねボタンよりもシェアボタンのほうが拡散されやすいです。積極的にシェアボタンを配置して、たくさんの人にサイトを見てもらえるようにしましょう!ちなみにOGPに関しては一切触れていないので、わからない人はこちらを参考にしてください。ページに配置したボタンを動的に再読み込み(リロード)したい場合は次の記事も読んでみてください。Isokawa)フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。Platformを使ったWebアプリ開発が得意。Udemyのプログラミング解説の講師、writer-app.comの自主開発や上越TechMeetupの主催などを行っています。Themegraphy。