ツイート数やはてブ数を取得して高速表示できるSNS Count Cache
1
2
0
『SNSのシェア数だけを取得して高速表示したいな…』
Twitterやはてなブックマークなどのシェアボタンをブログに設置するのはもはや当たり前となっていますが、残念ながら公式のボタンはとにかく遅いのがネックです。
ホームページの記事一覧それぞれにボタンを設置すると表示速度にかなり影響しますし、個別記事のタイトル下に設置しても、ユーザーはボタンが表示される前に記事を読み進めるのであまり意味がありません。
そこでいろいろ試してみた結果、「SNS Count Cache」というWordPressプラグインがすこぶる便利で、しかも劇的に速かったので使い方をご紹介します。
目次
ブログ記事のSNSシェア数を表示する意味
最近はシェア数を表示しないオリジナルボタンを設置するブログも増えてきました。
その理由は、下記の2点です。
- ブログデザインに公式ボタンがあわないから
- シェア数を表示すると重くなるから
フラットデザインを取り入れている場合は、公式ボタンより自分で作成したボタンのほうがなじみますよね。
- フラットデザイン
- 過度な装飾を控えたシンプルで平面的なデザイン。質感や立体感を排除し、単色・べた塗りのパーツで構成されているため素人には表現が難しい
でも、デザインうんぬんよりも、表示速度に影響するという理由でシェア数を表示しないブログが多いんじゃないかと勝手に推測しています。
シェア数を表示するメリット
SNSのシェア数を表示すると、どんなメリットがあるのでしょうか。
| 設置場所 | メリット（デメリット） |
|---|---|
| 記事一覧 記事上部 |
記事が読まれていることをアピールする |
| 記事下部 （CTA） |
みんながシェアしているから自分もシェアしたいと思わせる |
もし各SNSのシェア数が100以上あるなら、どこに設置しても強力なアピールポイントとなります。ただ、誰もシェアしていないカウントが0の状態なら“読まれていない”アピールになりかねません。
シェア数によってはメリットではなくデメリットとなるため、シェアしてくれる人が増えてきたらカウントを表示するのが良いかもしれません。
気をつけなければならないのは、オリジナルボタンを作成する場合、それがシェアボタンだとわからなければ意味がないということです。
NaifixのSNSボタン
以上のことをふまえつつ、このブログではSNSボタンの設置やシェア数の表示をいろいろテストしています。
記事一覧では、はてブ数だけ表示したり、タイトル下はツイート数を表示してスマホでは出力しないようにしたり。
ただ、記事下のボタン群は記事を読み終わるときには表示が完了するので、そこだけは開設当初からあまりいじっていません。公式ボタンを超えるデザインセンスがないし…
こうしてキャプチャ画像として載せても、つい押したくなってしまうのが公式ボタンの良いところだと思います。
理想は、「Twitter」「Facebook」「はてなブックマーク」の数を記事一覧やタイトル下に設置することでした。でも、先述のとおり表示速度が壁となっていたのでなかなか実現できず。
ところが、その壁をたったひとつのプラグインであっさりと乗り越えることができました。それが「SNS Count Cache」です。
WPプラグイン SNS Count Cache の使い方
デザインは定まっていませんが、今のところ（2014年8月）このような感じでシェア数を表示しています。
■ホームの記事一覧
■個別記事のタイトル下
設置前の表示速度を測定しなかったのですが、公式ボタンより確実に速いのは間違いありません。
スマホで閲覧するとわかりますが、画像を表示するよりシェア数を表示するほうが速いです。そのくらい速度に影響しないなんて、スバラシイ。
こういうのがプラグインで処理できる、というのがWordPressの魅力ですね。
プラグインのインストールと設定
管理画面のプラグイン「新規追加」から「SNS Count Cache」を検索、またはダウンロードページからZIPファイルをダウンロードしてインストールします。
DLWordPress › SNS Count Cache « WordPress Plugins
設定画面に入っても、記事一覧の横に「Cache Status」が表示されるだけで、設定する項目はとくにありません。今後バージョンアップで機能追加されるかも。
「Cache」の言葉どおり、各記事のシェア数はいちいち公式サイトから取り込まれるのではなく、キャッシュデータとして保存されます。そのため表示速度が速いんですね。
インストール直後は、このように「not cached」となっています。
放っておけば、プラグインが勝手にデータを取得してくれます。緑文字で「cached」となっていれば成功です。
現バージョンでは10分ごとに20記事分のデータを取得するよう固定されているので、100記事あったとしても1時間ほどでキャッシュが完了する計算ですね。
詳細な仕様に関しては、プラグイン作成者まるぼんさん（@marubon_jp）のブログで確認してください。
参考[試] WordPressプラグイン SNS Count Cache | シェア数キャッシュで表示速度改善
シェア数を表示するコード
シェア数を取得できるのは下記の4サービス。
- Google+
- はてなブックマーク
それぞれのコードはこのようになります。
|
1 |
<?php if(function_exists('get_scc_twitter')) echo get_scc_twitter(); ?> |
|
1 |
<?php if(function_exists('get_scc_facebook')) echo get_scc_facebook(); ?> |
Google+
|
1 |
<?php if(function_exists('get_scc_gplus')) echo get_scc_gplus(); ?> |
はてなブックマーク
|
1 |
<?php if(function_exists('get_scc_hatebu')) echo get_scc_hatebu(); ?> |
それぞれシェア数が表示されるので、あとはお好みのアイコンをつけておけば完成です。
NaifixのSNSシェア数表示部分
ソースを見ればすぐにわかりますが、このブログではこんな感じで設定しています。ご参考までに。
HTML（ホームの記事一覧）
|
1 2 3 4 5 6 |
<p class="mini_sns_box"> <span class="mini_sns"> <img src="<?php echo get_template_directory_uri(); ?>/images/twitter_s.png" alt="Twitter" width="20" height="20" /> <?php if(function_exists('get_scc_twitter')) echo get_scc_twitter(); ?> </span> </p> |
Twitterのコードだけ記載していますが、これにFacebookとはてブを追加しています。
基本はループ内での使用になりますが、ループって何のこっちゃわからなくても、SNSシェア数を表示する位置はたいていループ内になると思います。
（適当な説明ですみません…）
CSS
CSSはこのようにしましたが、好みに合わせて変更してください。とりたてて難しいことは何もしていません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.mini_sns_box { margin: 0; padding: 16px 0 0 5px; text-align: left; border-top: 1px dotted #ddd; } .mini_sns { margin-right: 1em; font-weight: bold; font-size: 110%; color: #666; } |
SNSアイコン
アイコンは探せばいろいろ見つかりますが、今回は「Arabiki」さんのアイコンを使いました。シンプルで使いやすいです。
あまり画像を使いたくないなら、アイコンフォントにするのがオススメです。
参考Stingerサイドバーにさりげない気遣いを。アイコンフォントの使い方
まとめ
各SNSのシェア数を取得して高速表示したいなら、このプラグインは絶対使うべきです。
プラグインを使わず処理したい！なら、こちらが参考になります。
キャッシュデータを使うので、ものすごい勢いでバズった時なんかは実際の数字とかけ離れてしまいますが、そこは公式ボタンと組み合わせたりして対応しましょう。
キャッシュ系プラグインと併用するときだけ注意が必要ですが、それでも使って損はありません。おそらく、今までの悩みがあっという間に解決して、感動すら覚えます。
WordPressでSNSシェア数を取得したいなら「SNS Count Cache」で決まり！
それでは、また。
Your Message