【WordPress】SNSカウント数をオリジナルで高速表示できる「SNS Count Cache」

各SNSサービスが提供してる公式のシェアボタンは読み込み時間が遅く気になることがあります。とくに複数のSNSボタンを設置してる場合はなおさらでしょう。WordPressプラグインSNS Count CacheはSNSカウント数をキャッシュして表示するので表示速度の改善が期待できます。また、表示に関してもオリジナルのSNS共有ボタンをデザインすることができるので一石二鳥のプラグインです。

1

SNS Count Cacheのインストール

WordPressの管理画面メニューよりプラグイン>新規追加の検索フォームより「SNS Count Cache」で検索しインストール後に有効化します。

2

SNS Count Cacheの設定

プラグインを有効化した後、管理画面メニューにSNS Count Cacheが追加されますのでこちらで各種設定を行います。

SNS Count Cacheの使用・設定方法については開発者である試行錯誤ライフハックさんで詳しく解説をされているのでそちらをご覧ください。

3

SNS Count Cacheの導入

当サイトでもSNS Count Cacheを投稿ページに導入しています。
※以下ソースについてアイコンフォントの部位は省いてます。

投稿ページ

single.php
<div class="s_sbm">
<ul>
<li class="sf"><a href="https://www.facebook.com/sharer/sharer.php?src=bm&u=<?php the_permalink() ?>&t=<?php the_title(); ?>" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><span class="s_sname">facebook</span><span class="s_count"><?php if(function_exists('scc_get_share_facebook')) echo scc_get_share_facebook(); ?></span></a></li>
<li class="st"><a href="http://twitter.com/share?url=<?php the_permalink() ?>&text=<?php the_title(); ?>" onclick="window.open(this.href, 'Twindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><span class="s_sname">twitter</span><span class="s_count"><?php if(function_exists('scc_get_share_twitter')) echo scc_get_share_twitter(); ?></span></a></li>
<li class="sh"><a href="http://b.hatena.ne.jp/append?<?php the_permalink() ?>" onclick="window.open(this.href, 'Hwindow', 'width=750, height=600, menubar=no, toolbar=no, scrollbars=yes'); return false;"><span class="s_sname">hatena</span><span class="s_count"><?php if(function_exists('scc_get_share_hatebu')) echo scc_get_share_hatebu(); ?></span></a></li>
<li class="sg"><a href="https://plus.google.com/share?url=<?php the_permalink() ?>" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"><span class="s_sname">google</span><span class="s_count"><?php if(function_exists('scc_get_share_gplus')) echo scc_get_share_gplus(); ?></span></a></li>
</ul>
</div>
CSS
.s_sbm ul{
	list-style:none;
    letter-spacing: -.40em;
    }
.s_sbm li{
	display:inline-block;
    color: #666;
    text-align:center;
    width:25%;
    letter-spacing: normal;
    }
.s_sbm li a{
	color:#FFF;
    padding:10px 0;
    display:block;
    }
.s_sbm li.sf a{ background-color:#3b5998;}
.s_sbm li.sf a:hover{ color:#3b5998; background-color:#EEE;}
.s_sbm li.st a{ background-color:#33ccff;}
.s_sbm li.st a:hover{ color:#33ccff; background-color:#EEE;}
.s_sbm li.sh a{ background-color:#008fde;}
.s_sbm li.sh a:hover{ color:#008fde; background-color:#EEE;}
.s_sbm li.sg a{ background-color:#da4c36;}
.s_sbm li.sg a:hover{ color:#da4c36; background-color:#EEE;}

アップデートでさらに多機能になってきましたし、使い勝手の良いプラグインです。

Advertisement