導入すべし!WordPressを高速化するプラグインSNS Count Cacheが便利![自作爆速SNSボタン付き]

爆速表示のシェアボタンを作る!

今や付いていないブログを探すことさえ難しい、SNSのシェアボタン。各社の公式ボタンは簡単なコードを挿入するだけで簡単ですが、表示のたびに本家のサーバーに問い合わせるためブログの表示を遅くしている原因だったりします。

そこで最近は公式ボタンを使わないシェアボタンなども登場していますが、そうなると今度はシェア数が分からない。。となかなかしっくり来るものがありません。

ところがさすがWordpress。あるんですよね、オリジナルのボタンも使えてシェア数も表示できる神プラグインが。

もうかれこれ半年ほど運用していますがとても快適。今回はそんな神プラグイン、SNS Count Cacheをご紹介。個人的には今のところの2015年ベストプラグインです。

いわゆるプラグインいれてハイおしまいみたいな簡単なものでは無いですが、導入するだけの価値は十分にあると思います。

本日のコンテンツ

  • オリジナルボタンを使えて、シェア数表示、しかも軽い!
  • SNS Count Cacheの基本設定
  • 取得したシェア数を使う
  • オリジナルの爆速SNSボタンを作る

オリジナルボタンを使えて、
シェア数表示、しかも軽い!

たとえばこのブログのSNSシェアボタン、各社公式のボタンでは無くCSSで書いたオリジナルの軽量ボタン。しかもシェア数も出てますよね。

SNS Count Cache

SNS Count Cache

これを実現するのがSNS Count Cache

SNS Count Cache
[試] WordPressプラグイン SNS Count Cache | シェア数キャッシュで表示速度改善

シェア数を内部に保持するから早い

このSNS Count Cacheですが、名前に「キャッシュ」とついているように、TwitterやFacebook、はてブといったブログのシェア数を定期的にバックグラウンドで巡回、更新してこちら側のサーバーにキャッシュとして保持しておくことができるプラグインです。

今までならツイッターのSNSボタンはTwitterのサーバーに画像を問い合わせ、取得し、シェア数はまた別で問い合わせて取得、FacebookはFacebookのサーバーに。。みたいな感じでアクセスのたびにいろんな所に情報を問い合わせに行っていたのを、SNS Count Cacheならシェア数やボタンはこちら側に保管してあるので、自分のサーバー内から情報持ってくるだけで済みます。

最近は公式ボタンのコードも非同期になったとはいえ、内部からすぐに取り出すのと、外部にいちいち問い合わせてデータを持ってくるのでは雲泥の差です。

シェア数を積極的に活用できる

さらにSNS Count Cacheのスゴイ所は自分のサーバーにSNSシェア数を保持しているため好きなときに自由にその数字を使うことが出来ます

例えば本家のstudio9ならこんな感じでシェア数を表示しています(ある程度カスタマイズが必要)。

SNS Count Cache

↑これはSNS Count Cacheで保持しているトータルのシェア数。会社をまたぐシェア数の表示は普通は難しいですよね。

SNS Count Cache

こちらは最近のアップデートで搭載されたシェア数の増分を表示。毎日午前4時にリセットしてその日のシェア数の増加分だけ表示しています。

こういう攻めのシェア数表示をできるのもSNS Count Cacheの良いところです。

全部紹介するのは大変なので、今回は基本設定と爆速SNSボタンの実装の辺りをご紹介します。

SNS Count Cacheの基本設定

SNS Count Cacheの基本設定は簡単です。

まずはSNS Count Cacheを普通のプラグインと同じ要領でインストール。

SNS Count Cache

作者は日本の方で結構頻繁にアップデートされてます。ここでは執筆時点で最新のVer0.8.0を元に紹介していきます。

シェア基本キャッシュ機能の設定

インストールしたら左側カラムに「SNS Count Cache」が表示されるのでその中の「設定」へ。

Ver0.8.0から日本語対応になりました☆

何ならデフォルトのままでも使えますが、私が現在使っている設定を元にご紹介していきます。

まずはシェア基本キャッシュ機能の設定の設定から。

SNS Count Cache

SNS Count Cacheはブログ記事のSNSシェア数をバックグラウンドで収集し、サーバー内に更新しながら溜めておくためのプラグインです。

まずはバックグラウンドで収集するシェア数の対象をチェック。通常は全部チェックしておけばOK。

[カスタム投稿タイプ] は普通は何もしなくてOK。デフォルトで投稿(post)、個別ページ(page)のキャッシュはしてくれます。オリジナルでカスタム投稿タイプを作っててシェア数を表示したければ記入しましょう。

[シェア数のチェック間隔(秒)] もデフォルトでOK。定期的に巡回する間隔を指定できます。シェア数を早くキャッシュしたくて間隔を早くしたい気持ちになりますが、間隔が早すぎるとうまく動作しないことがあります(たぶん処理が終わらないうちに次の処理が来ちゃうとかかな?)

デフォルトの10分で様子を見ながら徐々に短くするのが吉。

[一度にチェックするコンテンツ数] これは定期チェック(デフォルト10分間隔)する時に一度にシェア数を確認する記事の数です。

SNS Count Cacheは一度にすべての記事の取得するワケではありません。徐々に少しずつキャッシュを貯めていく仕組みです。ここも欲張りすぎると上手く動作しないことがあるのでまずはデフォルトで良いかと思います。

本家のstudio9では以前600秒間隔 / 25記事で設定してましたが、定期チェックがたまに機能しないなど問題があったため、現在は 900秒 / 20記事 にセットして落ち着いています。

記事数が多いブログは後で紹介するダイナミックキャッシュ機能があるのでここの頻度はそんなに気にする必要はありません。

[HTTPからHTTPSへのスキーム移行モード] はSNS Count Cacheの特筆すべき機能の一つかと思います。

最近HTTPからより安全性の高いHTTPSスキームへの移行が求められており、GoogleもそろそろHTTPSサイトをより優遇するようになるかもよ?みたいなことを言ったりしてます。

HTTPからHTTPSになるとURLが変わってしまうので今まで蓄積したシェア数はゼロになってしまうのですが、SNS Count Cacheなら内部でHTTPとHTTPSのシェア数を合算して表示してくれるようです。

まだ私のサイトはHTTPですが将来本格的にHTTPSを導入したときにも表面的にはシェア数を失わなくて済むので助かります。

HTTPからHTTPSへ移行した人は有効にしておきましょう。まだHTTPの人は無効でOK。

殆どデフォルトでOKですね。

シェア臨時キャッシュ機能

これもめちゃ便利な機能です。

上でシェアの間隔はデフォルトで10分で20記事と言いましたが、これだと1時間で120記事のシェア数更新です。

例えば記事が2,000本あるサイトならシェア数の更新チェックが終わって次の更新まで約17時間かかってしまいます。普通は旬の過ぎた記事が1日でシェア数倍増などする訳ないので十分なのですが、公開後直後の記事は話は別ですよね。

運良くバズってSNSシェアがガンガン回ってるのにキャッシュされないから表示されるシェア数がいっこうに増えないというのは悲しいです(手動でキャッシュも可能だけど)

そんな悲しい思いをしなくても良くなるのがこの「シェア臨時キャッシュ機能」。投稿から一定時間内は強制的に5分おきにシェア数を更新してくれる機能です。

SNS Count Cache

[投稿日からコンテンツを新着と見なす期間] で強制5分おきチェックをさせたい期間を指定して下さい。通常3日もあればシェア数は落ち着くのでここもデフォルトのままで良いと思う。

シェア1万越えになるようなメガバズを連発する自信あるなら4日とか5日にしてもいいかなって程度。

シェア変動分析機能

これは比較的最近、Ver0.7.0で搭載された機能。

はてブ的にブログ内のホットエントリーを確認したり表示できたりする機能です。ある期間を設定して期間内のシェア数の増分をとることができます。

上でも紹介したstudio9のこの数字↓はシェア変動分析機能を使って表示しています。

SNS Count Cache

デフォルトでは設定が無効になっていると思いますが、有効にしていても良いと思います。みんなに見えるように表示しなくても管理画面内で増減を確認できるので自分だけで急上昇記事を確認することも可能。

SNS Count Cache

手動で更新間隔をリセットしても良いし、スケジューラーで更新しても良し。私は最もアクセスの少なくなる毎日午前4時にリセットしています。アクセス数の少ないブログなら毎週とかのほうが数字の増減確認しやすいかも。

フォロー基本キャッシュ

RSSリーダーであるFeedlyのフォロー数を取得する機能。これは記事単位ではなくブログ単位のフォロー数を表示します。自分がFeedly使って無くてもフォロー数表示してくれます。

この数はRSSリーダーを使ってまでこのブログの更新を逃さずチェックしたいという純粋なブログのファンの数と考えることも出来ますね。

ここも普通はデフォルト設定でOK。

SNS Count Cache

チェック間隔は86,400秒(24時間)で十分でしょう。Feedlyのフォロワー数も数時間で劇的に増えることは通常ありません。

[対象フィードタイプ] も普通はデフォルトでいいです。何のことやらという人は自分のブログのURLの後に /feed/ を表示して変な文字のページ(このブログならこんな感じ)が表示されればデフォルトでOK。

RDFやATOMを使ってる人は適宜変更します。

動的キャッシュ機能

SNS Count Cacheは通常上で決めた基本の更新間隔で記事のキャッシュを取得していきますが、仕様上一定時間が経つと保持していたキャッシュを破棄するようになっているようで(将来使わなくなってもゴミを残さない仕様みたい)、たまにキャッシュ切れしている記事があったりします。

また、設定変更直後はキャッシュがクリアされるのでゼロからスタートです。

そんなキャッシュがなにもない記事にアクセスがあったときにどうするの?というのがこの設定。

SNS Count Cache

ここは「有効(同期)」「有効(非同期)」「有効(非同期2次キャッシュ)」「無効」とありますがここもデフォルトの「有効(非同期2次キャッシュ)」でOK。

ちゃんと理解していないのですが(間違ってたら教えて下さい^^;)、まずは動的キャッシュを「有効」とすることでキャッシュが無い状態の記事にアクセスがあった場合、基本のシェア数チェックを待つこと無く動的にシェア数をチェックしに行くことになります。これによりアクセスの多い人気のページはたとえキャッシュが切れてたとしてもシェア数が表示されないリスクがずいぶんと低くなります。

それぞれの意味

そのうえで、「有効(同期)」とすると、新しいシェア数を取得するまでページの表示を待つモード。確実にシェア数は表示されますがキャッシュの無い状態でアクセスしてしまった人のページの表示が遅くなる可能性があります。

「有効(非同期)」はキャッシュの無いページにアクセスすると、シェア数チェックがバックグラウンドで実行され記事はシェア数の取得を待つこと無く表示されます(非同期)。記事は素早く表示されますが、キャッシュが無い状態のでアクセスした人にはその記事のシェア数は表示されません。

非同期2次キャッシュを使うべし

「有効(非同期2次キャッシュ)」は非同期の発展モード。SNS Count Cacheはシェア数キャッシュを1次と2次の2つ持っています。1次キャッシュが無い状態でアクセスされた場合は予備の2次キャッシュを表示させ、裏で1次キャッシュを取得しに行くというモード。これなら1次と2次のどちらかが生きてさえいればシェア数を表示してくれるオススメモードです。

「無効」にするとキャッシュがない記事にアクセスがあっても定期巡回(ブログの記事数によっては数時間~数十時間後)まで待つことになります。。

データクローラー機能

これも最近追加された機能だったかな?確か定期巡回の効率をアップしますよみたいな機能です。ここもデフォルトでOK(適当

SNS Count Cache

データエクスポート機能

シェア数の一覧をCVSでダウンロードできます。エクセルで開いてみると何じゃこりゃ読みにくい。。となりますが、ピボットテーブルにすると神のごとく見やすい表になります。

作者の方もこれを狙ったみたい。ピボットテーブルまじ便利ね。最近知りました。

[試] 表示速度改善のその先へ!進化するWordPressプラグイン SNS Count Cache
ピボットテーブルへの言及あり

以上で設定は終わりです。

この設定が終わればあとはしばし待つだけで自分のサーバーに各記事のシェア数が格納されます。あとはこの数字を好きなように使いまくるだけです。

ワクワクしますねw

各タブで状態をチェック

データが貯まってくると各タブで自分のブログのシェア数一覧を確認できるようになります。これ意外とみたくても見られない数字ですよね。こうやって内向きに使うのもありです。Twitterを昇順にするとか並べ替えも出来ます。

このブログのシェア数はちょっとショボイのでstudio9の方のTotalシェア数上位10記事を並べてみるとこんな感じ。

春にあった写真パクり事件のシェア数が10,000越えでキラリと輝いていますねぇ。。

SNS Count Cache

隣の「話題のコンテンツ」はシェア変動分析機能を有効にしていると出てきます。

いわゆるホットエントリーですね。

取得したシェア数を使う

取得したシェア数を使うときはあらかじめ用意された関数を使います。

シェア数を使うために用意されている関数は以下の7つです(たぶん)

ループの中でこの関数を使えばその記事のシェア数を拾って来てくれます。

また、ホームページ(TOPページ)のシェア数を取得する場合は引数に「array( post_id => ‘home’)」を設定してあげれば良いです。

(参考)[試] Webデザインに自由を!WordPressプラグイン SNS Count Cache 0.6.0リリース

その他シェア数の増分なども取得できたりするのですが、ちょっと脱線しそうなのでそれはまたの機会で。

オリジナルの爆速SNSボタンを作る

では最後にSNS Count Cacheでオリジナルの爆速SNSボタンを作ってみましょうか。HTMLとかCSSの詳しい説明はとりあえず置いておいて、studio9で使ってるコードだけ参考に置いておきます。

まずは記事上部に並んでるSNSアイコン。こんなやつです。

SNS Count Cache 自作SNSボタン

基本構造はこちらのサイトのものを使わせてもらいました。
コピペで利用!WordPressに自作のソーシャルバルーンボタンを設置するためのスタイル設定方法
SNS Count Cacheとの連携はこの記事も参考にどうぞ
【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよ

記事上部用のシンプルなボタン

今回は右詰で表示したかったのでフロートで右から詰めてます。

また、これをテンプレートに直接ぶち込むのはちょっと大変なので関数化してfunction.phpに入れてます。これでテンプレートの好きな場所(ただしループの中)でシェア数を表示しながらSNSボタン表示できます。

このコードを使うときはfunction.phpの中に入れて下さい。(作業前はfunction.phpのバックアップ取ってね)

使いたい場合はテンプレートのループ中の挿入したい場所に

<?php SNS_btn_horizontal_head() ?>

を入れて下さい。

*実際にstudio9で動いているものをコピペして持ってきてますがこのコードだけでの動作確認はしていません。おかしかったらご指摘頂けると助かります。

肝心のSNS Count Cacheからシェア数を取得する部分は例えばTwitterならこんな感じ。

はじめに「scc_get_share_twitter」があるかどうか(プラグインが有効かされてるかどうか)判断して、あればシェア数を表示という流れ。

でもシェア数ゼロのときに「0」と表示するのはなんだか寂しくなるのでゼロの時は何も表示しないようにさせてます^^;

大きなバルーンタイプのボタン

続いてバルーンタイプならこんな感じ。完成形はこれです。

記事下部に表示するためにつくったのでFeedlyボタンを追加で設置しました。

SNS Count Cache 自作SNSボタン

これも右詰にしたかったので上から見るとFacebookボタンでは無くFeedlyボタンが先でフロートで右から並んでます。

これも関数化しました。使う場合はfunction.phpの中へ。表示させる場合はテンプレートのループ中の挿入したい場所に

<?php SNS_btn_horizontal_bottom() ?>

を入れて下さい。

FeedlyのリンクURLは記事のURLと関係ないのでそのまま固定のものを入れてます。(このまま使うとstudio9のfeed画面に飛ばされます)

自分のサイトのFeedlyリンクを確認したい場合はFeedlyボタン作成ページに行って自分のFeedページ(普通は(ブログのURL)/feed/)を入れるのが早いです。

CSS(参考)

ちなみに上記コードだけでは当然色とか付かないし表示も乱れるはず。

参考までにCSSも置いておきます。なにか不足してて表示乱れてたらスミマセン。。

こんな感じでSNS Count Cacheを使えたらステキですね。今まではTwitter、Facebook、Google+、はてブ、poket、Feedlyと上下2カ所でボタンとシェア数の問い合わせを外部に向けてしていたのですが、それがすべて中の情報で済むようになったのだから表示もサクサクです。

ブログの表示スピードが速いのは間違いなく正義ですからWordpressでブログやってる人はSNS Count Cacheオススメです。

スポンサーリンク