[JS]複数のソーシャルメディアを合算して表示するスクリプト -Share Count

設置も簡単、TwitterやFacebookなど複数のソーシャルメディアのカウント数を合算して表示する超軽量(2kb)スクリプトを紹介します。

サイトのキャプチャ

Share Count

Share Countのデモ

設定したソーシャルメディアのカウント数は、合算して一緒に表示されます。
デモのようにアイコンを添えるといい感じです。

デモのキャプチャ

Share Count JSの右サイドバーに設置

上記デモでは機能が拡張されており、マウスホバーで各ソーシャルメディアも表示されます。

デモのキャプチャ

Share Count JSの右サイドバーに設置

Share Countの実装

実装は、簡単です。

HTML

「class=sharecount」をつけたdiv要素を配置します。

<div class="sharecount">Share</div>

特定のサイトのカウントを表示する場合は、a要素を使用します。
例:www.google.com

<a href="http://www.google.com/" class="shareme">Total</a>
<div class="sharecount">Share</div>

外部ファイル

当スクリプトを外部ファイルとして指定します。

<script type="text/javascript" src="sharecount.js"></script>	
</body>

配置は</body>の上がよいでしょう。

スクリプトのオプション

オプションではHTMLで使用するclass名、ソーシャルメディアの選択などができます。

sharecounter = ".sharecount"
sharelink    = ".shareme"
failwait     = 3000
services     = [twitter,facebook,digg,delicious];
prepend      = "";
append       = "";

top of page

©2017 coliss