ツイート、いいね、はてブ数を高速表示するSNS Count Cache

Twitterツイート数取得API廃止による暫定的処置は文末にてご案内しています。

ブログには今や必須のSNSボタン。
もちろんあなたのアフィリエイトサイトにも設置していると思います。

Twitter、Facebook、Google+などのSNS共有ボタンはシェアされるとカウント数が増え、SNS一覧が並んだページ上で記事の注目度が分かり、コンテンツを拡散させるソーシャルメディア戦略には欠かせません。

ただし、重要なツールである一方、ブログの表示速度が著しく低下してしまうデメリットがあります。
ブログ訪問者がページにアクセスする度に各SNSサイトのサーバからカウント数が呼び出されるため、非常にページの表示速度が遅くなるのです。

ブログ運営者の悩みの種です。
とはいえ、ツイッターやフェイスブックのAPIサイトの遅さを嘆いたところで何も改善されませんので、自分で頭を捻るしかありません。

捻りだされた答えは、SNS Count Cacheプラグインの導入です。
SNS Count Cacheは、バックグラウンドでSNSのカウント数をキャッシュして、SNS一覧をページに高速表示することができるWordPressのプラグインです。

常にSNSカウント数が高速で表示されます。
プラグイン作者が日本人のため、日本で人気のはてなブックマークやPocket、feedlyにも対応しています。

1.SNS Count Cacheの設置方法と使い方

WordPress管理画面から「プラグイン」→「新規追加」を選択し、検索窓から「SNS Count Cache」を検索してください。表示されたSNS Count Cacheの「いますぐインストール」ボタンを押します。

1-1.基本設定（Setting）

SNS Count Cache のインストールが正常終了し、WordPress管理画面メニューに「SNS Count Cache」という項目が追加されます。

「Setting」の設定を行います。
「Setting」以外のページで行う作業はありません。
「Setting」の設定が完了した時点でソーシャルボタンのカウント数が自動的にキャッシュされます。

「Cache Status」でキャッシュの進行具合が分かり、「Share Count」ではページごとのSNS共有カウント数を調べることができます。

1-2.ソーシャル基本設定（Share Base Cache）

「Target SNS」は設置したいSNSを指定します。
あなたが設置予定のSNSにチェックを入れてください。指定したSNSのカウント数を取得します。

「Interval cheking and caching share count (sec)」と「Number of posts to check at a time (posts)」でキャッシュ時間の間隔を調整できます。
デフォルトでは20記事ずつ10分間隔でキャッシュを更新します。短すぎると負荷が増え、長過ぎると最新のカウント数が反映されませんので、初期値のままでいいと思います。

1-3.フォロー数の設定（Follow Base Cache）

「Target SNS」のFeedlyにチェックを入れることでFeedlyのフォロー数が取得できます。
Google Readerが無くなった現時点でRSSリーダーといえばFeedlyが一番の人気です。

1-4.ダイナミックキャッシュの設定（Dynamic Cache）

ダイナミックキャッシュは、ページのアクセス起点で動的にキャッシュ処理が行われる機能です。

「Dynamic caching based on user access」はNoneになっていますので、作者推薦の「Asynchronous 2nd Cache」にしましょう。

「Asynchronous 2nd Cache」は、一次キャッシュがない場合にキャッシュ処理の予約をしつつ、二次キャッシュを活用します。そのためシェア数を表示する目的を達成しながら、キャッシュの補てんができるため機能と性能のバランスがよいです。

作者ページより引用：試行錯誤ライフハック

2.SNSボタンの設置方法

続いて取得したSNSごとのカウント数をブログの詳細ページに貼る作業を行います。
Webフォントを使った方法をこれまで採用していたのですが、Pocketとfeedlyがなかったため、今回はアイコン画像を使用しています。
上段がPC、下段がスマホの表示です。

2-1.SNSボタンのアイコンダウンロード

先ず下記のアイコンを右クリックで保存してください。
または、あなたのお好みのアイコンを用意してください。

2-2.SNSボタンの設置サンプルコード

以下にサンプルコードをご紹介します。

各ファイルは更新後、FTPで該当ファイルを上書き更新してください。

FTPソフトやファイルを更新するテキストエディタが無い場合は、WordPress管理画面の「外観」→「テーマの編集」から同じファイル名を選択して更新することができます。

いずれの場合も、バックアップを取った上で、ファイルの更新作業を行ってください。

functions.phpに下記を追記します。
UTF-8の文字コードを認識するテキストエディタ（秀丸など）で開いてください。

LINEボタンをスマホにだけ表示させるための関数になります。
「LINEで送る」ボタンはパソコンではLINE公式サイトにリンクされてしまうため、スマホのみの表示とします。

//スマホ表示分岐
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

記事の詳細ページにSNSボタンを設置します。
single.phpを開き、SNSボタンを設置したい箇所に下記のコードを追加します。

一般的なテーマであれば、
<?php the_content(); ?>
が本文を表示するコードなので、SNSボタンを設置したい箇所が記事の上なら<?php the_content(); ?>の上に、本文の下なら<?php the_content(); ?>の下にSNSボタンのコードを追記してください。

<?php
  $url_encode=urlencode(get_permalink());
  $title_encode=urlencode(get_the_title());
?>
<strong>シェアする</strong>
<ul class="mysns">
<!--Twitter-->
<li><a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/sns/twitter.png" width="36" height="36" alt="Twitterでシェア" title="Twitterでシェア" class="alignleft" /></a>
<?php if (function_exists('scc_get_share_twitter') && scc_get_share_twitter() > 0) { ?>
 <span class="count"><?php echo scc_get_share_twitter(); ?></span>
<?php } ?>
</li>
<!--Facebook-->
<li><a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/sns/facebook.png" width="36" height="36" alt="Facebook"  title="Facebookでシェア" class="alignleft" /></a>
<?php if (function_exists('scc_get_share_facebook') && scc_get_share_facebook() > 0) { ?>
 <span class="count"><?php echo scc_get_share_facebook(); ?></span>
<?php } ?>
</li>
<!--Google+1-->
<li><a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/sns/google-plus.png" width="36" height="36" alt="Google+" title="Google+でシェア" class="alignleft" /></a>
<?php if (function_exists('scc_get_share_gplus') && scc_get_share_gplus() > 0) { ?>
 <span class="count"><?php echo scc_get_share_gplus(); ?></span>
<?php } ?>
</li>
<!--はてブボタン-->
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/sns/hatena.png" width="36" height="36" alt="はてなブックマークに保存" title="はてなブックマークに保存" class="alignleft" /></a>
<?php if (function_exists('scc_get_share_hatebu') && scc_get_share_hatebu() > 0) { ?>
 <span class="count"><?php echo scc_get_share_hatebu(); ?></span>
<?php } ?>
</li>
<!--ポケットボタン-->
<li><a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/sns/pocket.png" width="36" height="36" alt="Pocketに保存" title="Pocketに保存" class="alignleft" /></a>
<?php if (function_exists('scc_get_share_pocket') && scc_get_share_pocket() > 0) { ?>
 <span class="count"><?php echo scc_get_share_pocket(); ?></span>
<?php } ?>
</li>
<!--feedlyボタン-->
<li><a href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fafirika.net%2Ffeed%2F" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/sns/feedly.png" width="36" height="36" alt="feedly購読" title="feedly購読" class="alignleft" /></a>
<?php if (function_exists('scc_get_follow_feedly') && scc_get_follow_feedly() > 0) { ?>
 <span class="count"><?php echo scc_get_follow_feedly(); ?></span>
<?php } ?>
</li>
<!--LINEボタン-->
<?php if (is_mobile()) :?>
<li><a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/sns/line.png" width="36" height="36" alt="LINEに送る" title="LINEに送る" class="alignnone" /></a></li>
<?php endif; ?>
<!--メール送信-->
<li><a href="mailto:?body=<?php print("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>/&subject=<?php wp_title(' '); ?> - あなたのブログ名" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/sns/mail.png" width="36" height="36" alt="メールでURLを送る" title="メールでURLを送る" class="alignnone" /></a></li>
</ul>

不要なSNSボタンは<li>から</li>までを削除してください。

feedlyボタンの「http%3A%2F%2Fafirika.net%2Ffeed%2F」にある「afirika.net」はあなたのWordPressを設置したブログのドメイン名に変更してください。

メール送信の「あなたのブログ名」はあなたのブログ名を記入してください。

外部ファイルを作成して呼び込む方法でも可能です。
SNSボタンを設置したいsingle.phpの箇所に

<?php include (TEMPLATEPATH . '/sns.php'); ?>

を記入し、上記コードを記入したsns.phpを新規作成します。

あなたのお好みで選んでください。

次にSNSボタン廻りのCSSです。下記コードでデザインを指定します。
style.cssに以下を追加してください。

テーマによっては調整が必要になる場合もあります。

/* SNSボタン*/
ul.mysns{
	clear:both;
	text-align:
	left;margin:0 0 20px 0;
	padding:0;
	list-style:none;
	overflow:hidden
	}
ul.mysns li{
	float:left;
	list-style:none;
	margin:5px 2px 0 0;
	}
.count{
	margin-top:0px;
	padding:0 6px;
	font-size:12px;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	background-color:#fcc;color:#ff0000;
	}
ul.mysns img.alignleft{
	float: left;
	padding:0;
	margin:0px 5px 0px 5px;
	}
ul.mysns img.alignnone{
	padding:0;
	margin:0px 6px 0px 6px;
}

2-3.SNSボタンのシェア数合計参照関数コード

「scc_get_share_total()」関数を使用することで、記事のシェア数の合計を取得することができます。
これを応用することによって、以下のように記事一覧ページにシェア数の合計を表示することが可能になります。

これまでの各SNSサイトからのリンク表示では異常な重さになり、ページ表示が固まってしまいますが、SNS Count Cacheは一瞬でシェア合計数が表示されます。

シェア合計を掲載したい場所に下記コードを貼ります。

<?php echo scc_get_share_total(); ?>

3.まとめ

WordPressにおけるSNSシェア数の取得にはこのSNS Count Cacheは欠かせないプラグインです。
代表的なSNSであるTwitter、Facebook、Google+、はてなブックマークに加え、Pocketとfeedlyのシェア数をキャッシュし、WordPressを高速表示させることができます。

12/2追記
Twitterツイート数取得API廃止による暫定的処置

Twitterツイート数取得廃止に伴うSNS Count Cacheの暫定処置(count.jsoon)