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が正常に動作しているかを確認していきます。

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

表示されているシェアボタンをクリックして、【Facebookでシェア】が出てくることを確認します。【Facebookでシェア】が表示されたら完了です。また、指定したリンクが間違っていないかも確認しておくことをおすすめします。

シェア画面右下の"Facebookに投稿"をクリックして、Facebookで指定のURLを共有できていれば問題なく設置できています。

正しく共有できているかを試験的に確認したい場合は、プライバシー設定を"非公開"にすることで、自分だけが閲覧できる設定になるのでおすすめです。

Facebook for Developersサイトからタグを生成するよりも簡単な方法で設置したい方に、より簡単な方法を解説します。ただし、HTMLやCSSの初心者の方には少し難しく感じるかもしれません。サンプルコードも後半にありますので、いろいろ試してみてください。

Facebook For Developersで生成したタグは<iframe>タグでした。ここでは、<a>タグ(anchorタグ)を使用してシェアボタンを作成していきます。

<a>タグの「a」とは、「アンカー(anchor）」の略称です。主に、リンクを指定するhref属性や、リンク対象となるファイルとの関係性を指定するrel属性を持ちます。

href属性にはリンク先のURLを指定します。他にもtarget属性を指定することで、リンクをクリックした場合に新しいウィンドウで開くことも可能です。

今回は、href属性だけを使用しています。他にも使用したい属性がある場合は都度追加してください。

設置方法は、<a>タグのhrefの後ろに、リンク先のURLを指定すると、<a></a>で囲われた「Facebook」の文字がハイパーリンクになります。<a>タグでシェアボタンを設置する場合は、図のような文法で設置します。[https://applica.info/]の部分を、共有したいWebページのURLに置き換えて、設置したい場所に貼り付けてください。

実際に<a>タグで設置した状態です。「facebook」の文字にアンダーラインが引かれ、ハイパーリンクになっていることがわかります。<a>タグで共有したいリンクをシェアボタンとして設置すると、ハイパーリンクとなるため、「Facebook」の文字がシェアボタンの役割を果たします。

ここにオリジナルのアイコンやボタンを付けることで、さらにオリジナリティあふれるシェアボタンを作成できます。

<a>タグで囲うだけでは、「Facebook」という文字情報にリンクが付与されるだけになります。このままでも機能的にはシェアボタンの役割を果たしていますが、さらにこのリンクにアイコンや画像を使用して、オリジナルのシェアボタンを作成していきましょう。

Facebookで公式に用意されている、Facebook For Developersの埋め込みのボタンでは、設置したいWebページのスタイルに合っていない場合や、希望通りのデザインを作成できない場合があります。そこで、自身でオリジナルのシェアボタンを作成します。

設置したいWebサイトやブログなどとスタイルを合わせた、オリジナルのシェアボタンを作成して設置できる方法をご紹介します。お好みのスタイルのシェアボタンを作成すると、設置ページとデザインを統一できます。

まず<a>タグで作成したシェアリンクに、シェアボタンとして使用するアイコンの情報を付与することで、オリジナルのシェアボタンを作成します。

また、CSSを用いてアイコンやデザインをコーディングすることで設置したいWebページのデザインに合わせたオリジナルのボタンが設置可能になります。設置方法はいくつかありますが、今回は設置が簡単で使いやすい方法をご紹介します。

自身でアイコンを作成したり、CSSでコーディングするのが難しい場合は、アイコンの種類が豊富なFont Awesomeがおすすめです。

Font Awesomeでは、アイコンを文字として扱えるので色やサイズなどをカスタマイズすることができるので、カスタマイズの幅も広がります。Font Awesomeのページはすべて英語で記載されていますが、使い方がわかれば問題ありません。

下記のリンクから公式サイトを開き、"Start Using Free"をクリックして無料でアイコンを設置します。"Get More with Pro"は有料版となります。

"Start Using Free"をクリックすると、Font Awesomeを使用するための<link>タグが表示されます。<link>タグはコピーしてHTMLに追記します。<link>タグを使用しないとFont Awesomeのアイコンが正しく表示されないことがあるので、注意してください。

続いて、"Search icons..."に検索したいキーワードを入力します。今回は「Facebook」で検索を行いました。表示された検索結果の中から、設置したいアイコンを選んでクリックすると上記のようなページに移動します。アイコンや、アイコンのサイズの見本などが表示されます。

選んだアイコンで問題がなければ、"Start Using This Icon"をクリックします。上記のようなポップアップが表示されるので、"FA Free"を選択した状態で、"Next→"をクリックします。"FA Pro"は有料版の利用になります。

無料版のタグのスタイリング方法が表示されます。この表示されているスタイリングを使って、アイコンを設置します。基本的には、<a>タグの中に<i>タグを入れ子にすることで設置が可能です。さらにさらに<span>タグを追加することで、カスタマイズの幅が広がります。

<span>タグを使用する場合は、<span><i></i></span>のような入れ子となるよう記載にします。<i>タグを使用する場合、[<i class="fab fa-facebook-square fa-2x" style="color: #339af0;"></i>]を例に各セレクタを説明します。classの後ろには、アイコン名（ここでは [fa-facebook-swuare]）を指定することで、使用したいアイコンの読み込みができます。

「fab」は消さないでください。また、[fa-2x]はサイズの指定、[style="color: #339af0;]はアイコンの色を指定します。<span>タグを使用する場合も、設定する項目は同様なものになるので、<i>タグのみで実装可能です。

See the Pen yGbgbq by kasumi (@yukimi) on CodePen.

これまでの実装も含めて、見比べてみましょう。実際にFontAwesomeで実装すると、上記の３つ目のような形になります。記述するコードも少なく、シンプルにまとまります。共有したいURLに変更があっても、hrel属性を書き換えるだけで良いので修正も簡単です。

先述したように<span>タグを使用したり、セレクタを増やすことで幅広いカスタマイズが可能になりますのでぜひ挑戦してみてください。その他の2つのコードは、IFrame使用時、<a>タグ使用時のものです。実際の挙動も含めて見比べてみてください。

<a>タグとアイコン画像を使用してオリジナルのシェアボタンを作ることで、好みのカスタマイズを加えられます。しかし、シェア数を表示するような特殊機能を使用したい場合は、冒頭に説明したFacebook For Developersで生成されるコードを使用する方法を採用することをおすすめします。

オリジナルのFacebookシェアボタンを作成するには、慣れていない方からすると時間のかかる作業であったり、難易度の高い作業に思えるかもしれません。しかし、時間を掛けてでもオリジナルのシェアボタンを設置することは以下のようなメリットがあります。

最近では、様々なデザインを配布しているサイトがあります。国内外問わず、デザイン性の高いアイコンやプラグインはインターネット上に溢れています。その中から設置したいWebページのデザインにマッチするものや、好みのものを探すのは手間も時間もかかってしまいます。

しかし、オリジナルでボタンを作成する方法を用いることで、オリジナルのシェアボタンを思い通りに作成できます。ただし、使用するアイコン画像の用意、またはCSSとHTMLの記述が理解できていることが前提となります。

Facebook For Developersを使用したシェアボタンは、Facebook公式サイトのJava Scriptを使用します。このJava Scriptは、公式サイトのシェアボタンを利用するすべてのユーザーが設置しています。そのため、時間帯や、何かのきっかけで読み込みが遅くなる場合があります。

しかし、オリジナルのシェアボタンは、自身のHTMLやCSSまたは画像データを読み込むため、公式サイトへのアクセスの混雑を回避できます。そのため、ページの読み込み速度も速くなります。

オリジナルのシェアボタンは、アイコンの作成やCSSでのコーディングを自分自身で行います。そのため、様々な方法でカスタマイズが可能になります。細部までこだわりたい方には特におすすめです。また、細部までこだわって作成すると手間と時間はかかりますが、1度作っておくと、URLを変更するだけで他のページでも使用できるようになります。

続いては、Facebookのニュースフィードに投稿されている記事で、"シェアする"が表示されない場合の原因をご説明します。シェアボタンが表示されていないと、その投稿を共有できません。

通常であれば、図のようにシェアボタンが表示されています。多くの投稿記事には、"いいね"や"コメント"の右端に"シェアする"のボタンが表示されています。このような記事の場合は、ニュースフィードに投稿を共有できます。

しかし、上記のように、"シェアする"が表示されていない場合があります。このような場合では、この記事を共有できません。表示されない原因としては以下の点があげられます。

考えられる原因の１つとして、エラーや不具合が発生している場合があります。この場合は、不具合が解消されるまでは自力で解消することはできません。しばらく待ってからリトライするか、ブラウザやアプリ上で画面を更新してみましょう。

必ずしも、エラーや不具合、バグなどによって表示されていないとは限りません。シェアボタンの表示/非表示は設定によって変わることがあります。

次の原因としては、投稿者がシェアボタンを表示しないに設定している場合です。投稿をシェアしたい場合は、公開範囲を"公開"に設定して投稿する必要があります。自分自身で投稿した記事ではない場合は、投稿者が設定を変更しない限りは共有できません。

Facebookのニュースフィードに投稿するとき、別のサイトへのリンクを共有したい場合に、リンクがうまくシェアできないことがあります。そのようなときの対処法を4つご紹介します。投稿するときに記事の中でリンクをシェアできない場合は以下の方法をお試しください。

以下の方法を試してみても表示できない場合は内部エラーの可能性もあります。その場合はしばらく待ってからリトライしてみましょう。

•  FacebookアプリケーションまたはスマートフォンやiPhoneを再起動する

•  Facebookアプリケーションやスマートフォン本体のOSを最新バージョンにアップデートする

•  Facebookアプリを再インストールする

•  Wi-Fiやインターネット環境がきちんと通信できているかを確認する

ブログやWebページを運営していく上で、シェアボタンは必要不可欠です。シェアボタンを使って、多くの人に拡散してもらうことで、PV数（ページビュー）を増やすことに繋がり非常に効果的です。また、オリジナルのシェアボタンなら、自身のページにマッチするデザインのシェアボタンを設置できます。

最初はボタンの作成に時間がかかってしまうかもしれません。しかし、1度作成しておけば、今後は共有したいURLの指定を変更するだけで別のページや、新たに開設したブログ等でも簡単に設置できるようになります。

開設しているブログやWebページに合わせたデザイン、希望とマッチする機能を搭載したオリジナルのシェアボタンを設置して、Facebookで拡散しましょう。