ツイート数やはてブ数を取得して高速表示できるSNS Count Cacheの使い方

更新日 2021/02/06
カテゴリー WordPressプラグイン

『WordPress ブログで SNS のシェア数だけを取得して高速表示したい』

Twitter やはてなブックマーク、Facebook などの SNS シェアボタンをブログに設置するのはもはや当たり前となりましたね。でも残念ながら公式のボタンは表示速度が遅く、デザインもばらばらになってしまう、というのがネックです。

ただでさえあまり速くない WordPress なのに、さらに表示速度が遅くなると、せっかくアクセスしてくれた読者が記事を読む前に離れてしまうかもしれません。また、検索順位にも悪影響です。

そういった状況を避けるために、WordPress プラグイン「SNS Count Cache」を使ってシェア数を高速表示し、シェアボタンのデザインも統一して読みやすいブログにしてみましょう。

具体的な設定方法と使い方を解説します。

SNS Count Cache のインストールと設定方法

それではさっそく SNS Count Cache の使い方をご紹介します。

プラグインのインストール方法

管理画面のプラグイン「新規追加」から「SNS Count Cache」を検索。またはダウンロードページから ZIP ファイルをダウンロードしてインストールします。

インストールが完了すると、管理画面のサイドバーに「SNS Count Cache」が追加されます。ここから設定画面に入りましょう。

プラグイン初期設定

設定画面から現在のシェア数取得状況などが確認できます。

初期状態は「600 秒で 20 記事ずつ」シェア数を取得していくので、もう少し早めたい場合は「設定」タブから「シェア基本キャッシュ機能」の秒数を変更しましょう。

あまり間隔を短くするとサーバーに負荷がかかってしまうので、初期状態のままがおすすめです。

このまま放置しておいても、プラグインが勝手にシェア数を取得してくれます。

Twitterのシェア数を取得する方法

2015 年末から Twitter のシェア数が取得できなくなりました。

しかし、widgetoon.js & count.jsoon というサービスを利用することで取得可能です。

SNS Count Cache は初期状態で Twitter のシェア数を取得しないので、「シェア基本キャッシュ機能」から「Twitter」にチェックを入れ、いったん「設定の更新」ボタンを押してください。

そうすると、すぐ下に「シェア基本キャッシュ機能－Twitter」という項目が出てきます。

“カウントを開始するためには、上記サイトにドメイン等の情報を登録する必要があります” とあるので、URL をクリックして widgetoon.js & count.jsoon に移動しましょう。

「サイト登録申請」ボタンを押し、ツイート数を取得したいサイトの URL を登録します。

ツイート数の収集開始までに少し（数日）時間がかかります。

ログイン情報に関するメールが届いたら、必ず Twitter アカウントと連携してください。

連携しなくても使えますが、ツイート数取得が遅くなったり、すべて取得できないなどの影響が出ます。

その他設定項目とFacebookカウント

以上で設定は終了です。

まだほかにも設定項目がありますが、基本的に初期設定のままでかまいません。詳細はプラグイン制作者まるぼんさん（@marubon_jp）のサイトをご覧ください。

試行錯誤ライフハック

なお、2016 年 8 月より Facebook のカウント数が取得できない状況になりましたが、こちらは間もなくリリース予定の最新版（0.9.3）で対応するようです。

0.9.2 での対策はこちらの記事をご覧ください。

シェア数のチェック間隔やコンテンツ数を調整することで、カウントを取得できるようになるかもしれません。

SNS Count Cache でカウントを取得するコード

SNS Count Cache は、WordPress のテンプレートファイルにコードを書くことではじめて機能します。

Simplicity や Gush5 など、あらかじめこのプラグインに対応しているテーマを使えば設定までで OK です。

シェア数およびフォロワー数取得用のコードは設定の「ヘルプ」にありますが、各 SNS 単体の記述を以下に載せておきます。

Twitter

■シェア数

<?php if(function_exists('scc_get_share_twitter')) echo scc_get_share_twitter(); ?>

■フォロワー数

<?php if(function_exists('scc_get_follow_twitter')) echo scc_get_follow_twitter(); ?>

Facebook

■シェア数

<?php if(function_exists('scc_get_share_facebook')) echo scc_get_share_facebook(); ?>

■フォロワー数

<?php if(function_exists('scc_get_follow_facebook')) echo scc_get_follow_facebook(); ?>

Google+

■シェア数

<?php if(function_exists('scc_get_share_gplus')) echo scc_get_share_gplus(); ?>

はてなブックマーク

■シェア数

<?php if(function_exists('scc_get_share_hatebu')) echo scc_get_share_hatebu(); ?>

Pocket

■シェア数

<?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?>

feedly

■フォロワー数

<?php if(function_exists('scc_get_follow_feedly')) echo scc_get_follow_feedly(); ?>

Instagram

■フォロワー数

<?php if(function_exists('scc_get_follow_instagram')) echo scc_get_follow_instagram(); ?>

Push7

■フォロワー数

<?php if(function_exists('scc_get_follow_push7')) echo scc_get_follow_push7(); ?>

全SNSシェア数合算

<?php if(function_exists('scc_get_share_total')) echo scc_get_share_total(); ?>

それぞれシェア数・フォロワー数が表示されるので、あとはお好みのアイコンをつけたりシェアボタンを作成して完成です。

SNS Count Cache 応用例

オリジナルのシェアボタンサンプル

SNS Count Cache を使ってオリジナルボタンを作る方法は、Shufulife さんの以下の記事が参考になります。

【WordPress】8種類の自作SNSボタンのコードをご紹介！カウントも表示するよ

これをもとに Gush5 ではこのようにしました。

<div class="article-snsbox"><!--SNS-->
<?php
  $url_encode=urlencode(get_permalink());
  $title_encode=urlencode(get_the_title());
?>
<ul class="clearfix">
  <li><?php if(function_exists('scc_get_share_twitter')): ?><div class="arrow_box"><span><?php echo scc_get_share_twitter() ?></span></div><?php endif; ?>
<a href="http://twitter.com/share?text=<?php echo $title_encode ?>&url=<?php echo $url_encode ?>&tw_p=tweetbutton&via=<?php the_author_meta('twitter'); ?>&related=<?php the_author_meta('twitter'); ?>" class="naifix-sns-button"><div class="sns-button-image sbi-twitter"><i class="fa fa-twitter" aria-hidden="true"></i>Twitter</div></a></li>
  <li><?php if(function_exists('scc_get_share_facebook')): ?><div class="arrow_box"><span><?php echo scc_get_share_facebook() ?></span></div><?php endif; ?>
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" class="naifix-sns-button"><div class="sns-button-image sbi-facebook"><i class="fa fa-facebook-official" aria-hidden="true"></i>Facebook</div></a></li>
  <li><?php if(function_exists('scc_get_share_gplus')): ?><div class="arrow_box"><span><?php echo scc_get_share_gplus() ?></span></div><?php endif; ?>
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" class="naifix-sns-button"><div class="sns-button-image sbi-googleplus"><i class="fa fa-google-plus" aria-hidden="true"></i>Google+</div></a></li>
  <li><?php if(function_exists('scc_get_share_hatebu')): ?><div class="arrow_box"><span><?php echo scc_get_share_hatebu() ?></span></div><?php endif; ?>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" class="naifix-sns-button"><div class="sns-button-image sbi-hatenab"><span>Ｂ!</span>Bookmark</div></a></li>
  <li><?php if(function_exists('scc_get_share_pocket')): ?><div class="arrow_box"><span><?php echo scc_get_share_pocket() ?></span></div><?php endif; ?>
<a href="http://getpocket.com/edit?url=<?php echo $url_encode ?>&title=<?php echo $title_encode;?>" class="naifix-sns-button"><div class="sns-button-image sbi-pocket"><i class="fa fa-get-pocket" aria-hidden="true"></i>Pocket</div></a></li>
  <li><?php if(function_exists('scc_get_follow_feedly')): ?><div class="arrow_box"><span><?php echo scc_get_follow_feedly() ?></span></div><?php endif; ?>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F<?php echo rawurlencode( get_bloginfo( 'rss2_url' ) ); ?>" class="naifix-sns-button" target="_blank" title="<?php bloginfo('name'); ?>のRSSをFeedlyで購読してみませんか"><div class="sns-button-image sbi-feedly"><i class="fa fa-rss" aria-hidden="true"></i>Feedly</div></a></li>
</ul>
</div><!--//SNS-->

実際にはスマホと PC で少しコードが違うので、PC 部分は端折って載せています ^^;

CSS はこちら。

.article-snsbox {
	margin-bottom: 3rem;
}
.article-snsbox ul {
	margin: 0 auto;
}
.article-snsbox li {
	width: 90px;
	text-align: center;
	float: left;
	margin-bottom: .5em;
}
a.naifix-sns-button {
	color: #fff;
	text-align: center;
	text-decoration: none;
}
.naifix-sns-button:hover {
	color: #fff;
}
.arrow_box {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #CCCCCC;
	border-radius: 3px 3px 3px 3px;
	color: #666;
	height: 35px;
	width: 88px;
	margin-bottom: 8px;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.arrow_box:after,
.arrow_box:before {
	border: medium solid transparent;
	content: " ";
	height: 0;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 100%;
	width: 0;
}
.arrow_box:after {
	border-color: #FFFFFF rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
	border-width: 4px;
	margin-left: -4px;
}
.arrow_box:before {
	border-color: #CCCCCC rgba(204, 204, 204, 0) rgba(204, 204, 204, 0);
	border-width: 5px;
	margin-left: -5px;
}
.arrow_box span {
	line-height: 35px;
}
.sns-button-image {
	width: 88px;
	height: 56px;
	overflow: hidden;
	font-size: 12px;
	background-color: #ddd;
	border-radius: 4px;
	line-height: 4.5;
	box-shadow: 1px 1px 0 rgba(255, 255, 255, .4) inset;
}
.sns-button-image:hover {
	box-shadow: 1px 1px 1px rgba(0, 0, 0, .1) inset;
}
.sns-button-image .fa,
.sns-button-image span {
	margin-right: .2em;
}
.sns-button-image span {
	font-weight: bold;
}
.sbi-twitter {
	background-color: #1b95e0;
	border: 1px solid #1b95e0;
}
.sbi-facebook {
	background-color: #4661b0;
	border: 1px solid #4661b0;
}
.sbi-googleplus {
	background-color: #db4437;
	border: 1px solid #db4437;
}
.sbi-hatenab {
	background-color: #00a4de;
	border: 1px solid #00a4de;
}
.sbi-pocket {
	background-color: #ee4156;
	border: 1px solid #ee4156;
}
.sbi-feedly {
	background-color: #85c047;
	border: 1px solid #85c047;
}

これも PC 用の CSS は省略しています。

Shufulife さんの記事を参考に、ブログデザインに合わせたボタンを作ってみてください。

ツイート数が多い順の人気記事一覧

試行錯誤ライフハックさんでは、シェア数をもとにした人気記事ランキングの作り方が紹介されています。

以下、コードをお借りしました。

<?php
$args = array(
	'post_type' => 'post',
	'post_status' => 'publish',
	'meta_key' =>  'scc_share_count_twitter',
	'orderby'  =>  'meta_value_num',
	'posts_per_page' => 5
);

 $myposts = new WP_Query($args);
						
if($myposts->have_posts()) : ?>
	<?php while($myposts->have_posts()) : $myposts->the_post(); ?>
		<a href="<?php echo esc_url(get_permalink($myposts->ID)); ?>">
			<?php echo esc_html(get_the_title($myposts->ID)); ?>
		</a>					
	<?php endwhile; ?>
<?php else : ?>
		<p>記事が存在しません。</p>
<?php endif; wp_reset_postdata(); ?>

SNS からの流入が多いのであれば、「読まれている順」ではなく「シェアされている順」のほうが良いかもしれませんね。

ブログ記事のSNSシェア数を表示する意味

最近はシェア数を表示しないオリジナルボタンを設置するブログも増えてきました。

その理由は、下記の2点です。

公式ボタンがブログデザインに合わないから
シェア数を表示すると重くなるから
Twitter のシェア数を取得できなくなったから

フラットデザインを取り入れている場合は、公式ボタンより自分で作成したボタンのほうがなじみますよね。

フラットデザイン: 過度な装飾を控えたシンプルで平面的なデザイン。質感や立体感を排除し、単色・べた塗りのパーツで構成されているため素人には表現が難しい

また、各 SNS の公式ボタンは幅や高さが微妙に異なるため、変な隙間があいたり、スマホで見ると表示が崩れたり、ということも起こり得ます。

デザインうんぬんよりも、表示速度に影響するという理由でシェア数を表示しないブログが多いのかもしれません。

シェア数を表示するメリット

SNSのシェア数を表示すると、どんなメリットがあるのでしょうか。

設置場所	メリット（デメリット）
記事一覧記事上部	記事が読まれていることをアピールできる。人気がある記事だから読んでみたい、と思わせる効果がある。
記事下部（CTA）	記事を読み終わった読者にシェアを促すことができる。みんながシェアしているから自分もシェアしたいと思わせる。

もし各 SNS のシェア数が 100 以上あるなら、どこに設置しても強力なアピールポイントとなります。

ただし、カウントが 0 ばかりの状態なら “読まれていない” アピールにもなりかねません。

シェア数によってはメリットがデメリットとなりうるため、シェアしてくれる人が増えてきたらカウント表示を検討するのが良いかもしれませんね。

NaifixのSNSボタン

以上のことをふまえつつ、Naifix では SNS ボタンの配置やシェア数の表示方法をいろいろテストしています。

2015 年末から Twitter のシェア数が取得できなくなったので、Twitter 以外のシェア数を合算表示するといった方法も試してみました。

長いあいだ記事下の SNS ボタンは公式ボタンを採用していましたが、テーマ変更をきっかけに現在はすべてオリジナルボタンに変更しています。

WordPress Theme Gush5 も同様にオリジナルボタンを採用し、高速表示に対応しています。

まとめ

各SNSのシェア数を取得して高速表示したいなら、このプラグインは絶対使うべきです。

プラグインを使わず処理したい！なら、こちらが参考になります。

参考Transients APIを使って各ソーシャルのカウント数をWordPressデータベース内に一時保存&am…

キャッシュデータを使うので、ものすごい勢いでバズった時なんかは実際の数字とかけ離れてしまいますが、そこは公式ボタンと組み合わせたりして対応しましょう。

キャッシュ系プラグインと併用するときだけ注意が必要ですが、それでも使って損はありません。おそらく、今までの悩みがあっという間に解決して、感動すら覚えます。

WordPressでSNSシェア数を取得したいなら「SNS Count Cache」で決まり！

それでは、また。

ツイート数やはてブ数を取得して高速表示できるSNS Count Cacheの使い方

SNS Count Cache のインストールと設定方法

プラグインのインストール方法

プラグイン初期設定

Twitterのシェア数を取得する方法

その他設定項目とFacebookカウント

SNS Count Cache でカウントを取得するコード

Twitter

Facebook

Google+

はてなブックマーク

Pocket

feedly

Instagram

Push7

全SNSシェア数合算

SNS Count Cache 応用例

オリジナルのシェアボタンサンプル

ツイート数が多い順の人気記事一覧

ブログ記事のSNSシェア数を表示する意味

シェア数を表示するメリット

NaifixのSNSボタン

まとめ

AddQuicktag設定方法と使い方｜記事執筆効率を格段にアップさせるプラグイン

Search Regex使用時に「サイトで技術的な問題が発生しています」というエラーメールが届くときの解決方法

WordPressを一瞬でHTTPS化するプラグイン「Really Simple SSL」の使い方

WordPressのカテゴリー見直しと整理に役立つプラグイン2つ＋α

Author