Kanamii

伝えたい想いを自分らしく・・・

kanamii-916-1

スポンサーリンク

STINGERカスタマイズ

【STNGER PLUS】ソーシャルボタンへの「SNS Count Cache」導入・設定・カスタマイズ・エラー解決方法

2016/11/27

2016年10月17日追記
SNS Count Cache 0.10.0へのアップデートにより、設定項目に追加されたFacebookの「App id」と「App secret」の取得方法、及び、設定が反映されない現象についての対処法をこちらに追記しました。
2016年11月27日追記
pocketのシェア数が取得されない件について、下記ページを参考にさせていただきました。ありがとうございます。
▶SNS Count Cache Pocketの仕様変更でシェア数が消えました。取り急ぎ対処!
こちらのプラグインは、STNGER8・AFFINGER4のオリジナルソーシャルボタンにも利用できます。

WordPressプラグイン「SNS Count Cache」は、オリジナルソーシャルボタンなど、任意の場所へSNSのシェア数やフォロー数を表示させることができるプラグインです。

また、自分のサーバーにシェア数やフォロー数をキャッシュとして保持してくれる役割があるため、公式ボタンよりも動作が軽く、ページの高速表示の効果も得られるそう。

下記は、「SNS Count Cache」作者のまるぼんさんの記事です。
専門用語がいっぱいで私には難しい文章ですが、「凄いプラグインだ・・」ということは理解できます。(笑)

▶[試] WordPressプラグイン SNS Count Cache | シェア数キャッシュで表示速度改善
※開発リリース当初の記事ですので、その後のアップデートで詳細や設定方法などは改定されていますのでご注意ください。

ここでは、私が使用している無料WordPressテーマ「STNGER PLUS+」のデフォルトのソーシャルボタンへの「SNS Count Cache」導入・設定・カスタマイズ方法をご紹介します。

といっても、STINGERには、あらかじめカウント数表示に必要なコードが組み込まれているので、PHPファイルの編集も必要なく特に難しい点はありませんが、TwitterとFacebookのシェア数とPush7の購読者数を取得したい場合の「事前準備」が必要となります。
まずは、そちらから説明していくことにします。

スポンサーリンク

SNS Count Cache導入のための事前準備

widgetoon.js&count.jsoonへのサイト登録

以前は、Twitterの公式ボタンにもカウント数が表示されていましたが、2015年11月に廃止されたんですね。
(ちょっと離れてる間に時代が変わる・・)

「widgetoon.js&count.jsoon」は、公式Twitterが廃止したAPIに代わって、WEBページのツイート数取得を提供してくれるサービスです。

下記、公式ページより

ブログやニュースメディア、ウェブサイトなどで使用されていた、ツイート数をカウントするサービス、widget.jsとcount.jsonの廃止が発表されました。それに代わり、同じ機能を提供するのが、digitiminimiが開発した、この「widgetoon.js」と「count.jsoon」です。これらを使用すれば、以前と同様にツイートボタンにカウント数を表示することができます。

サイト登録方法は思いの外簡単でした。順を追って説明します。

kanamii-916-2

  1. widgetoon.js&count.jsoonにアクセスして、「使用するサイトのURL」「メールアドレス」を入力して「サイト登録」をクリック
    ※このとき、独自ドメインのアドレスをお持ちの場合は、そちらのアドレスで登録すると承認がスムーズになるとのことです。
    また、Twitter上にサイトへのリンクが1件もない場合は承認されませんので、作成したばかりのサイトの登録時には注意してください。
  2. 承認されると、登録したアドレスに登録完了のメールが届きます。(数時間から数日後)
    メールに記載されているURLをクリックすると、マイページでサービス状態等の確認ができます。
  3. マイページ内の「Twitter連携」ボタンから連携アプリを認証することで、ツイートの収集速度が上がり、収集内容も増えるということなので、私は利用することにしました。

Facebookの「App id」と「App secret」をコピー

SNS Count Cache 0.10.0以降では、FacebookのApp id(アプリID)とApp secretのコピーが必要となります。

App idの取得方法については、下記ページ内の「Facebookの「fb:app_id」(アプリID)の取得方法」という部分で説明していますので、該当部分のみご参照ください。
App secretはApp idのすぐ下に表示されますので、どちらもメモ帳にコピーしておいてくださいね。

【WordPress - STINGER PLUS+ 】 OGP設定の「fb:admins」を「fb:app_id」に変更する方法

Push7の「AppNo」をコピー

STINGER PLUS+ のデフォルトのソーシャルボタンの他にPush7のボタンを追加したい場合は、Push7の「AppNO」が必要となります。

WordPressサイトにPush7を導入する方法と設定手順については、下記ページをご参照ください。

WordPressサイトにPush7を導入する方法と設定手順を簡単4ステップで♪

SNS Count Cacheのインストールと設定方法

WordPressダッシュボード→プラグイン→新規追加→「SNS Count Cache」と検索して表示されるプラグインをインストールして有効化してください。

kanamii-916-3

WordPressダッシュボードの左端の「SNS Count Cache」→「設定」を開きます。

私の場合、以下に記載する項目以外は全てデフォルトのままにしています。
必要に応じて変更してください。

  • シェア基本キャッシュ機能
    対象SNS:Pinterestを除く、Facebook、Google+、 はてなブックマーク、Pocket、Twitterの5項目にチェックを入れています。
  • シェア基本キャッシュ-Facebook
    App ID (Client ID)・App secret (Client secret):事前準備でコピーした「App id」と「App secret」をペースト
  • シェア基本キャッシュ機能-Twitter
    代替Twitter API:widgetoon.js & count.jsoon
  • フォロー基本キャッシュ機能
    対象SNS:Feedly、Push7にチェック
    ※STINGER PLUS+ のデフォルトのソーシャルボタンのみにカウント数を表示させる場合は必要ありません。
  • フォロー基本キャッシュ機能-Push7
    AppNo:事前準備でコピーした「AppNO」をペースト
  • データクローラ機能
    SSL証明書の検証:当ブログの環境ではエラーが出てしまうので「無効」にしています。

Facebookの設定が反映されないエラーの対処法

SNS Count Cache 0.10.0の現時点では、「シェア数を獲得するために必要な設定が不足しています。次のセクションで必要なパラメータを設定してください。シェア基本キャッシュ-Facebook」というエラーメッセージが出て、Facebookのシェア数がカウントされない不具合が出ています。

kanamii-916-4

次回アップデートでは改善されるかと思いますが、それまでの対策としてプラグインファイルを編集することでこの問題を解決することができました。

対策方法は下記ページをご参照ください。

▶【解決】SNS Count Cache 0.10.0の設定エラーについて-にゅーてみ

プラグインファイルを読むスキルがないため解決方法が見つからず、半ば諦めかけていた中で見つけた記事です。
記事を公開して下さりありがとうございます。

SNS Count Cacheのキャッシュ完了までにかかる時間は?

全体、及びコンテンツ別のキャッシュ状況・シェア数・フォロー数は、設定と同じくWordPressダッシュボードの左端の「SNS Count Cache」から確認できます。

また、STINGER PLUS+ をお使いの場合は、プラグインを有効化して設定するだけで、シェア数がソーシャルボタンに表示されるようになっています。

キャッシュ完了までの時間は、コンテンツ数などの状況によって異なるようです。
当ブログの場合、逆にコンテンツ数と購読者数が少ないせいかな?FeedlyとPush7のフォロー数獲得までに数日間かかりました。

Feedlyの購読者「1」って・・自分ですからね・・(笑)

スマホ表示とソーシャルボタン追加のカスタマイズ

STINGER PLUS+ のデフォルトのソーシャルボタンは、シェア数のスペースを考慮してパソコン以外の端末ではテキストが非表示となる仕様です。
ダブレットやスマホでもテキストを表示させたい場合は、下記ページをご参照ください。
(早とちりの勘違いから生まれたコンテンツです・・。)

【STINGER PLUS】 ソーシャルボタンのテキストがスマホで表示されない原因と対処法は?

また、オリジナルソーシャルボタンにRSS・Feedly・Push7の3種のボタンを追加するカスタマイズ方法は、下記ページをご参照ください。

【STINGER PLUS】 カウント付きオリジナルソーシャルボタンにRSS・Feedly・Push7を追加する方法

以上、STNGER PLUS+ のソーシャルボタンへの「SNS Count Cache」導入・設定・カスタマイズ・エラー解決方法でした。
最後までお付き合い下さりありがとうございます。

▶STINGER PLUS・STINGER8・AFFINGER4 カスタマイズ全記事一覧へ

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGERカスタマイズ