[WP Plugin] WordPress: SNS Count Cache で SNS シェア数とボタンを高速表示させる

あわせてツイート数表示も復活させる。

このプラグインの素晴らしいところ。

  • http と https のシェア数を合算してくれる。
  • シェア数を定期的に取得しキャッシュ。ページの表示速度を改善できる。
  • シェア数付きのカスタムデザインボタンを作成できる。
  • v.0.9.0 で Twitter シェア数も取得できるようになった。

追記(2016/10/20)

インストール

公式で配布されている。

v.0.9.0

SNS Count Cache — WordPress Plugins

作者さんのブログ。

SNS Count Cache | 試行錯誤ライフハック

このエントリを書いている途中にバージョンアップ。

設定

SNS Count Cache の管理画面「設定」タブから設定を行う。

  • ディフォルト設定で問題ない。
  • 「シェア変動分析機能」を有効化。スケジューラ毎週で設定。
  • サイトの HTTPS 移行後に「HTTPからHTTPSへのスキーム移行モード」を有効化する予定。

各機能については、こちらが詳しい。

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

Twitter シェア数を表示させる

プラグイン作者さんのブログで説明されているとおり、Twitter の仕様が変更された。

[試] Twitterのシェア数取得先エンドポイント閉鎖がSNS Count Cacheに与える影響 | 試行錯誤ライフハック

  • 2015年10月からツイート及びフォロー公式ボタンのデザインが一新される。
  • 新デザインのボタンでは、シェア数の表示が廃止される。
  • (新デザインでは不要なので)旧ボタンのシェア数取得先として非公式に公開していたAPIエンドポイントも閉鎖する。

count.jsoon で ツイート数を取得する

count.jsoon という素晴らしいサービスを利用することで、ツイート数を取得することができる。

  • Twitter 公式のツイート数をカウントするサービス「widget.js」と「count.json」が廃止。
  • 同じ機能を提供するのが、digitiminimi が開発した「widgetoon.js」と「count.jsoon」。

サービスについて | widgetoon.js & count.jsoon

事前に申請と Twitter 連携を行うと、クロールを開始する。
利用可能になるとメールでお知らせしてくれる。
widgetoon.js を利用し、ツイート数付きのボタンを以下のコードで表示できる。

<script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script>
<a href="http://twitter.com/share"
  class="twitter-share-buttoon"
  data-url="<?php the_permalink(); ?>"
  data-text="<?php the_title(); ?>"
  data-count="vertical"
  data-lang="ja">ツイート</a>
<script> widgetoon_main(); </script>

2016-05-30_wpsns_01

廃止されたTwitterの「シェア数付きボタン」を表示させる方法、「count.jsoon」の基本的な使い方

SNS Count Cache を count.jsoon で復活させる

v.0.9.0 より、Alternative Twitter API の設定が可能になった。

「管理画面>設定」から Twitter API を count.jsoon API 他に変更でき、これによりクロール先が変更される。
正しく設定できていれば、SNS Count Cache の「管理画面>キャッシュ状況」から「Cache」ボタンをクリックすることで「完全キャッシュ」されることを確認できる。

2016-05-30_wpsns_02

SNS シェア数とボタンの表示

SNS Count Cache の「管理画面>ヘルプ」タブの情報を元にコードを作成する。

関数説明
scc_get_share_twitter()キャッシュからTwitterのSNSカウントが返されます。
scc_get_share_facebook()キャッシュからFacebookのSNSカウントが返されます。
scc_get_share_gplus()キャッシュからGoogle+のSNSカウントが返されます。
scc_get_share_hatebu()キャッシュからはてなブックマークのSNSカウントが返されます。
scc_get_share_pocket()キャッシュからPocketのSNSカウントが返されます。
scc_get_share_total()キャッシュから対象として設定されたSNSのカウントの総和が返されます。
scc_get_follow_feedly()キャッシュからFeedlyのフォロー数が返されます。

HTML と CSS はこちらを利用する。

socialButtons.php というファイルを用意。


エントリを表示するテンプレート内に以下で差し込む。

single.php
<!-- share -->
<?php get_template_part('socialButtons'); ?>
<!-- /share -->

2016-05-30_wpsns_03

前回との比較

プラグインを JavaScript へ置き換え

SNS 用のプラグインから、以前利用していた JavaScript での取得に置き換え。

After: PageSpeed Insights スコア

  • モバイル … 76 -> 80/100
  • PC … 82 -> 85/100

SNS Count Cache を利用

さらに SNS Count Cache を利用し、CSS デザインボタンへ置き換え。

After: PageSpeed Insights スコア

残りは AdSense‎, Disqus, Theme 絡み。
ひとまずやり尽くしたか。

  • モバイル … 76 -> 83/100
  • PC … 82 -> 89/100
% ab -c 2 -n 100 https://www.d-wood.com/blog/2013/12/27_5159.html
This is ApacheBench, Version 2.3 <$Revision: 1706008 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/
Benchmarking www.d-wood.com (be patient).....done
Server Software:        Apache/2.2.31
Server Hostname:        www.d-wood.com
Server Port:            80
Document Path:          /blog/2013/12/27_5159.html
Document Length:        33004 bytes
Concurrency Level:      2
Time taken for tests:   14.440 seconds
Complete requests:      100
Failed requests:        0
Total transferred:      3333500 bytes
HTML transferred:       3300400 bytes
Requests per second:    6.93 [#/sec] (mean)
Time per request:       288.793 [ms] (mean)
Time per request:       144.397 [ms] (mean, across all concurrent requests)
Transfer rate:          225.45 [Kbytes/sec] received
Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:       16   21  16.0     19     179
Processing:   202  265  70.4    241     600
Waiting:      102  135  26.9    126     233
Total:        220  287  78.3    261     715
Percentage of the requests served within a certain time (ms)
  50%    261
  66%    277
  75%    289
  80%    304
  90%    370
  95%    472
  98%    622
  99%    715
 100%    715 (longest request)

神プラグインと神サービスで、失われた機能が復活し、表示速度が改善されました。
ありがとうございます。

補遺