[WP Plugin] WordPress: SNS Count Cache で SNS シェア数とボタンを高速表示させる
あわせてツイート数表示も復活させる。
[markdown]
このプラグインの素晴らしいところ。
– http と https のシェア数を合算してくれる。
– シェア数を定期的に取得しキャッシュ。ページの表示速度を改善できる。
– シェア数付きのカスタムデザインボタンを作成できる。
– v.0.9.0 で Twitter シェア数も取得できるようになった。
> 追記(2016/10/20)
>
> * [SNS Count Cache 0.10.0でFacebookをカウントする方法 | OPENCAGE](https://open-cage.com/sns_count_cache_0_10_0-fb-count/)
## インストール
公式で配布されている。
“`
v.0.9.0
“`
> [SNS Count Cache — WordPress Plugins](https://wordpress.org/plugins/sns-count-cache/screenshots/)
作者さんのブログ。
> [SNS Count Cache | 試行錯誤ライフハック](https://marubon.info/tag/sns-count-cache/)
このエントリを書いている途中にバージョンアップ。
> * [[試] WordPressプラグイン SNS Count Cache (Ver. 0.9.0)リリース | Twitterシェア数、Push7フォロワー数対応等 | 試行錯誤ライフハック](https://marubon.info/intro-update-wordpress-plugin-sns-count-cache-8-5885/)
## 設定
SNS Count Cache の管理画面「設定」タブから設定を行う。
– ディフォルト設定で問題ない。
– 「シェア変動分析機能」を有効化。スケジューラ毎週で設定。
– サイトの HTTPS 移行後に「HTTPからHTTPSへのスキーム移行モード」を有効化する予定。
各機能については、こちらが詳しい。
> [導入すべし!Wordpressを高速化するプラグインSNS Count Cacheが便利![自作爆速SNSボタン付き] | studio9 personal](http://personal-studio9.com/sns-count-cache/)
## Twitter シェア数を表示させる
プラグイン作者さんのブログで説明されているとおり、Twitter の仕様が変更された。
> [[試] Twitterのシェア数取得先エンドポイント閉鎖がSNS Count Cacheに与える影響 | 試行錯誤ライフハック](https://marubon.info/announcement-sns-count-cache-twitter-endpoint-disappearance-5851/)
>
> – 2015年10月からツイート及びフォロー公式ボタンのデザインが一新される。
> – 新デザインのボタンでは、シェア数の表示が廃止される。
> – (新デザインでは不要なので)旧ボタンのシェア数取得先として非公式に公開していたAPIエンドポイントも閉鎖する。
### count.jsoon で ツイート数を取得する
[count.jsoon](https://jsoon.digitiminimi.com/service_desc.html) という素晴らしいサービスを利用することで、ツイート数を取得することができる。
– Twitter 公式のツイート数をカウントするサービス「widget.js」と「count.json」が廃止。
– 同じ機能を提供するのが、digitiminimi が開発した「widgetoon.js」と「count.jsoon」。
> [サービスについて | widgetoon.js & count.jsoon](https://jsoon.digitiminimi.com/service_desc.html)
事前に申請と Twitter 連携を行うと、クロールを開始する。
利用可能になるとメールでお知らせしてくれる。
[widgetoon.js](https://jsoon.digitiminimi.com/service_usage.html) を利用し、ツイート数付きのボタンを以下のコードで表示できる。
“`php
“`
> [廃止されたTwitterの「シェア数付きボタン」を表示させる方法、「count.jsoon」の基本的な使い方](http://nelog.jp/count-jsoon)
### SNS Count Cache を count.jsoon で復活させる
v.0.9.0 より、Alternative Twitter API の設定が可能になった。
「管理画面>設定」から Twitter API を count.jsoon API 他に変更でき、これによりクロール先が変更される。
正しく設定できていれば、SNS Count Cache の「管理画面>キャッシュ状況」から「Cache」ボタンをクリックすることで「完全キャッシュ」されることを確認できる。
## 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 はこちらを利用する。
> * [CSS で SNS シェアボタンをカスタマイズする | deadwood](https://www.d-wood.com/blog/2016/06/01_8097.html)
socialButtons.php というファイルを用意。
> * [テンプレートタグ/the title attribute – WordPress Codex 日本語版](https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_title_attribute)
> * [テンプレートタグ/get permalink – WordPress Codex 日本語版](https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_permalink)
エントリを表示するテンプレート内に以下で差し込む。
“`php:single.php
“`
## 前回との比較
### プラグインを 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
“`prettyprinted
% 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)
“`
神プラグインと神サービスで、失われた機能が復活し、表示速度が改善されました。
ありがとうございます。
## 補遺
> * [SNSボタンの設置とカスタマイズ方法 | murashun.jp](https://murashun.jp/blog/20150628-01.html)
> * [SNSボタンをオリジナルデザインに!設置方法&シェア数の取得方法まとめ | Design Color](http://designcolor-web.com/2014/08/18/original_sns_button/)
[/markdown]