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

ブログやニュースサイトなどの記事の周囲にFacebookのシェアボタンが設置されているのはご存知でしょうか。PV数を稼ぐために、シェアボタンの設置は必要不可欠となってきています。今回は、Facebookのシェアボタンの設置方法を解説いたします。

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

目次

  1. 1Facebookのシェアボタン設置方法
  2. Facebook for Developersのサイトにアクセスする
  3. ボタンを設置したいサイトのURLを入力してコードを取得
  4. 【IFrame】をクリックし、ソースをコピーする
  5. Facebookのシェアボタンが表示されるか確認する
  6. 2Facebookのシェアボタンを簡単に設置したい場合は?
  7. aタグで置くだけ
  8. 3Facebookオリジナルアイコンの共有ボタンの作成方法
  9. aタグでFacebookシェアボタンを作る
  10. 使いやすさを求めるなら【Fontawesome】がおすすめ!
  11. 4オリジナルのFacebookシェアボタンを設置するメリット
  12. 自分の思い通りのボタンが作れる
  13. ページの読み込み速度が速い
  14. 細かいカスタマイズが可能になる
  15. 5Facebookの投稿でシェアボタンがない/表示されない原因は?
  16. エラーや不具合など
  17. シェアボタンが非表示に設定されている
  18. 6Facebookでリンクがシェアできない時の対処法は?
  19. シェアできない時の4つの対処法
  20. 7Facebookのシェアボタンを設置して拡散しよう!
  21. Facebookの記事が気になった方にはこちらもおすすめ!

Facebookのシェアボタン設置方法

シェアボタン

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

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

Facebook for Developersのサイトにアクセスする

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

FacebookForDevelopersサイト内容

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

シェアボタン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

ボタンを設置したいサイトのURLを入力してコードを取得

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

シェアしたいURLを入力する

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

シェアボタンをカスタマイズ

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

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

シェア数の表示/非表示やボタンのサイズなど、設置したいデザインとなるようにボタンをカスタマイズしましょう。

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

コードを取得

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

【IFrame】をクリックし、ソースをコピーする

取得したコード

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

IFrame

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

シェアボタンを表示させたい場所に貼りつける

シェアボタンを設置

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

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

Facebookのシェアボタンが表示されるか確認する

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

表示を確認

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

【Facebookでシェア】が出てきたら完了

Facebookでシェアを表示

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

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

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

Facebookのシェアボタンを簡単に設置したい場合は?

タグ

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

aタグで置くだけ

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

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

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

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

aタグの追加

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

aタグでの実装モデル

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

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

Facebookオリジナルアイコンの共有ボタンの作成方法

SNSのアイコン

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

aタグでFacebookシェアボタンを作る

モニター

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

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

デザインに合わせてボタン内のアイコンを入力する

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

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

使いやすさを求めるなら【Fontawesome】がおすすめ!

FontAwesomeのスクリーンショット

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

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

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

Font Awesome

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

facebookの検索結果

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

FontAwesomeの使用方法選択画面

選んだアイコンで問題がなければ、"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で実装すると、上記の3つ目のような形になります。記述するコードも少なく、シンプルにまとまります。共有したいURLに変更があっても、hrel属性を書き換えるだけで良いので修正も簡単です。

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

機能面で充実させたい場合は?

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

オリジナルのFacebookシェアボタンを設置するメリット

女性の後姿

出典: https://girlydrop.com/

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

自分の思い通りのボタンが作れる

様々なボタン

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

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

ページの読み込み速度が速い

パソコンとネットワーク

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

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

細かいカスタマイズが可能になる

スマートフォンにふれる指

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

Facebookの投稿でシェアボタンがない/表示されない原因は?

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

シェアボタンの表示

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

シェアボタンの非表示

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

エラーや不具合など

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

シェアボタンが非表示に設定されている

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

公開範囲設定

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

Facebookでリンクがシェアできない時の対処法は?

ページが見つからないエラー表示

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

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

シェアできない時の4つの対処法

エラーの対処法イメージ

  •  FacebookアプリケーションまたはスマートフォンやiPhoneを再起動する
使用中の端末のアプリケーションや端末本体を再起動すると、不具合が解消されることがあります。原始的な方法ですが、最も単純な方法ですのでまずは試してみましょう。
 
  •  Facebookアプリケーションやスマートフォン本体のOSを最新バージョンにアップデートする
インストールして使用するFacebookのアプリケーションやスマートフォンのOSの動作には、各アプリケーションのバージョン情報が密接に関わり合っています。そのため、両者を最新バージョンにすることで、エラーが解消されることがあります。
 
  •  Facebookアプリを再インストールする
Facebookアプリが何らかの原因によって破損している場合があります。アプリケーションそのものを再インストールすることで不具合が解消する可能性があります。
 
  •  Wi-Fiやインターネット環境がきちんと通信できているかを確認する
インターネットの通信環境が悪い場合は、リンク先の情報を取得できずリンクが共有できない可能性があります。Wi-Fiやインターネット回線など環境を確認してみましょう。また、共有したいURLに間違いがないのかも確認してみましょう。

Facebookのシェアボタンを設置して拡散しよう!

シェアしよう

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

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

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

Facebookの記事が気になった方にはこちらもおすすめ!

ThumbFacebookのシェアするとは?シェアの種類や違い・投稿の仕方を解説!
Facebookはプライベートからビジネスシーンまで使われているSNSですが、そのFaceb...
ThumbFacebookの投稿にリンクを貼る!シェアした記事の画像が異なる対処法!
情報を共有する上で非常に便利なFacebookのリンクをシェアする方法をご紹介します。リンク...
ThumbFacebookのイベントページ作成/編集方法!招待や告知シェアで集客しよう!
本記事ではFacebookのイベントページの利用方法をご紹介します。イベントページを活用する...
ThumbFacebookで自分のURLの確認/変更方法!自分でアドレスを設定する!
Facebookで自分のアカウントURLを確認する方法をスマホ、PCに分けて紹介。自分のアド...
ThumbFacebookの公式ロゴ/アイコンのダウンロード方法!いいねマーク等の素材は?
Facebookの公式ロゴマークに使われているアイコンが利用できるのはご存知な方は多くないで...

関連するまとめ

Noimage
この記事のライター
kasumi