《静的用》カウントありのソーシャルボタンhtmlに簡単設置（サンプルコード）

カウントありのソーシャルボタンの設置方法です。WPに設置ではなく、静的ページに簡単に設置する場合の手順です。javascriptはまとめて記述して、ボタンが複数設置できるようする方法で紹介します。

カウント無タイプの場合はこちらに書いています。
《静的用》カウントなしのソーシャルボタン設置、外部jsにまとめる方法

完成形のイメージです。

※ツイッターはカウント表示できなくなりました。
サンプルデモ

バルーンにカウント表示ありで、ツイッターボタン、facebookのいいねボタン、はてなブックマークボタン、Google+ボタンの横並び設置例です。

jsコードの記述例

以下のコードを表示したいページのhtmlに記述します。

<script type="text/javascript">
(function(w,d){
 w.___gcfg={lang:"ja"};
 var s,e = d.getElementsByTagName("script")[0],
 a=function(u,f){if(!d.getElementById(f)){s=d.createElement("script");
 s.src=u;if(f){s.id=f;}e.parentNode.insertBefore(s,e);}};
 a("//b.st-hatena.com/js/bookmark_button.js");
 a("//platform.twitter.com/widgets.js","twitter-wjs");
 a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
 a("https://apis.google.com/js/platform.js");
})(this, document);
</script>

記述する場所はどこに書いてもOKですが、ページ表示する際に一番あとに処理させた方がいいので閉じbodyタグのすぐ上がいいです。

jsを外部ファイル化したい場合はこちらのページに書いています。

表示させたい箇所にソーシャルボタンの記述

以下のコードをソーシャルボタンを表示したい箇所に記述します。

<ul>
<li><a class="twitter-share-button" href="https://twitter.com/share" data-dnt="true">Tweet</a></li>
<li><div class="fb-like" data-href="https://tuono034s.com/web-entry/1166/" data-layout="button_count" data-action="like" data-show-faces="true"></div></li>
<li><a href="http://b.hatena.ne.jp/entry/https://tuono034s.com/web-entry/1166/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>
<li><div class="g-plusone" data-size="medium"></div></li>
</ul>

このページに設置するとした場合の記載例です。緑字の箇所は設置するページのURLに変更してください。
ページ内に複数記述しても大丈夫です。表示されます。

facebookのシェアボタンも表示させたいとき

いいねボタンの横にシェアボタンも表示させたい場合は、タグにdata-share=”true”を追加します。

以上で完了です。

横並びのCSS

一応、横並びのCSSは以下です。こちらは問題ないと思いますがページにあわせてclassつけたりしてください。

<style type="text/css">
li {
 float:left;
 margin-right:10px;
}
</style>