行き着く先はあんこ

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

blogger-snsbutton-facebook

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

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

スポンサーリンク

まずは準備

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

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

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

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

<body>

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

これで準備は終了です。

シェアボタンのコード

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

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

Share Button – Facebook

シェアボタンだけ

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='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.cononicalUrl' rel='nofollow' target='_blank'><img src='画像のurl'/></a>

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

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

さいごに

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

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

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

では!

スポンサーリンク

スポンサーリンク

コメントを残す