Facebookのシェアボタン設置方法！オリジナルアイコンの共有ボタンを作る

最近では、ブログやニュースサイトなどで該当記事を1クリック（または1タップ）でSNSに共有できる、画像のようなシェアボタン群の設置は必要不可欠となってきました。購読者に様々なSNSで共有してもらうことで、PV（ページビュー）数を稼ぐことにも繋がります。

様々なSNSがある中で、今回はFacebookへのシェアを行うシェアボタンを設置する方法を解説していきます。

Facebook for Developersは、Facebook公式の開発者向け専用ページです。開発者向けというページ名だけを見ると、難しそうな印象があるかもしれませんが、操作方法は意外に簡単です。

まずは、Facebook for Developersにアクセスします。下記のURLをクリックしてDevelopersページに移動してください。表示されたページの少し下の方に手順とシェアボタン構成ツールが表示されます。シェアボタン構成ツールを使用して、シェアボタンを作成していきます。

Facebook for Developersサイトに移動したら、設置方法はシェアボタン構成ツールにURLを入力して、ボタンをカスタマイズするだけです。詳しい方法を順を追って説明していきます。

まずは、Facebookで共有してほしい記事や、共有したいページのURLをコピーしておきます。コピーしたURLを、"シェアするURL"のテキストボックスに貼り付けます。今回はサンプルとしてapplicaのWebページのURLを入力しています。

次に、シェアボタンのデザインを決めます。デザインを変更できるのは２箇所だけですが、うまく組み合わせてお好みのサイズやデザインになるものを選びましょう。各コンボボックスでは以下のような設定が可能です。
 

• "レイアウト"のコンボボックス　：設置したいデザインを選択します。
• "ボタンサイズ"のコンボボックス：設置するボタンのサイズを指定します。

"モバイルIframe"のチェックボックスは、モバイルページ（スマートフォン向けページ）において、シェアダイアログを表示するかどうかを設定します。モバイルページでもシェア画面をダイアログで表示させたい場合はチェックを入れておきましょう。

ここまでの入力が完了したら、シェアするURLに間違いがないことを確認して、"コードを取得"をクリックします。シェアボタンのソースコードが画面上に表示され、コードが取得できます。表示された画面のままでは別のコードとなっているので、IFrameをコピーする方法を次で説明いたします。

"コードを取得"をクリックすると、図のような"JavaScriptSDK" "IFrame"と上部に書かれたソースコードがダイアログ画面で表示されます。開いてすぐは、"Java Script SDK"が表示されています。"IFrame"は表示されていないので、"IFrame"をクリックしてページを切り替えます。

こちらが"IFrame"を開いた状態です。グレーの枠内に書かれている、<iframe>タグで囲われている部分をコピーします。コードをコピーしたあとは画面は閉じてしまって問題ありません。閉じることに不安がある方は、テキストパッド等にバックアップしておくと安心です。

IFrame(インラインフレーム)は、<iframe>タグで囲われています。コピーしたIFrameの内容を、シェアボタンを設置したい場所に貼り付けます。図の右側が実際に<iframe>のコードが動作しているプレビューになります。IFrameを貼り付けるだけで簡単にシェアボタンを設置できました。

<iframe>タグの「iframe」とは、「インラインフレーム（inline frame）」を略したものです。<iframe>を使用することで、画面を分割したり分割した中にさらに文章を追加したり、独立したフレームを作成したり等、使い方は様々です。

Facebook For Developersから取得して設置したIFrameが正常に動作しているかを確認していきます。

シェアボタンの設置が完了したら、実際に表示されるかを確認します。設置したページにアクセスして、シェアボタンが表示されていることを確認します。今回はサンプルとしてページにシェアボタンのみを設置しているので画面が簡素になっています。実際には、設置したい場所に正しく表示されていることを確認してください。