行き着く先はあんこ

BloggerでSNSボタン設置のあれこれ[Facebook編]

2015.08.19

スポンサーリンク

「Blogger で SNS ボタン設置のあれこれ」第二弾。今回は Facebook 編です。Blogger にシェアボタンを設置する方法を紹介します。

今回も基本的には、コピペで問題ありません。

まずは準備

最初に「テンプレート」→「HTML の編集」から「<body>」を見つけます。検索はCntrolとFの同時押し。

「<body>」の次の行に下のコードをコピペします。

<!--facebookのコード-->
<div id="fb-root">
  <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.src = '//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.4';
      fjs.parentNode.insertBefore(js, fjs);
    })(document, 'script', 'facebook-jssdk');
  </script>
</div>

イメージはこんな感じです。

<body>
  <!--facebookのコード-->
  <div id="fb-root">
    <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.src = '//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.4';
        fjs.parentNode.insertBefore(js, fjs);
      })(document, 'script', 'facebook-jssdk');
    </script>
  </div>
</body>

これで準備は終了です。

シェアボタンのコード

では、Facebook のシェアボタンのコードを紹介していきます。「テンプレート」→「HTML の編集」からシェアボタンを表示させたいところに以下のコードをコピペすると使えます。

ここでのコードはすべて Blogger でしか動作しないので気をつけてください。

シェアボタンだけ

facebookのシェアボタンだけの場合

<div
  class="fb-share-button"
  expre:data-href="data:blog.canonicalUrl"
  data-layout="button"
></div>

上にシェア数を表示

facebookのシェアボタンの上にシェア数が表示される場合

<div
  class="fb-share-button"
  expre:data-href="data:blog.canonicalUrl"
  data-layout="box_count"
></div>

右にシェア数を表示

facebookのシェアボタンの右にシェア数が表示される場合

<div
  class="fb-share-button"
  expre:data-href="data:blog.canonicalUrl"
  data-layout="button_count"
></div>

オリジナルシェアボタン

<a
  class="facebook"
  expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:post.cononicalUrl'
  rel="nofollow"
  target="_blank"
  ><img src="画像のurl"
/></a>

画像の url に使いたい画像の url を入力すると、その画像がシェアボタンになります。

もちろん画像を使わず、文字と css でボタンを作ることもできます。

さいごに

今回は Facebook のシェアボタンの設置方法を紹介しました。

Facebook には「シェアボタン」と「いいねボタン」の 2 つあり、「シェアボタン」は拡散されますが「いいねボタン」は拡散できないという違いがあります。

そのためブログに設置するなら「シェアボタン」のほうがおすすめではあります。気になったらぜひとも「シェアボタン」を設置してみてください！

では！

スポンサーリンク

BloggerでSNSボタン設置のあれこれ[Facebook編]
https://ikisakianco.com/posts/2015/08/blogger-snsbutton-facebook/

公開日

カテゴリー
website

スポンサーリンク