SNS Count CacheでSNS共有数を高速表示+オリジナルSNSボタンでwordpressを高速化

WEB制作, wordpress

WEBサイトやブログには今や必須とも言えるほど大きな影響を与えるSNS。
SNS共有ボタンが設置されていないサイトはほぼ無いくらいに普及していますね。

サイト運営者やブログ執筆者には重要なSNS共有ボタンですが、サイトの表示速度の低下に繋がるデメリットもあり、以前に自分でもwordpressでオリジナルのSNS共有ボタンを設置する方法を書いてこのブログに実装していましたが、TOPページやカテゴリページ等多くの記事数が表示されるページでは大きく負荷が掛かるので記事ページにだけ設置していました。

しばらくは改善策が思いつかなかったのでこの問題は放置していましたが、先日色々なwordpressのpluginとか探していたら素晴らしいpluginを見つけましたっ!

SNS Count Cacheというwordpress pluginで、ページ表示速度が大きく改善されたので、TOP、カテゴリ、記事ページにもSNSボタンを設置しました。

このpluginを開発・リリースされた@marubon_jpさんに感謝です。

スポンサーリンク

SNS Count Cacheで共有数を高速表示-インストールと設定

インストールからpluginの詳細な説明、記述例などは試行錯誤ライフハックさんのブログに書いてあります。
上記のページでは、pluginの詳細な説明や記述例等が書いてあります。

こちらではバージョンアップの際の変更点と、追加された設定項目などの説明などが解説されています。

ここからは、自分が行った作業と記述を載せておきます。

SNS Count Cacheのインストール

SNS Count Cacheのインストール

wordpress管理画面から【プラグイン】→【新規追加】→【SNS Count Cacheを検索】→【インストール】
これでインストールは完了

SNS Count Cacheの設定

SNS Count Cacheの設定

【設定】→【SNS Count Cache】でSettingのタブメニューを開く、【Dynamic caching based on user access】をSynchronous Cacheに設定。

表示用の記述例-オリジナルSNSボタンと共有数表示

SNSボタン表示例

SNSボタン表示例

TOPページなどの記事一覧を表示しているだけのページだと、共有数の表示だけで十分かと思いましたがせっかくなので押せるボタンにしてみました。記事ページにはfeedly等も含めているのでその記述も含め載せておきます。

まずはfunctions.phpへの記述
feedlyの購読者数を取得する為に書きます。

function feedly_count(){
    if (false === ($subscribers = get_transient('feedly_subscribers'))):
        $feed_url = rawurlencode(get_bloginfo('rss2_url'));
    $subscribers = wp_remote_get("http://cloud.feedly.com/v3/feeds/feed%2F$feed_url");
    $subscribers = json_decode($subscribers['body']);
    $subscribers = $subscribers->subscribers;
    set_transient('feedly_subscribers', $subscribers, 60 * 60 * 12);
    endif;
echo $subscribers;
    }

次に表示させる為の記述、例としてsingle.phpに記述します。
twitterやRSSのアイコンの表示はFontAwesomeを使っているので、aタグの中身は変更した方がいいです。

Font Awesome Icons

<div class="social">
	<a href="http://twitter.com/intent/tweet?text=<?php echo trim(the_title( "", false)); ?>&nbsp;|&nbsp;&url=<?php echo get_the_permalink() ?>" onclick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1' ); return false;" target="_blank" title="この記事をtwitterで共有する"><span class="twitter_design"><i class="fa fa-twitter"></i></span><span><?php if(function_exists('get_scc_twitter')) echo get_scc_twitter(); ?></span></a>
	
	<a href="http://www.facebook.com/sharer.php?u=<?php echo get_the_permalink(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,height=300,width=600');return false;" title="facebookでこの記事を友達に教える"><span class="facebook_design">F</span><span><?php if(function_exists('get_scc_facebook')) echo get_scc_facebook(); ?></span></a>
	
	<a href="https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo get_the_permalink() ?>" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;" title="GooglePlusで共有"><span class="google_design">G</span><span><?php if(function_exists('get_scc_gplus')) echo get_scc_gplus(); ?></span></a>
	
	<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo get_the_permalink() ?>&title=<?php echo trim(the_title( "", false)); ?>" target="_blank" onclick="window.open(this.href, 'window', 'width=550,height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;" title="はてなブックマーク"><span class="hatena_design">B</span><span><?php if(function_exists('get_scc_hatebu')) echo get_scc_hatebu(); ?></span></a>

	<a href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2F11neko.com%2Ffeed%2F" target="blank" rel="tooltip" data-toggle="tooltip" data-placement="top" title="feedlyでブログを購読する"><span class="feedly_Design">feedly</span><span><?php feedly_count(); ?></span></a>

	<a href="<?php bloginfo('rss2_url'); ?>" target="_blank" rel="tooltip" data-toggle="tooltip" data-placement="top" title="RSS購読"><span class="rss_design"><i class="fa fa-rss"></i></span></a>

	<a href="http://getpocket.com/edit?url=<?php echo get_the_permalink() ?>&title=<?php echo trim(the_title( "", false)); ?>" onclick="window.open(this.href, 'POwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;" rel="tooltip" data-toggle="tooltip" data-placement="top" title="あとで見る"><span class="pocket_design">Pocket</span></a>
</div>

最後にCSS部分です。
いつもどんなデザインにするか迷うんですよね。
SNSボタンのUIデザインは中々難しい・・・ぐぬぬ・・・

.grid .social,.single-in .social{
	margin:10px 0;
	text-align: center;
	background: #ffffff;
	font-family: impact;
	border: 7px dotted #efefef;
}

.grid .social a,.single-in .social a{
	display:inline-block;
	color:#cccccc;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
.grid .social a:hover,.single-in .social a:hover{
	text-decoration: none;
	color: #FFF;
	background: #6cc655;
}
@media(min-width:992px){
.twitter_design,.hatena_design,.google_design,.facebook_design{
	font-size:2.2em;
}

.grid .social span,.single-in .social span{
	margin:0 10px;
	font-size:1.6em;
}

}

@media(max-width:767px){
	.twitter_design,.hatena_design,.google_design,.facebook_design{
		font-size:1.2em;
	}
	.grid .social span,.single-in .social span{
		margin:0 5px;
		font-size:1em;
	}

}

.single-in .social a:first-child{
	border-left:1px solid #ccc;
}
.single-in .social a{
	border-right:1px solid #ccc;
}

あとがき

スピードテスト

スピードテスト

GTmetrix | Website Speed and Performance Optimizationで表示速度のテストをして見ましたが、数値的にはさほど変わらないといった印象ですが、体感速度は飛躍的にアップしました。(2倍くらいの差がある感じ)

なんかね、超嬉しいんですよ。
結構長い期間ページ表示速度で悩んで、自分の技術力も無い為、中々解決しなくてブログの更新頻度もかなり落ちてたんですが、解決して凄くすっきりしました。

共有数の取得先に関しては、あとはpocketとfeedlyに対応したら完璧ですね。
あとは共有数が増えるように、記事を頑張って書かないと・・・汗

素晴らしいpluginを公開してくださった@marubon_jpさんに何度も感謝です。ありがとうございます!

この記事が気に入ったら
『いいね』しよう!