今更のシェアボタン設置 blogger編 その２

こんにちは。
片山です。

こんなシェアボタン設置したい。

あるあるよくみるこんなのあるよねー

設置したいシェアサービスのボタン仕様の確認

• Twitter
• Facebook
• Google+
• はてなブックマーク
• Pocket

だいたいどのサービスの<a>や<div>からはじまるタグのものと、<script>タグで構成されている。

参考にしたこちらのサイト にあるようにまず部品をコードを作成。

<b:includable id='shareButtons2' var='post'>
  <!-- twitter -->
  <span class='goog-inline-block sbtn sharebutton_twitter'>
    <a class='twitter-share-button' data-lang='ja' data-via='norikingsun' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
  </span>
  <!-- facebook -->
  <span class='goog-inline-block sbtn sharebutton_facebook'>
    <div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='450' expr:data-href='data:post.url'/>
  </span>
  <!-- google +1 -->
  <span class='goog-inline-block sbtn sharebutton_plusone'>
   <div class='g-plusone' data-size='medium' expr:data-href='data:post.url' expr:data-title='data:post.title'/>
  </span>
  <!-- hatena blog -->
  <span class='goog-inline-block sbtn sharebutton_hatebu'>
    <a class='hatena-bookmark-button' data-hatena-bookmark-lang='ja' data-hatena-bookmark-layout='standard-balloon' expr:href='data:post.url' href='http://b.hatena.ne.jp/entry/' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only@2x.png' style='border: none;' width='20'/></a>
  </span>
  <!-- pocket -->
  <span class='goog-inline-block sbtn sharebutton_pocket'>
   <a class='pocket-btn' data-lang='en' data-pocket-count='horizontal' data-pocket-label='pocket'/>
  </span>
</b:includable>

これを

<b:includable id='shareButtons' var='post'>...</b:includable>

の次の行に挿入する。

さらにスクリプトの類を
</body>タグの直前に挿入する。

  <script async='async' src='https://apis.google.com/js/platform.js'>
    {lang: &#39;ja&#39;}
  </script>
  <script async='async' id='facebook-jssdk' src='//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.0'/>
  <script async='async' id='twitter-wjs' src='//platform.twitter.com/widgets.js'/>
  <script async='async' src='http://b.st-hatena.com/js/bookmark_button.js'/>
  <script type='text/javascript'>!function(d,i){if(!d.getElementById(i)){var j=d.createElement(&quot;script&quot;);j.id=i;j.src=&quot;https://widgets.getpocket.com/v1/j/btn.js?v=1&quot;;var w=d.getElementById(i);d.body.appendChild(j);}}(document,&quot;pocket-btn-js&quot;);</script>

async='async' の書き方も <script src="a.js" async></script>と書くとbloggerではエラーになってしまうので<script src="a.js" async='async'></script>と書き換えた。

参考にしたこちらのサイト にはjquery.min.jsについて挿入するようだが、今回は挿入していない。

最後に

<b:include data='post' name='shareButtons2'/>

をシェアボタン群を設置したい場所に記載すれば完成だが、今回はタイトルの直後に表示したかったので、

<div class='post-header-line-1'/>
</div>

の間に挿入した。