コピペのみ！WordPressプラグイン『SNS Count Cache』でシェア数を表示させる

WordPressプラグイン『SNS Count Cache』のシェア数を表示させる方法について。

各SNS公式ボタンの表示がかなり遅いので、オリジナルボタンを作成するのが一般的にもなってきてます。そこで必要なのがシェアしてくれた数。表示しておくとさらにシェアされやすくなるので、カウント数は表示させておきたいところです。

『SNS Count Cache』は、TwitterやFacebookなどのシェア数をカウントして表示してくれるWordPressプラグインで、こちらを使用している方も多いのでは。

このブログでも使用しているのですが、コピペだけでシェア数を表示させる方法を書いた記事が意外となかったので、ここに記しておきます。このプラグインを初めて使う人や、サイト制作で使用する方は、ぜひチェックしておいてください。

SNS Count Cacheのシェア数を表示させるWordPressタグ一覧

各SNSアカウント毎と合計のシェア数を表示させるWordPressタグです。

ツイート数

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

Facebook いいね・シェア数

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

はてなブックマーク数

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

Google+ シェア数

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

pocket シェア数

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

ピンタレストのピン数

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

すべてのシェア合計数

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

SNS Count Cacheのフォロー数を表示させるWordPressタグ一覧

また、フォロー数も表示させることができます。

Feedly のフォロー数

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

Twitterのフォロワー数

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

Facebookページのいいね数（フォロワー数）

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

インスタグラムのフォロワー数

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

Push 7 の登録数

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

※Push 7 については、こちらの記事にてご紹介しております。簡単にいうと、スマホやブラウザへ更新を通知させる『プッシュ通知』の事です。

オリジナルのSNSシェアボタンにシェア数を表示させる

オリジナルボタンと合わせて使用すると、シェア数をスマートに表示させることができます。

<ul class="share-btn">
	<li class="ha">
		<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink() ?>&title=<?php echo get_encoded_title( get_the_title() ) ?>" target="blank" class="balloon-btn-link hatena-balloon-btn-link" rel="nofollow" onclick="window.open(this.href, 'window', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;">
			<span>ブックマーク　<?php if(function_exists('scc_get_share_hatebu')) echo scc_get_share_hatebu(); ?>
</span>
		</a>
	</li>
	<li class="tw">
		<a href="http://twitter.com/share?text=<?php the_title() ?>&url=<?php the_permalink() ?>" target="blank" class="balloon-btn-link twitter-balloon-btn-link" rel="nofollow" onclick="window.open(this.href, 'window', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;">
			<span>ツイート　<?php if(function_exists('scc_get_share_twitter')) echo scc_get_share_twitter(); ?>
</span>
		</a>
	</li>
	<li class="fb">
		<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title() ?>" target="blank" class="balloon-btn-link facebook-balloon-btn-link" rel="nofollow" onclick="window.open(this.href, 'window', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;">
			<span>シェア　<?php if(function_exists('scc_get_share_facebook')) echo scc_get_share_facebook(); ?>
</span>
		</a>
	</li>
	<li class="pk">
		<a href="https://getpocket.com/edit?url=<?php the_permalink() ?>&title=<?php echo get_encoded_title( get_the_title() ) ?>" target="blank" class="balloon-btn-link pocket-balloon-btn-link" rel="nofollow" onclick="window.open(this.href, 'window', 'width=600, height=400, menubar=no, toolbar=no, scrollbars=yes'); return false;">
			<span>Pocket　<?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?>
</span>
		</a>
	</li>
</ul>

ul.share-btn {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.share-btn li {
	width: 24%;
	font-size: 1.4rem;
}

.share-btn li a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem 0;
	width: 100%;
	height: 100%;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}
.share-btn li:hover {
	opacity: .7;
}

.tw {
	border-radius: 4px;
	background-color: #55ACEE;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.fb {
	border-radius: 4px;
	background-color: #315096;
	text-shadow: 0 1px 1px rgba(0,0,0,.8);
}
.ha {
	border-radius: 4px;
	background-color: #008FDE;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.pk {
	border-radius: 4px;
	background-color: #F03E51;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

.tw span:before {
	content: '\f099';
	padding-right: .4em;
	font-family: FontAwesome;
}
.fb span:before {
	content: '\f09a';
	padding-right: .4em;
	font-family: FontAwesome;
}
.ha span:before {
	content: 'B!';
	padding-right: .4em;
	font-size: 1.7rem;
	font-family: Verdana;
	vertical-align: middle;
}
.pk span:before {
	content: '\f265';
	padding-right: .4em;
	font-family: FontAwesome;
}

@media screen and (max-width: 668px){
	.tw span:before,
	.fb span:before,
	.ha span:before,
	.pk span:before {
		display: block;
		padding: 0;
		font-size: 1.8rem;
		line-height: 1.2;
		text-align: center;
	}
}

SNSのオリジナルボタンについては以前の記事でご紹介したものです。そこに今回のシェア数のWordPressタグを追加しました。

ぜひご利用ください。