更新日：2021.11.23

facebookのシェアボタンをブログに設置する方法（読み込み速度改善版）

ブログ記事へのアクセスがfacebookと連携する事で、２倍３倍になったという話をよく耳にします。

ユーザーに役立つと思われたブログ記事は、「みんなに紹介したい！」って気持ちになるようです。

いいねボタンではなく、感想を添えられて公開範囲に限りの無いシェアボタンで、友達の友達の友達…という連鎖でブログ記事がシェア（拡散）されていくのです。

この時に、記事を拡散してくれるfacebookなどのシェアボタンが無い場合、ユーザーは記事の紹介（拡散）ができません。

この記事でわかること（目次）

感想付きで記事を紹介・拡散できるのがfacebookのシェアボタン
シェアボタン設置前にブログをfacebookアプリとして登録しよう
facebookのシェアボタンをブログに設置する方法
facebookのシェアボタンをWordPressブログに設置してみよう
いいねボタンとシェアボタンをセットで表示できる
facebookのシェアボタンで記事を感想付きで紹介して貰おう！

感想付きで記事を紹介・拡散できるのがfacebookのシェアボタン

facebookのいいねボタンは、ユーザーがいいねボタンを押してもユーザーの友達に「こういう記事があったよ」とfacebookのニュースフィードにブログ記事のアイキャッチとタイトル（リンク付）が表示されるだけで、どういう内容の記事かはあまりわかりません。

facebookの友達からは「だから？」と思われるだけに。

そんな時、facebookのシェアボタンを設置していれば、ユーザーの感想と共にブログ記事の拡散が可能になり、シェアした記事についてユーザーがどう思ったか？など、共感した理由を添えられるので、記事を紹介したユーザーにもブログ著者にも有益になります。

いいねボタンは設置しているけど、忘れがちなのが「facebookのシェアボタン」

いいねボタンよりもむしろシェアボタンを設置する方が、記事の拡散やページビューアップに繋がると感じております。

ここでは、「facebookのシェアボタンを設置する方法」を解説致します。
ブログを書いている人は要チェックの拡散ツールです。勿論、ホームページに設置するのも有効です。
※シェアボタン単体の設置方法になります。

シェアボタン設置前にブログをfacebookアプリとして登録しよう

０、まず、facebookのツールを使うにはブログをfacebook appsに登録しなくてはなりません。ブログやサイトのURLなどを登録します。（ちょっと難かしく思ってしまいますね）
※すでに登録されている方は飛ばしてOKです。

facebookログイン時、Facebook Developersページを開き、「Create a New App」をクリックします。すると、「新しいアプリを作成」という画面が表示されるので、”Display Name（サイト名）”と”カテゴリを選択”を入力して「アプリケーションを作成」ボタンを押します。セキュリティチェック画面を挟んでアプリ登録は完了です。

アプリ名（サイト名）の下に「App ID」が表示されているので、メモしておきましょう。
左サイドメニューの「Settings」から「+Add Platform」にて”website”を選択し、サイトやブログのURLを入力する事もお忘れなく。あー凄く面倒くさいですね。わかれば簡単なのです。

facebookのシェアボタンをブログに設置する方法

準備を終え、いよいよ本題。

１、シェアボタンFacebook developersページを開きます。
facebookのシェアボタン設定場所
シェアボタンをサイトやブログに設置する用のタグを生成するページです。
※記事ページ個々に挿入するコードは別ですので、下の方で紹介しております。

２、「URL to share」という入力フォームにシェアボタンを設置するブログのURLを入力します。「width」は入力しなくてもよいです。ボタン設置場所の横幅の事です。

３、「Get Code」ボタンを押すと、「Your Plugin Code」という画面が表示されます。
コードがちんぷんかんぷんな人にはストレスのかかる画面ですが、２つ３つのステップがありますので、忍耐強く進めていきましょう。

３－１、「HTML5」か「XFBML」のどちらかを選択します。ブログがHTML5で作られていたら「HTML5」を選択。
「using this app」に登録したアプリ名（ブログ名）が表示されている事を確認しましょう。

３－２、ご自分のブログのHTMLが編集できる事が前提なのですが、タグの後に下記コードを挿入します。

<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.async = true;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=◯◯◯◯◯◯◯◯◯◯&version=v2.0\";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

※挿入場所はボタン設置場所の前でも可。
※いいねボタン設置の時はこのコードはありません。

《シェアボタンの読み込み速度アップ！》
上記に追記しておりますが、実はシェアボタンを設置するとページの読み込み速度が遅くなります。そこで、読み込み速度の改善をするスクリプトを１行追記します。

js.async = true;

非同期処理設定というのですが、できるだけ追記しておきましょう。

appIdの数値は上で紹介したfacebookアプリのIDが表示されます。
アプリを複数作成していても、「using this app」に表示されているアプリを変更するだけでappIdも自動で変わります。

《シェアボタンを設置する場所にコードを挿入》
● HTML5の場合

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/"></div>

● HTML5じゃない場合
HTMLソースの一番上の<html>を下記コードと入替えます。

<html xmlns:fb="https://ogp.me/ns/fb#">

そして、シェアボタンを設置する場所に下記コードを挿入。

<fb:share-button href="https://◯◯◯◯◯.com/"></fb:share-button>

《シェアボタンのデザインの変更》
新しいfacebookシェアボタン生成システムには、以前はあった「ボタンのデザイン」の設定フォームがありません。ですので、ボタン設置用のコードに下記を追記して下さい。

data-type="button_count"

<fb:share-button data-type="button_count" href="https://◯◯◯◯◯.com/"></fb:share-button>

と、なります。

ボタンのデザインは４種類あります。
“button_count”, “box_count（バルーン型）”, “button”, or “icon”。お忘れなく。

以上が、facebookシェアボタン設置の流れになります。

HTML5のサイトやブログの場合は２工程ですが、HTML5以前のサイトやブログは３工程になります。いつfacebookがHTML５以降のサイトやブログを切り捨てるかわかりませんので、早めにHTML5に変更した方が良いかも知れません。

facebookのシェアボタンをWordPressブログに設置してみよう

上記の方法では、ブログやサイトに対してのシェアボタン設置でしたが、ブログには記事ページがあります。
各記事に対してシェアボタンを設置する場合は、記事のURLを利用しなければなりません。
ですので、下記にWordPressを使用したブログ記事個々のシェアボタンのコードを紹介しますので、WordPressを利用している方はこちらをご利用下さい。

<fb:share-button data-type="button_count" href="<?php the_permalink(); ?>"></fb:share-button>

他のCMSを利用している方は、CMSそれぞれの個別ページURLを吐き出すテンプレートタグをご利用下さい。

いいねボタンとシェアボタンをセットで表示できる

シェアボタン単体の設置方法をつらつら書いてきましたが、実はいいねボタンとシェアボタンはセットで表示できます（それを先にーーー？）。

いいねボタン生成ページの「Action Type」というフォームの下に”include Share Button”とありますので、チェックをすればいいねボタンの右側にシェアボタンを表示する事ができるので覚えておきましょう。

facebookのシェアボタンで記事を感想付きで紹介して貰おう！

紹介して貰えるようなブログ記事を書かなければシェアボタンは押されない訳ですけど、今や検索エンジンからの流入（アクセス）よりfacebookなどのSNSからの流入の方が多くなっているので、facebookのいいねボタンよりも感想を添えられるシェアボタンを設置していく方が有益です。

facebookは、スマホのSIMをラインモに変更すると通信し放題（カウントフリー）で利用できます。月々のスマホ代を大幅節約できるので、気になる方は下記記事をご覧ください。

重要なのに忘れがちなfacebookのシェアボタンの設置方法でした。