オリジナルSNSボタンにシェア数を表示するようにしました

2015/1/22 - ブログ（ WordPressプラグイン）

こんにちは！necco（@necco_tl）です！

takerootでは以前、ページの表示スピードを改善するために、SNSボタンをオリジナルに変更しました。
しかしシェア数が表示されなくなってしまったので、どのくらいシェアしてもらっているのか分からなくなってしまいました。

そこで、まずは記事ページを対象にそれぞれのシェアしてもらっている数を表示するように修正しました。

SNSシェア数をjQueryで表示させる方法
CSSでシェア数の見た目を調整
WordPressプラグインを使う方法
シェア数を表示するかどうか

SNSシェア数をjQueryで表示させる方法

とは言っても、自力でそんな事ができるわけでもありませんので、こちらのブログの記事を参考にさせて頂きました。

こちらの記事に書かれている通りに実装したら、見事に一発でSNSのシェア数が表示されるようになりました。

フィードリーダーのFeedlyの購読者数のカウント方法はこちらのブログを参考にさせて頂きました。

CSSでシェア数の見た目を調整

次にCSSを使ってシェア数の見た目を調整します。
今回は下のように吹き出しを作って表示するようにしました。
number-of-shares_1

こういう見た目だと馴染みがあるかなと思いまして。
これも自力では難しいのでこちらのブログを参考にさせて頂きました。

WordPressプラグインを使う方法

SNS Count CacheというWordPressプラグインを使えば、jQueryのような面倒な作業をする必要はありません。このプラグインは、各SNSのシェア数をキャッシュとして保存しておき、高速表示させるというスグレモノです。

使い方もシンプルです。シェア数を表示させたい場所に以下のようなコードを記述するだけです。（サンプルコードを作者まるぼんさんのブログより引用させていただきました）


<!--Twitter-->
<?php if(function_exists('get_scc_twitter')) echo get_scc_twitter(); ?>

<!--Facebook-->
<?php if(function_exists('get_scc_facebook')) echo get_scc_facebook(); ?>

<!--Google+-->
<?php if(function_exists('get_scc_gplus')) echo get_scc_gplus(); ?>

<!--はてブ-->
<?php if(function_exists('get_scc_hatebu')) echo get_scc_hatebu(); ?>

またこのプラグインは、管理画面でページごとのシェア数を一覧で確認できる機能も用意されています。
どの記事がシェア数が多いのか一覧で分かるのでとても便利です。
number-of-shares_6

バージョンアップして、固定ページのシェア数の取得やユーザーアクセスを起点とした動的なシェア数のキャッシュ機能が追加されたりと、さらに便利になっています。
プラグインのインストール後、特に設定を変更する必要もありませんが、作者のまるぼんさんのブログにはプラグインの仕様なども詳しく書かれていますので、一度読んでおくと良いかもしれません。