ブログ記事のシェア数（ソーシャルカウント）を表示するjQueryプラグインはいろいろあると思いますが、今回当ブログに実装するにあたって、自分でjQueryプラグインを作りました。簡単に実装できるように、そして自由にデザインできるように作ってみました。ここで紹介させていただきます。
cb-sharecount-jsの概要
任意のURL（複数可）のSNS上でのシェア数を非同期で取得して表示するためのjQueryプラグインとなります。例えば、ブログのindexページなどに実装して、そろぞれの記事のシェア数を表示させるようなことができます。
特徴は以下の通りです。
- 容易に実装ができます。以下で説明しますが、JavaScriptの実装はたったの1行のみとなります。
- 複数のURLの値の取得ができるので、ブログ記事の一覧などでの使用に最適です。
- 非同期かつ並列処理で値を取得するので、ページの表示にもやさしいです。
- 値だけを取得するので、レイアウトもデザインも自由に行えます。
- はてなブックマーク登録数、Twitterツイート数、Facebookいいね数の3サービスに対応しています。（対応サービスは今後増やす予定です。）
サンプル
当ブログにも実装済みなので、まずは当ブログのindexページをご確認いただければと思います。それぞれ記事ごとにツイート数とFacebookのいいね数が表示されていることがわかると思います。
それからjsdo.itにもアップしていますので、そちらでも確認可能です。
実装方法
実装方法はかなり簡単にしているつもりです。
1. ファイルの読み込み
まずは、「jQuery」と「ダウンロードしたプラグインのjsファイル」をページに読み込みます。
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.cbsharecount.min.js"></script>
2. JavaScript（jQuery）の実装
JavaScriptの実装は実に簡単で、以下の1行を追加するのみです。複数のURLのシェア数を取得する場合でも複数書く必要はありません。
<script>
$(セレクター).cbShareCount();
</script>
セレクタの部分は、シェア数を表示する部分の要素に指定したclass属性やid属性の値を設定します。複数のURLのシェア数を取得する場合は、class属性値はすべて同じものを設定してください。
3. htmlの実装
HTMLは、以下のルールに従って実装してください。
＜URLの取得＞
[ルール1] jQueryオブジェクトに指定したセレクター要素のtitle属性に[シェア数を取得したいURL]を設定する
<div class="[セレクター]" title="[シェア数を取得したいページのURL]">
[取得したシェア数を表示させる箇所]
</div>
＜値の表示＞
[ルール2] jQueryオブジェクトに指定したセレクター要素の子要素にそれぞれ以下の[クラス属性]を指定
- class=”cb-hb” → はてなブックマークの登録数表示用
- class=”cb-tw” → ツイッターのツイート数表示用
- class=”cb-fb” → Facebookのいいね数表示用
<div class="[セレクター]" title="[シェア数を取得したいページのURL]">
<!-- 子要素 -->
<p class="cb-hb"></p>
<p class="cb-tw"></p>
<p class="cb-fb"></p>
</div>
[ルール3] 値は上記のclass属性をつけた要素の子要素の[span要素]に表示される
<div class="[セレクター]" title="[シェア数を取得したいページのURL]">
<!-- 子要素 -->
<p class="cb-hb"><span>[ここに取得した値が表示される]</span></p>
<p class="cb-tw"><span>[ここに取得した値が表示される]</span></p>
<p class="cb-fb"><span>[ここに取得した値が表示される]</span></p>
</div>
実装例
上記の実装方法を踏まえた実装例を書いておきます。
ulとliを使った実装例
<ul class="[セレクター]" title="[シェア数を取得したいページのURL]">
<li class="cb-hb">はてブ数<span></span></li>
<li class="cb-tw">ツイート数<span></span></li>
<li class="cb-fb">いいね<span></span></li>
</ul>
divとpを使った実装例
<div class="[セレクター]" title="[シェア数を取得したいページのURL]">
<p class="cb-fb">Facebook<a href="#"><span></span></a></p>
<p class="cb-tw">Twitter<a href="#"><span></span></a></p>
<p class="cb-hb">Hatena<a href="#"><span></span></a></p>
</div>
複数のURLの値を取得する際の実装例（繰り返し処理でも可）
<div class="[セレクター（同じもの）]" title="[シェア数を取得したいページのURL1]">
<p class="cb-fb">Facebook<a href="#"><span></span></a></p>
<p class="cb-tw">Twitter<a href="#"><span></span></a></p>
<p class="cb-hb">Hatena<a href="#"><span></span></a></p>
</div>
<div class="[セレクター（同じもの）]" title="[シェア数を取得したいページのURL2]">
<p class="cb-fb">Facebook<a href="#"><span></span></a></p>
<p class="cb-tw">Twitter<a href="#"><span></span></a></p>
<p class="cb-hb">Hatena<a href="#"><span></span></a></p>
</div>
それなりにCSSなどを使ってデザインすると、以下のようなシェアボタン付きのバルーン型で表示させることも可能です。値だけを表示するようになっているので、自由にデザインできるのもこのプラグインの特徴となります。
注意点
とりあえず、非表示機能などのオプションは現在はまったくないので、表示したくないSNSのシェア数があった場合は、HTML側でコメントアウトしてもらえればと思います。
<div class="[セレクター]" title="[シェア数を取得したいページのURL]">
<p class="cb-fb">Facebook<a href="#"><span></span></a></p>
<!--<p class="cb-tw">Twitter<a href="#"><span></span></a></p>-->
<p class="cb-hb">Hatena<a href="#"><span></span></a></p>
</div>
ダウンロード
興味を持っていただけたら、ぜひ当jQueryプラグインを使ってみてください。今後まだまだバージョンアップさせていく予定なので、何かご意見、ご要望などありましたら、こちらのコメント欄でもよいのでお知らせいただけますと幸いです。
追記: こちらの記事ですが、急遽jQuery Advent Calendar 2014の7日目の記事とさせていただきました。最初はそのつもりはなかったんですが、ちょうど7日目が空いていたので、エントリーさせていただきました。
コメント