Blogger関連の良いもの見つけた：シェアボタン編

　 Tweet 　

シェア

　

Blogger使ってますか！

さて今回は、Bloggerを使っていて、記事の拡散方法として、シェアボタンが足りないと思ったので、シェアボタンを設定する方法をググりました。

その方法をご紹介いたします

参考サイト様

今回、シェアボタンを設定するにあたり、参考にさせていただいたサイト様

• SNSのシェアボタンを設置する方法とアイコンの利用規約を紹介！
• 自分のブログに「○○users」を表示する
• Blogger記事に「はてなブックマーク」ボタンを設置する方法
  

公式サイト様

シェアボタンを生成するために必要な公式サイト様。

今回はコピペで出来るように具体例を提供いたしますが、もし、自分で作りたい場合は以下のサイトで生成してください。

• Facebook
• LINEで送るボタン
• はてなブックマークボタン 
• Twitter
  

設定方法

はてなブックマークの公式サイト

設定はそれぞれにあるソースを毎回ブログのHTMLに記述することで、シェアボタンが現れます。

「Twitter」と「はてなブックマーク」はHTMLを貼るだけで良かったのです。

 

ただ、「Facebook」と「LINE」についてはURLを入れて毎回HTMLを生成する必要があったので、JavaScriptでURLを自動生成するようにしました。

※  別に良い方法をご存じの方は教えてください。。。お願いします。。。

 

 

 

具体例

面倒くさいと思った人は、以下のソースをそのままコピペしてもらえればと思います。

私がほしいと思ったシェアボタンが以下なので、別途ほしいと思った人が居たらコメントしてくだされば、探します。

 

Twitter

　Tweet を表示する方法

<!--twitter-->
<script async="async" charset="utf-8" src="https://b.st-hatena.com/js/bookmark_button.js" type="text/javascript"></script>
　<a class="twitter-share-button" data-show-count="false" href="https://twitter.com/share?ref_src=twsrc%5Etfw">Tweet</a>
<script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>

 

 

はてなブックマーク

を表示する方法

<!--はてなブックマーク-->
<a class="hatena-bookmark-button" data-hatena-bookmark-lang="ja" data-hatena-bookmark-layout="basic-label-counter" href="https://b.hatena.ne.jp/entry/" title="このエントリーをはてなブックマークに追加">
<img alt="このエントリーをはてなブックマークに追加" height="20" src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png" style="border: medium none;" width="20" />
</a>

 

 

Facebook

シェア

を表示する方法

<!--Facebook-->
<div class="fb-share-button" data-href="https://it-employee-step.blogspot.com/" data-layout="button" data-size="small" name="facebook_share">
  <a class="fb-xfbml-parse-ignore" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fit-employee-step.blogspot.com%2F&amp;src=sdkpreparse" target="_blank">シェア</a>
</div>

<script>
  var facebook_targets = document.getElementsByName("facebook_share");
  for (var facebook_target in facebook_targets) {
    facebook_target.setAttribute("data-href", location.href);
  }
</script>

 

for分のところは記事の最終行に書いておけばOKです

 

 

LINE

を表示する方法

<!--Line-->
<div class="line-it-button" data-color="default" data-count="false" data-lang="ja" data-size="small" data-type="share-a" data-url="https://it-employee-step.blogspot.com/" data-ver="3" name="line_share" style="display: none;"></div>
<script async="async" defer="defer" src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js"></script>

<script>
  var line_targets = document.getElementsByName("line_share");
  for (var line_target in line_targets) {
    line_target.setAttribute("data-url", location.href);
  }
</script>

 

for分のところは記事の最終行に書いておけばOKです

 

テンプレート設定

上記設定は、いつも設定するものになるので、テンプレートとして設定しておきます。

 

[設定]-[投稿]-[投稿テンプレート（省略可）] で設定することが可能です。

一応私のテンプレートを以下に置いておきます。

<!--more-->は今度紹介するBloggerで、TOPの投稿数のためにいれてますので、不要であれば削除してください

<div style="text-align: left;"><h1>タイトル</h1></div>
<!--more-->
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<!--SNS連携-->
<!--はてな-->
<a class="hatena-bookmark-button" data-hatena-bookmark-lang="ja" data-hatena-bookmark-layout="basic-label-counter" href="https://b.hatena.ne.jp/entry/" title="このエントリーをはてなブックマークに追加"><img alt="このエントリーをはてなブックマークに追加" height="20" src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png" style="border: medium none;" width="20" /></a>
　
<!--twitter-->
<script async="async" charset="utf-8" src="https://b.st-hatena.com/js/bookmark_button.js" type="text/javascript"></script><a class="twitter-share-button" data-show-count="false" href="https://twitter.com/share?ref_src=twsrc%5Etfw">Tweet</a><script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>
　
<!--Facebook-->
<div class="fb-share-button" data-href="https://it-employee-step.blogspot.com/" data-layout="button" data-size="small" name="facebook_share"><a class="fb-xfbml-parse-ignore" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fit-employee-step.blogspot.com%2F&amp;src=sdkpreparse" target="_blank">シェア</a></div>
　
<!--Line-->
<div class="line-it-button" data-color="default" data-count="false" data-lang="ja" data-size="small" data-type="share-a" data-url="https://it-employee-step.blogspot.com/" data-ver="3" name="line_share" style="display: none;"></div><script async="async" defer="defer" src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js"></script>
<!--SNS連携-->
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<div style="text-align: left;">本文</div>
<div style="text-align: left;"></div>
<div style="text-align: left;"></div>
<!--SNS連携-->
<!--はてな-->
<a class="hatena-bookmark-button" data-hatena-bookmark-lang="ja" data-hatena-bookmark-layout="basic-label-counter" href="https://b.hatena.ne.jp/entry/" title="このエントリーをはてなブックマークに追加"><img alt="このエントリーをはてなブックマークに追加" height="20" src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png" style="border: medium none;" width="20" /></a>
　
<!--twitter-->
<script async="async" charset="utf-8" src="https://b.st-hatena.com/js/bookmark_button.js" type="text/javascript"></script><a class="twitter-share-button" data-show-count="false" href="https://twitter.com/share?ref_src=twsrc%5Etfw">Tweet</a><script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>
　
<!--Facebook-->
<div class="fb-share-button" data-href="https://it-employee-step.blogspot.com/" data-layout="button" data-size="small" name="facebook_share"><a class="fb-xfbml-parse-ignore" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fit-employee-step.blogspot.com%2F&amp;src=sdkpreparse" target="_blank">シェア</a></div>
　
<!--Line-->
<div class="line-it-button" data-color="default" data-count="false" data-lang="ja" data-size="small" data-type="share-a" data-url="https://it-employee-step.blogspot.com/" data-ver="3" name="line_share" style="display: none;"></div><script async="async" defer="defer" src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js"></script>

<script>
  var facebook_targets = document.getElementsByName("facebook_share");
  for (var facebook_target in facebook_targets) {
    facebook_target.setAttribute("data-href", location.href);
  }
</script>
<script>
  var line_targets = document.getElementsByName("line_share");
  for (var line_target in line_targets) {
    line_target.setAttribute("data-url", location.href);
  }
</script>
<!--SNS連携-->

 

まとめ

今回は、Bloggerにシェアボタンを入れる方法をご紹介しました。

シェアボタンはすでに用意されているものがありますが、はてなブックマークなど、欲しいものがなかったので、追加した形になります。

 

 

　 Tweet 　

シェア