WordPressプラグイン利用で、オリジナルシェアボタンを簡単設置。

シェア数表示つきのオリジナルボタンを簡単設置する方法。

企業ブログ運営には欠かせない存在のシェアボタン。
でも基本的に標準のシェアボタンって表示されるのが遅いですよね。
そのせいでページ自体の読み込みが終わらずイライラすることも。
そこで今回は独自のシェアボタンを作成・設置する方法をご紹介します。

便利なプラグインを利用すればカウンタつきのシェアボタンが、
それぞれのサイトに適したオリジナルデザインで設置できます。
あらかじめシェア数をキャッシュしておくため読み込みも早く、
サイト閲覧者のストレスを軽減できます。

簡単に導入できるので、この機会にぜひチャレンジしてみましょう！

SNS Count Cacheの紹介。

今回は「SNS Count Cache」というWordPressプラグインを利用します。
通常アクセスするたびに取得されるページのシェア数を、あらかじめ内部に
キャッシュしておくことでシェアボタンの高速表示を可能にしています。

またこちらは日本人の方が作られたプラグインのため、
はてブなど国内人気サービスのシェア数取得にも対応しています。

プラグインの導入。

以下の公式ページからダウンロードするか、管理画面から「SNS Count Cache」で検索してください。
なお記事作成時点での最新バージョンは0.9.2 です。
SNS Count Cache — WordPress Plugins

プラグインを有効化すればナビにメニューが追加されます。

細かな設定・項目の解説。

シェア数をキャッシュしたいSNSを、対象SNSとして指定します。

必要な場合はフォロワー数にもチェックをいれます。

簡単にシェアボタンを設置するだけの場合、そのほかの設定はすべて既定値にしておきます。

Twitterについて

Twitterでは2015年11月にシェア数の取得が廃止されてしまいました。
このため代替APIを利用することでカウント表示を実現します。

widgetoon.js & count.jsoon | digitiminimi

上記サイトにアクセスしてサイト登録申請を行いましょう。
URLを指定するだけの簡易な登録だけで利用できます。
数時間もすると登録完了のメールが送られてきます。

忘れずにTwitter連携も行っておきます。

その後ツイートの収集が終われば、Twitterでもシェア数が表示されます。

Facebookについて

2016年8月より、Facebookの仕様変更によりシェア数がキャッシュできない状況です。
なおこちらはプラグインの次回バージョン（0.9.3）にて対応されるようです。
追記（10/03）：修正対応された最新版（0.10.0）が公開されました。

シェア数取得のためにApp IDとApp Secretの設定が必要になったようです。
Facebook開発者 – 開発者向けFacebook にて取得してください。

アプリIDの取得方法は以下で分かりやすく説明されています。
参考：【2016年版】Facebook App ID（アプリID）の取得方法

なおアップデート詳細については作者さまのサイトにてご確認ください。
試行錯誤ライフハック

サンプルコードまとめ。

当サイトで利用しているコードをサンプルとして記載します。
これらのコードを表示したい箇所に記述して利用します。

シェアボタンのサンプルコード

<div class="social_box_count">

<!--Facebookボタン-->
<a class="btn-facebook" href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&amp;t=<?php echo get_the_title(); ?>" target="_blank">
<i class="fa fa-facebook" aria-hidden="true"></i>
<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>

<!--Twitterボタン-->
<a class="btn-twitter" href="http://twitter.com/share?url=<?php the_permalink(); ?>&amp;text=<?php echo get_the_title(); ?>&amp;via=BILLIONPLAN_JP&amp;tw_p=tweetbutton&amp;related=BILLIONPLAN_JP" target="_blank">
<i class="fa fa-twitter" aria-hidden="true"></i>
<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>

<!--はてブボタン-->
<a class="btn-hatena" href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php the_permalink(); ?>&amp;title=<?php echo get_the_title(); ?>" target="_blank">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.732 141.732"><g><circle cx="119.684" cy="107.843" r="13.979"/><rect x="106.954" y="16.517" width="25.459" height="69.532"/><path d="M68.231,63.296c0,0,17.591-1.109,17.591-22.191c0-24.41-22.029-24.533-34.604-24.533c-8.157,0-12.277,0-17.691,0H22.74H8.068v105.305h8.014h17.445c4.512,0,10.171,0,17.321,0c34.766,0,40.684-19.007,40.684-31.212S85.614,66.995,68.231,63.296zM34.896,36.406c9.703,0,9.267,0,11.835,0c2.219,0,11.835,0.946,11.835,10.1c0,10.818-8.322,10.449-13.869,10.449c-5.548,0-2.774,0-9.801,0V36.406z M48.765,99.487c-6.473,0-9.062,0-13.87,0V76.372c0,0,6.103,0,14.147,0c8.044,0,14.146,1.664,14.146,11.558S55.237,99.487,48.765,99.487z"/></g></svg>
<?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>

<!--Pocketボタン-->
<a class="btn-pocket" href="http://getpocket.com/edit?url=<?php the_permalink();?>&amp;title=<?php echo get_the_title(); ?>" target="blank">
<i class="fa fa-get-pocket" aria-hidden="true"></i>
<?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a>

</div>

シェアボタンのコードは上記を記述します。

<!--Google+ボタン-->
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" target="_blank">
<i class="fa fa-google-plus"></i>
<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a>

Google+も必要な場合は上記も追記します。

アイコンが不要な場合、iタグを削除してください。
（はてブに関してはインラインSVGで記述しています）
なおアイコン表示にはfont-awesomeが必要です。
以下のサイトからDLもしくはCDNを介して利用してください。
Font Awesome Icons

.social_box_count {
}
.social_box_count:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.social_box_count a{
	box-sizing: border-box;
	display: block;
	float: left;
	width: 10%;
	margin-right: 0.5%;
	padding: 0.09em 0;
	border-radius: 3px;
	color: white;
	text-decoration: none;
	text-align: center;
}
.social_box_count a:hover{ opacity: 0.6; }

.btn-twitter{ background: #55acee; }
.btn-facebook{ background: #3b5998; }
.btn-google{ background: #dd4b39; }
.btn-hatena{ background: #008FDE; }
.btn-pocket{ background: #ef4056; }

.btn-hatena svg {
	fill: #fff;
	width: 19%;
	height: 15px;
	margin-bottom: -2px;
}

/* Media Queries */
@media (max-width: 1239px) { .btn-hatena svg { width:18%; }
	.social_box_count a{ width: 13%; }}
@media (max-width: 1029px) { .btn-hatena svg { width:20%; }}
@media (max-width: 919px) { .btn-hatena svg { width:23%; }}
@media (max-width: 480px) { .btn-hatena svg { width:30%; }}
@media (max-width: 414px) { .btn-hatena svg { width:32%; }
	.social_box_count a{ width: 15%; }}
@media (max-width: 375px) { .btn-hatena svg { width:35%; }}
@media (max-width: 320px) { .btn-hatena svg { width:36%; }
	.social_box_count a{ width: 18%; }}

同じくスタイルもサンプルとして記載しておきます。
メディアクエリは不要の場合、削除してください。

そのほかサンプルコード

合算したシェア数を表示する場合

このように合算したシェア数を表示したい場合は以下を記述します。

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

各種アーカイブなどで利用すると効果的かもしれません。

フォロワー数を表示する場合

<!--Facebookフォロワー-->
<?php if(function_exists('scc_get_follow_facebook')) echo scc_get_follow_facebook(); ?>
<!--Twitterフォロワー-->
<?php if(function_exists('scc_get_follow_twitter')) echo scc_get_follow_twitter(); ?>
<!--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(); ?>

各SNSのフォロワー数を表示したい場合、こちらをそれぞれ記述します。

まとめ

このようにプラグインを利用すれば簡単にオリジナルボタンが実現できます。
またシェア数もキャッシュされるため、サイトの表示速度にも影響を与えません。
ただしシェア数の表示は、サイトの価値や盛り上がりをアピールするには有効な手段ですが
まだシェア数が少ない場合、逆効果になってしまいかねないため注意も必要です。

ぜひあなたのサイトでも検討してみてください。ではまた！

実用的！自社メディア運用に役立つWordPressプラグイン18個。

ウェブ制作でお悩みの方へ。

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。ランディングページやサイト制作、自社メディアを使った集客提案、中国をはじめとする海外ローカライズ作業など幅広く対応いたします。

ウェブ制作のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

おむおデザイナー／編集Twitter:@BILLIONPLAN_JP: 大阪在住WEBデザイナー。制作会社、EC業界でデザイナーをやった後に、ゲームアプリの世界へ。そんなにゲーム好きじゃないことに気づいてウェブに出戻り。その後ビリオンプラン立ち上げに参加。ご相談はこちらにお願いします。フェネック飼いたい。 →記事一覧