記事下にSNSのシェアボタンを設置しました。
読み込み速度・表示速度を速めるためにボタンをカスタマイズしてオリジナルにするか、それとも公式を使うか迷いました。
迷ったけども結局は公式を使うことにしました。
理由はオリジナルだとGoogle+とPocketのシェア数が取得できなさそうだったから。あとは記事下に表示するので多少読み込みが遅くても問題ないと判断したからです。
それでは早速設置手順や方法のご紹介です。
全てのシェアボタンにシェア数を表示するためにすること
2015年11月20日からTwitterのシェア数を公式に取得することができなくなりました。
なので公式のシェアボタンを設置するとシェア数が取得できません。今のままだとTwitterだけデザイン崩れを起こしてしまいます。
それがあって自分でシェアボタンをカスタマイズした方が見栄えが良いかなと思いました。
でも非公式ではありますが、シェア数を取得する方法があるので、それができればデザイン崩れがなくなるのでまずはそこから。
https://1983note.com/twitter-share-count-button/
上記のリンクは私の書いた記事で、そこにTwitterのシェア数取得方法を書いています。
各SNSシェアボタンのコードの紹介（バルーン型）
<script src='http://jsoon.digitiminimi.com/js/widgetoon.js' type='text/javascript'/> <a class='twitter-share-buttoon' data-count='vertical' data-lang='ja' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share'>ツイート</a> <script> widgetoon_main(); </script>
シェア数を取得できれば上記のコードをコピペするだけで従来通りのシェアボタンになります。
はてなブックマーク
<a class='hatena-bookmark-button' data-hatena-bookmark-lang='ja' data-hatena-bookmark-layout='vertical-balloon' expr:data-hatena-bookmark-title='data:post.title' expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only@2x.png' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
上記のコードをコピペで完了です。
シェアボタン – ソーシャルプラグイン – ドキュメンテーション – 開発者向けFacebook
まずは<body>タグ直下に次のタグを貼り付けてください。
<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.7";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
それからシェアボタンを表示したい位置に次のタグを貼り付けてください。
<div class='fb-share-button' data-layout='box_count' data-mobile-iframe='true' data-size='large' expr:data-href='data:post.url'><a class='fb-xfbml-parse-ignore' href='https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse' target='_blank'>シェア</a></div>
Pocket for Publishers: Pocket Button
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
Pocketのシェアボタンは表示したい場所に上記のタグを貼り付けるだけです。
まとめ
以上でBloggerで使用するおもなSNSボタンのコードが取得できたかと思います。
あとはCSSで装飾すれば完了です。
