さらなる高速化を。自作SNSボタンをキャッシュしよう

この間つくった自作ソーシャルボタン、いろいろな方につかっていただいているようで感謝感激雨霰でございます。

前回の記事ではPHPから各サービスのAPIを通してソーシャルカウントを取得していました。しかし、この方法では記事にアクセスがある度にAPIを叩いてしまい、結果として大幅な高速化にはなりませんでした。

そこで、ソーシャルカウントをバックグラウンドで取得してキャッシュしておくようなプラグインを自分で書こうと思ったのですが……

既にありました。

それが、SNS Count Cacheというプラグインです。

このSNS Count Cacheを使って前回作ったオリジナルSNSボタンをさらに高速化してみたいと思います。

前回の記事も併せてお読みください。

SNSボタンのデザインがばらばらだったので自作してみた。(Stinger5カスタマイズ)

困ったときは猫に喋らせろというのが僕の家の家訓なんですよ。たぶん。 さて。SNSシェア用のボタンはほとんどのブログが設置しているのではないでしょうか。 ただ、シェアボタンは各SNSが作っているので、デ

sakueji.com

SNS Count Cacheのインストール

プラグインの新規追加からSNS Count Cacheを検索し、インストールして有効化します。

画像の用意

上の画像をダウンロードして自分のサイトにアップロードしてください。

sns.phpの編集

SNS Count CacheではTwitter、Facebook、Google+、はてなブックマークのカウント数をバックグラウンドで取得してキャッシュしておいてくれます。

feedlyのカウントは取得できないので、それだけPHPで取得します。

【あなたのフィードのURL】にはWordpressのフィードURLを入れましょう。このサイトの場合はhttp://sakueji.com/feed/です。

【Twitterアカウント】にはあなたのTwitterアカウントのIDを入れましょう。@はつける必要なしです。このサイトの場合はejinoteです。

<!--?php //feedly $feed = '【あなたのフィードのURL】'; $feed = rawurlencode($feed); $json = @file_get_contents("http://cloud.feedly.com/v3/feeds/feed%2F{$feed}");  $obj = json_decode($json,true); if(isset($obj['subscribers'])){$count = $obj['subscribers'];}else{$count = 0;} $fe_count = $count; ?-->
<div class="sns">
<ul class="snsb clearfix">
<li><!--?php if(function_exists('get_scc_twitter')) echo get_scc_twitter(); ?--><a href="https://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>&via=【Twitterアカウント】" target="_blank"><span class="sns-icon twitter">twitter</span></a></li>
<li><!--?php if(function_exists('get_scc_facebook')) echo get_scc_facebook(); ?--><a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank"><span class="sns-icon facebook">facebook</span></a></li>
<li><!--?php if(function_exists('get_scc_gplus')) echo get_scc_gplus(); ?--><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank"><span class="sns-icon gplus">google+</span></a></li>
<li><!--?php if(function_exists('get_scc_hatebu')) echo get_scc_hatebu(); ?--><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>" target="_blank"><span class="sns-icon hatebu">はてなブックマーク</span></a></li>
<li><!--?php echo $fe_count; ?--><a href="http://cloud.feedly.com/#subscription/feed/【あなたのフィードのURL】" target="_blank"><span class="sns-icon feedly">feedly</span></a></li>
</ul>
</div>

style.cssの編集

コピー＆ぺったん(略してコピペ)してください。

【アップロードした画像のURL】は、管理画面の「メディア」>「ライブラリ」からアップロードした画像を選択し、

ここのURLを入れてください。

Stinger5の場合、

@media only screen and (max-width:780px) {

より前に書き加えてあげてください。

.snsbox{
overflow:hidden;
}
.snsbox li{
margin: 0 5px 5px 0;
float: left;
list-style:none;
}
.sns-icon {
display: block;
width: 70px;
height: 20px;
text-indent: -9999px;
background: url('【アップロードした画像のURL】') no-repeat;
}
.facebook { background-position: 0 -80px; }
.twitter { background-position: 0 -60px; }
.gplus { background-position: 0 -20px; }
.hatebu { background-position: 0 -40px; }
.feedly { background-position: 0 0; }
.sns-count {
position: relative;
display: block;
width: 68px;
margin-bottom: 7px;
padding: 3px 0;
text-align: center;
border: 1px solid #aaa;
border-radius: 3px;
background: #fff;
}
.sns-count:after, .sns-count:before {
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
content: ' ';
pointer-events: none;
border: solid transparent;
}
.sns-count:after {
margin-left: -5px;
border-width: 5px;
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
}
.sns-count:before {
margin-left: -6px;
border-width: 6px;
border-color: rgba(170, 170, 170, 0);
border-top-color: #aaa;
}

SNS Count Cacheの使い方

キャッシュの取得方法を設定しよう

SNS Count Cacheはデフォルトでは10分ごとに20記事のSNSカウントをキャッシュしてくれます。

画像ソース：http://marubon.info/intro-wordpress-plugin-sns-count-cache-4979/

そのため、記事の公開直後はSNSカウントが表示されません。

そこで、「設定」>「SNS Count Cache」を確認しましょう。

新しい記事はここがCachedになっていないことが多いので、設定をいじりましょう。

カウントを取得する間隔を変える

「Interval cheking and caching SNS share count (sec)」はソーシャルカウントを取得する間隔です。デフォルトは600秒(10分)になっているので、ここを300などと入力すれば5分間隔で取得してくれます。

カウントをアクセスにあわせて取得する

「Dynamic caching based on user access」はユーザーのアクセスに合わせてSNSカウントを取ってくるかどうかです。デフォルトはNoneになっています。

ここをNone以外にするとユーザーのアクセスに合わせてカウントを取得してくれます。

• Synchronous Cache：ページの表示と同時に取得するため、たまたまキャッシュが切れているタイミングでアクセスした人はページの表示が遅くなります。代わりに、カウントが表示されないことがありません。
• Asynchronous Cache：ページの表示が行われたページを優先的に取得します。アクセス1人目に限りカウントが表示されません。それ以降は問題なく表示されます。

ある程度記事量がある人はAsynchronous Cacheを使うとイイと思います。

また、Super CacheやTotal Cacheなどのキャッシュプラグインを使っている場合、Synchronous Cacheにしておかないとカウント数不在のままキャッシュが取られてしまうので、注意しましょう。

まとめ

• ソーシャルカウントを取得するならSNS Count Cacheを使うのがよさそう
• 新しい記事のカウントをすぐ取得したいならDynamic Cacheをいじろう
• 他のキャッシュプラグインを使っているならSynchronous Cacheを使おう
• その他の人はAsynchronous Cacheを使おう

こんなところでしょうか。前回の記事(CSSスプライトの解説)も併せて参考にしていただけると幸いです。

SNS Count Cacheを開発してくださったmarubonさん、助かります。ほんとうにありがとうございます。

[試] WordPressプラグイン SNS Count Cache | シェア数キャッシュで表示速度向上 | 試行錯誤ライフハック

それでは。またお会いしましょう。

 Wordpress
 ブログカスタマイズ