sns-count-cache_ecmg2

ワードプレス

便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効的な使い方

「ページを表示するたびに、今のシェア数を取得しに走り回ってくれる」公式シェアボタン。

sns-count-cache_01

そんな公式クンたちとは違い、シェア数を「バックグラウンドで」「定期的にキャッシュ(保存)しておいてくれる」という男前プラグインが【SNS Count Cache】です。

彼を導入すると、こんなオリジナルシェアボタンを作ることもできます。

original-share-button_02

記事ごとのシェア数推移も把握できます。

sns-count-cache_02

サイトデザインに合わせたオリジナルシェアボタンを設置できて、ページ表示速度もアップ記事ごとのシェア数推移も把握できる。これらの便利機能を運営サイトに導入してみましょう。

スポンサーリンク

SNS Count Cache導入のメリット

たくさんのメリットがあるのですが、今回はサラララッと目を通しておいてください。

ページ表示を高速化できる

好みのオリジナルシェアボタンを設置できる

記事ごとのシェア数推移を管理画面で確認できる

主要なSNSのフォロワー数を管理画面で確認できる

サイトをSSL化した時にシェア数を引き継ぐことができる

あー、いい流し目ですね。実際、一見しただけではよく分からないメリットもあるでしょう。

ということで、今回は下の記事で設置した「オリジナルシェアボタンにシェア数を表示させる」「記事ごとのシェア数推移を把握できるようにする」ことをメインに進めます。

関連記事

現状、プラグインのアップデート次第で仕様変更されるだろう部分があります。この記事は「SNS Count Cache」v0.11.1を利用した場合の解説です。

SNS Count Cacheをインストール

次に、管理画面内「プラグイン」⇒「新規追加」から【SNS Count Cache】で検索。インストールして有効化します。

sns-count-cache_03

「Facebookアプリ」のバージョンを確認

sns-count-cache-ins4

2017年2月にプラグインの最新版v0.11.1がリリースされ、v0.10.0で必要だった修正作業は不要になりました。いや本当によかった。(FacebookとPocketのシェア数取得のために必要な作業でした)

しかしまたもや・・・Facebook側で仕様変更があったため、運営サイトの環境によってはFacebookのシェア数が取得できない状況が発生しています。条件としては、サイト内で利用している「Facebookアプリ」が新しいもの(v2.9以上)だと、うまく動作しないのです。

Facebookアプリのバージョンは、後述する「App ID」と「App secret」を調べる中でも確認できます。この部分ですね。

sns-count-cache_44

もともと作成していた古いバージョンのアプリ(v2.8以下)があれば、プラグインは正常に動きます。しかし作った覚えがない人 ーー つまりこれから新規でFacebookアプリを作成する人は利用することができません。またFacebook側も古いバージョンは廃止していく方針のため、いつまでもv2.8以下のものを利用し続けるのも現実的ではないでしょう。

対策としては、「SNS Count Cache」プラグインのさらなるアップデートを待つか ーー または以下のように、プラグイン内部の記述変更作業を挟む必要があります。

このサイトも以下の作業で解決していますが、自己責任の上でご対応ください。

プラグインの内部記述を変更(v0.10.0)

この修正作業はプラグイン作者の意図したとおりに動作しないための補足作業です。(プラグインバージョン0.10.0で必要となる作業)
私の環境で不具合は起こっていませんが、自己責任で取り組んでください。

Facebookのシェア数が取得されない対処法

管理画面「プラグイン」⇒「プラグイン編集」を右クリックし、ブラウザの別タブで開きますSNS Count Cache「設定」画面は元のタブでそのままの状態にしておいてください

sns-count-cache_18

右上の「編集するプラグインを選択」のプルダウンから【SNS Count Cache】を選択⇒「選択」ボタンをクリック。

sns-count-cache_19

右カラムで「sns-count-cache/sns-count-cache.php」が選択されていることを確認して、Ctrl+F(Macならcommand+F)で「// Share Facebook Crawl Strategy」の文字列を検索。

sns-count-cache_20

sns-count-cache_21

この「follow」の記述2つを・・・

sns-count-cache_22

share」に書き換えて保存。以上。

Pocketのシェア数が取得されない対処法

同様に今度は、右カラムで「class-scc-share-pocket-strategy.php」を選択して、
const DEF_BASE_URL」の文字列を検索。

sns-count-cache_39

sns-count-cache_40

この右側のURLの「http」を「https」にしておきます。

Before

= 'http://widgets.getpocket.com/v1/button';

After

= 'https://widgets.getpocket.com/v1/button';

次に「horizontal」の文字列を検索。

sns-count-cache_41

「horizontal」を「vertical」に変更します。

Before

['count'] = 'horizontal';

After

['count'] = 'vertical';

さあラスト!「$url = self::DEF_BASE_URL」の文字列を検索。

sns-count-cache_42

その直下に下のコードを追記します。

$this->query_parameters['src']=$this->query_parameters['url'];

Before | After

sns-count-cache_42

sns-count-cache_43

保存して終了。記述ミスや、余計な部分を消したりしないよう注意しましょう

情報提供元(感謝感激)

シェア基本キャッシュ機能 – Facebook(再訪問)

別タブで開いたままにしているSNS Count Cacheの「設定」画面に戻ります。

sns-count-cache_23

さあ、これで「App ID (Client ID)」と「App secret (Client secret)」の欄に、それぞれ必要なものを入力すればOKです。

参考記事

プラグイン内部記述を変更(v0.11.1)

sns-count-cache-ins5

プラグイン内の【/includes/class-scc-share-facebook-strategy.php】を開きます。変更箇所は2つだけですが、念のためバックアップをとっておいてください。
変更点の意味や経緯は後述します。

1.「Build query url」を変更

79行目を変更します。

Before/After

$url = self::DEF_BASE_URL . '?' . http_build_query( $this->query_parameters , '' , '&' );

$url = self::DEF_BASE_URL . '?id=' . rawurlencode( $this->query_parameters['id']) . '&fields=og_object{engagement},engagement&access_token=' . $this->query_parameters['access_token'];

2.「Extract count」を変更

先ほど修正した部分の直後、89行目からを変更します。

Before/After

    public function extract_count( $content ) {
        SCC_Common_Util::log( '[' . __METHOD__ . '] (line='. __LINE__ . ')' );

        $count = (int) -1;

        if ( isset( $content['data'] ) && empty( $content['error'] ) ) {
            $json = json_decode( $content['data'], true );

            if ( isset( $json['share']['share_count'] ) && is_numeric( $json['share']['share_count'] ) ) {
                $count = (int) $json['share']['share_count'];
            } elseif ( isset( $json['id'] ) && ! isset( $json['share']['share_count'] ) ) {
                $count = (int) 0;
            } else {
                $count = (int) -1;
            }
        } else {
            $count = (int) -1;
        }

        return $count;
    }

    public function extract_count( $content ) {
        SCC_Common_Util::log( '[' . __METHOD__ . '] (line='. __LINE__ . ')' );

        $count = (int) -1;

        if ( isset( $content['data'] ) && empty( $content['error'] ) ) {
            $json = json_decode( $content['data'], true );

//            if ( isset( $json['share']['share_count'] ) && is_numeric( $json['share']['share_count'] ) ) {
//                $count = (int) $json['share']['share_count'];
//            } elseif ( isset( $json['id'] ) && ! isset( $json['share']['share_count'] ) ) {
//                $count = (int) 0;
//            } else {
//                $count = (int) -1;
//            }

            $reaction = (int) $json['engagement']['reaction_count'];
            $comment_count = (int) $json['engagement']['comment_count'];
            $comment_plugin_count = (int) $json['engagement']['comment_plugin_count'];
            $share_count = (int) $json['engagement']['share_count'];
            $count = $reaction + $comment_count + $comment_plugin_count + $share_count;
        } else {
            $count = (int) -1;
        }

        return $count;
    }

97から103行目はコメントアウトし、ハイライトされている105から109行目を追記しています。なおこの追記部分については、がっつりとこちらを参考にさせていただきました。

新規の投稿した記事では[’og_object’]自体が取得データの中に無くカウント数が取れていませんでした。

(中略)

$json[’og_object’]内のデータを取得するのではなく、$json[’engagement’]内のデータを取得しています。

素敵です。早くこの記事に出逢いたかった。
無事修正したら、あとは通常通りの設定に入れます。先に進みましょう。

経緯と修正箇所の意味

私自身は古いバージョンのFacebookアプリを利用していたので、今回の問題には気づいていませんでした。が、ちらほらとよろしくない報告があってようやく、Facebook Graph APIの仕様変更に気づいたのです。

sns-count-cache_45

「share」が「engagement」フィールドに変わっている。で、試してみると。

https://graph.facebook.com/?id=https://requlog.com/&fields=og_object{engagement},share

{
   "og_object": {
      "engagement": {
         "count": 183,
         "social_sentence": "183 people like this."
      },
      "id": "●●●"
   },
   "share": {
      "comment_count": 0,
      "share_count": 183
   },
   "id": "https://requlog.com/"
}

v2.8以前の環境ではこのように、廃止された「share」を使ってもシェア数が表示されるけれど、v2.9以降ではエラーが表示されます。

{
   "error": {
      "message": "(#12) engagement field requires version v2.9 or higher",
      "type": "OAuthException",
      "code": 12,
      "fbtrace_id": "●●●"
   }
}

じゃあ「share」を「engagement」に変更してみましょう。

https://graph.facebook.com/?id=https://requlog.com/&fields=og_object{engagement},engagement

{
   "error": {
      "message": "(#12) engagement field requires version v2.9 or higher",
      "type": "OAuthException",
      "code": 12,
      "fbtrace_id": "●●●"
   }
}

ダメです。v2.9以上にしているにも関わらず、engagementフィールドを求める指摘が表示されます。そこで末尾にアクセストークンを追記してみると・・・

https://graph.facebook.com/?id=https://requlog.com/&fields=og_object{engagement},engagement&access_token=[ACCESS_TOKEN]

{
  "og_object": {
    "engagement": {
      "count": 183,
      "social_sentence": "183 people like this."
    },
    "id": "●●●"
  },
  "engagement": {
    "reaction_count": 12,
    "comment_count": 0,
    "share_count": 171,
    "comment_plugin_count": 0
  },
  "id": "https://requlog.com/"
}

正しく表示されました。閲覧するだけでもアクセストークンが必須になったことは別としても、無くなった「share」フィールドの代わりに「engagement」フィールドを見にいかなければならない。

つまり、いいね数・シェア数・コメント数など、今までと同様に合算値を取得するにはプラグイン内での呼び出しも・・・

https://graph.facebook.com/?id=[URL]&fields=og_object{engagement},engagement&access_token=[ACCESS_TOKEN]

と、変更する必要があるということ。さらに「Extract count」で合算する変数を指摘しなおす必要があるということですね。

「widgetoon.js & count.jsoon」に登録

ずいぶん前にTwitterの仕様変更があり、公式ボタンではシェア数の表示ができなくなりました。ところが、代替サービスの【widgetoon.js & count.jsoon】を利用すれば、オリジナルシェアボタンにシェア数を表示できるようになります。

まずは下の記事を参考に登録を済ませます。

SNS Count Cacheの設定

有効化すると管理画面の左カラムに【SNS Count Cache】の表示が現れるので選択。以降は「設定」タブで初期設定していきます。

sns-count-cache_04

sns-count-cache_05

以降、設定に必要な項目以外は飛ばします。言及していない部分については、今はデフォルトでOK。なお項目ごとに「設定の更新」ボタンがありますが、どこを押しても一斉に、ページ内すべての設定内容が更新されます。

設定ボタン(※これは画像です)

sns-count-cache_06

この「設定の更新」ボタンを押すことで新たに出現する設定項目もあるので、必ず「ボタンを押しましょう!」と号令がかかったタイミングで押すようにしてください。

sns-count-cache_ins1

でも万が一押してしまっても、そのまま作業を続けて大丈夫。号令をかける理由は、「混乱を避けるため」「効率的に済ませるため」です。号令はぜんぶで2回。特に後半、注意です。

シェア基本キャッシュ機能

sns-count-cache_07

一番上の「対象SNS」で、オリジナルシェアボタンを設置したいSNSにチェックを入れておきます。その他の設定はそのままでOK。

ここでチェックを入れたSNSは、シェアボタンと、管理画面ダッシュボードにシェア数が表示されるようになります。もしボタン設置記事のコードをそのまま使うのであれば、上の画像のように「Facebook」「はてなブックマーク」「Pocket」「Twitter」にチェックを入れます。

シェアボタン

sns-count-cache_08

管理画面のダッシュボード

sns-count-cache_09

早速うっかりいきなり「設定の更新」ボタンを押さないように。号令待ちで。

シェア変動分析機能

sns-count-cache_10

デフォルトでは無効になっていますが、「有効(スケジューラ)」に変更します。

sns-count-cache_11

まだ号令はかけてませんからね。

フォロー基本キャッシュ機能

sns-count-cache_12

そう、冒頭で挙げたように【SNS Count Cache】では、記事ごとのシェア数だけでなく、フォロワー数までバックグラウンドでキャッシュしてくれるんです。

しかし!今は、別記事で紹介している「オリジナルシェアボタン設置」のために必要な、feedlyのみにしぼって設定紹介します。

というのも、全部設定しようとすると非常ににややこしいのです。そしてSNSごとの仕様も変わりやすい。だからフォロワー数取得に関しては今はグッ!とこらえていただきたい。我慢してください。各SNSページに見にいきゃあフォロワー数なんてひと目で分かりますし。ね。

sns-count-cache_ins2

・・・ありがとう。分かってくれて嬉しいよ。じゃあここではfeedlyだけにチェック

sns-count-cache_13

他の項目はそのままでOK。デフォルトで24時間ごとにフォロワー数を取得して、シェアボタンや管理画面ダッシュボードに表示してくれます

sns-count-cache_14

sns-count-cache_15



さあ今ですボタンを押しましょう!第1回目の号令。そう、ここで「設定の更新」ボタンを押します。すると・・・設定画面トップにエラーメッセージが現れます。

クリックで拡大

sns-count-cache_16

エラーメッセージ

シェア数を取得するために必要な設定が不足しています。次のセクションで必要なパラメータを設定して下さい。シェア基本キャッシュ – Facebook.

ドキッとするやんけ。でも安心してください。コレは最初に言ったように、「設定の更新」ボタンを押したことによって、新たに出現した項目がいくつかあるワケなんですが、「その項目を埋めなさい」というだけのメッセージです。

というわけで、新たな項目を設定していきます。また号令かけますからね

シェア基本キャッシュ機能 – Facebook(新たに出現!)

sns-count-cache_17

「シェア基本キャッシュ機能」でFacebookにチェックを入れ、設定を更新すると新たに出現する項目です。「App ID」と「App secret」の入力が求められている状態です。

さあ、これで「App ID (Client ID)」と「App secret (Client secret)」の欄に、それぞれ必要なものを入力すればOKです。ただ・・・これらの調べ方、分かりますか?もし分からない場合、こちらを参考に、コピペまで済ませておきましょう。

sns-count-cache_24

ここでは「設定の更新」ボタンは押しません。最後の号令はまだです。

シェア基本キャッシュ機能 – Twitter(新たに出現!)

sns-count-cache_25

これも同じく、「シェア基本キャッシュ機能」でTwitterにチェックを入れ、設定を更新すると新たに出現する項目です。冒頭で先に登録を済ませているので、ここでは「代替Twitter API」欄が「widgetoon.js & count.jsoon」になっていることを確認すればOK

その他「はてブ」「Google+」「Pinterest」に関しては、最初の「シェア基本キャッシュ機能」でチェックを入れるだけ。なんの追加設定もなく、シェア数が表示されるようになります。つまりFacebookとTwitterの連携を済ませれば、設定はほぼ終了です

今はFacebookのシェア数取得のためにプラグインの修正作業が入り込んでいますが、アップデートにより、いずれ管理画面内の設定だけで済むようになるでしょう。なってほしいですね。

シェア変動分析機能(2回目の訪問)

sns-count-cache_26

さあラスト。先ほど「有効(スケジューラ)」に変更したことによって項目が増えています。

この設定をすることで、管理画面のダッシュボードで、日々のシェア数推移を把握出来るようになります。

sns-count-cache_27

sns-count-cache_28

また「シェア数」タブでは全ての記事ごとのシェア数推移を把握出来るようになります

sns-count-cache_29

さらに、【SNS Count Cache】の機能に「話題のコンテンツ」タブが登場します。

sns-count-cache_30

sns-count-cache_31

ここでは、シェア数変化があった記事だけがピックアップされて一覧表示されます

「どんな期間内に、どの記事で、どのSNSで、どのくらいシェアされたのか」が視覚化されるのはとても便利。マーケティング目線でも活用できますし、単純にモチベーションにもつながるでしょう。私はシェアボタン表示よりこの機能が欲しくて使っています。

で、「毎日」に設定していれば、「毎日、設定した時間に」差分表示はリセットされます。

sns-count-cache_32

sns-count-cache_28

sns-count-cache_27

「毎週」に設定していれば、「毎週、設定した曜日の設定した時間に」差分表示がリセット。好みや用途によって選んでみてください。なお、必要であれば「フォロー変動分析機能」も同様に設定できます。選んだら・・・ボタンを押してくれ!(号令)

以上ですべての設定が完了です。

おまけの確認(まだエラーが出るときは・・)

「シェア基本キャッシュ – Facebook」をチラッと覗くと・・・

sns-count-cache_35

「Access Token」なんて項目が増えてますが、これは自動的に出力されるだけ。そのままでOKです。設定画面トップにエラーは出ていませんか?もしコレがまだ出ていれば・・・

クリックで拡大

sns-count-cache_36

考えられるのは、プラグインの記述修正ミス、または「App ID」「App secret」のコピーミス、といったところでしょうか。エラー時はそのあたりを再確認してみてください。




sns-count-cache_ins3

おつかれさまでした。その他の項目設定はそのままでOK。「シェア臨時キャッシュ機能」「動的キャッシュ機能」「フォールトトレランス機能」「データクローラ機能」「データエクスポート機能」は触わらずにそのままにしておきましょう。

安心してください。ほったらかしにしているワケじゃなく、「そのままで良い」のです。

「ジワジワキャッシュ」と「ポチポチキャッシュ」

なお、バックグラウンドでシェア数をジワジワと探しに行ってくれるので、シェア数がボタンに即時反映されるわけではありません

放っておけば、こんな感じでジワジワとキャッシュし、各記事のボタンにシェア数が表示されていくんですが・・・(「キャッシュ状況」タブで確認できます)

クリックで拡大

sns-count-cache_37

待ちきれない時は、ひとつずつ「キャッシュ」ボタンを押して反映させることもできます。

クリックで拡大

sns-count-cache_38

ちなみに、これまで号令をかけてきた「設定の更新」ボタンを押すたびに、記事ごとのキャッシュはすべてクリアされてしまいます。そんなとき、急いで一個ずつポチポチポチ・・・とキャッシュボタンを押し続けることもできるというわけですね。

というわけで、「設定の更新」ボタンを押すときは、全記事のシェアボタンにしばらくシェア数が表示されないことを覚悟する必要がある、ということを覚えておきましょう。

ごく稀に起こる、怪奇現象対策

オリジナルシェアボタンを設置する

さあ、これでオリジナルシェアボタンに各SNSごとのシェア数が表示されます。まだ設置していないなら、こちらもサクッと設置してください。コピペで簡単。

SSL化した際にシェア数を引き継ぐ方法は、このサイトで実証してから、別記事にまとめようと考えています。(それまでにカモン・修正アップデート)

スポンサーリンク

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…
  2. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…
  3. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  4. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  5. きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG…

関連記事

  1. switch-by-the-device_ecmg
  2. retina-weight-saving_ecmg
  3. tcd-theme-selection_ecmg-ps
  4. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】WordPressのスライダーやサムネイル画像を綺麗に表示させる設…

    スライダー嬢も、綺麗に。このサイトのトップページには、スライダーが…

  5. retina_ecmg
  6. tcd-css-customize_ecmg

    ワードプレス

    実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本

    初心者のうちに、実践で学ぶ。初心者にとって避けて通りたい・・避けた…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. tcd-theme-selection_ecmg-ps
  2. display-speed_ec
  3. adjust-the-button_ecmg
  4. theme-change_ecrt
  5. todoist-extension_ecmg
  6. tcd-theme-user-review_ecmg

タスク管理で、自己管理。

todoist

人気記事

  1. todoist-basic_ec-ps
  2. child-theme-mechanism_ecmg-ps
  3. chrome-full-screen-capture-ecmg
  4. jpg-gif-png_ecmg
  5. media-setting_ec
  6. chrome-font_ecmg-1

魅力的なブログを、今すぐ作る。

tcd-mag

ピックアップ記事

  1. child-theme-mechanism_ecmg-ps
  2. compress-jpeg-png-images-ecmg
  3. tcd-css-customize_ecmg
  4. todoist-basic_ec-ps
  5. todoist-productivity_ecmg
  6. jpg-gif-png_ecmg

ブログのRetina対応、始めませんか?

retina-os-solution

掘り出し記事

  1. backup-all-in-auto_ec
  2. retina-text-widget-ecmg
  3. analytics-ip-filter-ecmg
  4. theme-manual-update-ecmg
  5. feedly-count-problem_ecmg
  6. meta-seo-inspector_ecmg

ゆっくり、フシギなGIFアニメ。

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. annotation-image-ecmg
  2. lightshot_ecmg
  3. dash_ecmg
  4. enlarge-image-ecmg
  5. chrome-font_ecmg-1
  6. facebook-fast-display_ecmg

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. theme-change_ecrt
  2. valuable-content-from-image_ec
  3. tcd-theme-user-review_ecmg
  4. tcd-mag_ecmg-ps
  5. retina_ecmg
  6. todoist-tips_ecmg

人気記事

  1. screenpresso-initial-setting_ec
  2. chrome-font_ecmg-1
  3. chrome-full-screen-capture-ecmg
  4. jpg-gif-png_ecmg
  5. child-theme_ecmg
  6. child-theme-mechanism_ecmg-ps
  7. media-setting_ec

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. tcd-mag_ecmg-ps

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  2. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  3. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
  4. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  5. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
PAGE TOP