【絶対解決】SNSボタンに(シェア)数を表示する方法(SNS Count Cache(v0.10.0)の完璧に設定する)

【絶対解決】SNSボタンに(シェア)数を表示する方法(SNS Count Cache(v0.10.0)の完璧に設定する)

ブログを書いていてSNSとの連動は必須ですよね。

当ブログ(https://laplace.link/)では、OPENCAGEの「ハミングバード」のテーマを使ってます。

このテーマではデフォルトでSNSのボタンが既に用意されていてとっても便利。

とにかく記事を書かねば!と設定最小限、こだわりちょっとの範囲でやってきましたが、PVを増やさないと意味は無いので、その状態でFacebookやGoogle+、Twitterなどにシェアをして、はてなブックマークをしたり行ってきました。

ブログを書いて、シェアされた数字を見るとモチベーションも上がるのですが、どうもブログボタンに数字が出てこない。。。

ググってみると「Facebookの仕様が変更された・・・」「バグが・・・」とか見かけるのですが、それでも出ている人はいるので、何か方法が無いか時間をかけて調べてみたら、数字を出す方法がわかりました!

SNS Count Cache(v0.10.0)の完璧に設定する

当ブログで使っているOPENCAGEの「ハミングバード」のテーマは、SNSボタンに数を表示するために「SNS Count Cache」を使ってます。

SNS Count Cacheは、前バージョンでもバグがあったみたいで、ちょっと動作確認に注意が必要みたいです。
(とは言え、無料で使わせてもらって、SNSの仕様変更にも対応してもらえているので、感謝感謝なのですw)

ですので、SNS Count Cacheの設定をきっちり行えば解決します。

どうなれば設定がきちんとできているのか?

SNS Count Cacheのメニューで「シェア数」のタブに数字が出ていればOKです。
プラグイン画面OK
SNS Count Cache説明3
設定ができていないとボタンだけ表示。
プラグインNG画面
SNS Count Cache説明4

設定タブを1つずつ順番に解説します。
必要最低限の項目だけ説明しますので、もっと詳しく知りたい方はググって頂ければと思います。

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

  1. 対象SNS
  2. ハミングバードのテーマに対応したSNSでチェックをいれます。Facebook、Google+、はてなブックマーク、Pocket、Twitterの5つにチェック。

  3. その他の項目(デフォルトのまま)
  4. カスタム投稿タイプ、シャア数のチェック間隔(秒)、一度にチェックするコンテンツ数、HTTPからHTTPSへのスキーム移行モードは、初期設定のままでOKです。

SNS Count Cache設定5
「設定を更新」ボタンを押すと数が消えてしまいます!
プラグインをインストールしただけでも数字が取れるSNSもありますのでボタンを押した後に「消えた!」と焦らずにw 時間とともにキャッシュしていくので数字は戻ります。
ですが、数字が戻る間にページに訪れた人がいた場合「あまり注目されたページじゃない?」と思われてページ離脱されてしまうかもしれないので、ここの設定はなるべくいじらない様にしたほうが無難。ページ投稿直後は避けた方が良いです。

シェア基本キャッシュ – Facebook

ここ重要です!

SNS Count Cache(v0.10.0)を使用する際に、プラグインでバグがあるので手作業で修正が必要です。

  1. App ID (Client ID)と、App secret (Client secret)を作成
  2. Facebookのdevelopersページ(https://developers.facebook.com/)にアクセスし、自分のアカウントでログインします。「マイアプリ」>「新しいアプリを追加」を選択。

    SNS Count Cache設定
    facebookアプリID取得
  3. 各項目を入力
    表示名・・・適当の名前で良いですw
    連絡先メールアドレス・・・実際の連絡の使っているアドレスを入れます。(多分、仕様変更などの連絡がくるかと・・・)
    カテゴリ・・・これも自由で大丈夫だと思います。一番しっくりするカテゴリを選択してください。
  4. 左メニューから「ダッシュボード」をクリック
  5. 「IDを作成」ボタンの後に、認証画面がでます。良くある「上に表示されている文字を入れてください」というヤツですw
    認証が通ると、突然「プロダクト設定」画面になって、次の手順に戸惑いますw

    アプリID取得画面
  6. App IDとApp secretを取得
  7. 「App secret」は表示ボタンで一度パスワードを入れると表示します。
    取得したApp ID (Client ID)と、App secret (Client secret)をプラグインの設定画面に入れて「設定の更新」ボタンを押します。

全ての項目を入れてもエラーになってしまいます。

なぁににぃぃぃぃぃぃぃ!!

少しドキドキすると思いますが、SNS Count Cache(v0.10.0)にあるファイルを以下の通り修正してください。

開発側の単純なコピペミスかと思いますw
バージョンアップで対応を期待。

v0.10.0以外のバージョンでは通用しないので、他のバージョンのエラー対応はググっていただければと思います。

ファイルは「plugins」>「sns-count-cache」にあります。
sns-count-cache.phpの1239~1240行目

// Share Facebook Crawl Strategy
$parameters = array(
	'app_id' => $this->follow_facebook_app_id,
	'app_secret' => $this->follow_facebook_app_secret
	);

「follow_・・・」を「share_・・・」に変更します。

// Share Facebook Crawl Strategy
$parameters = array(
	'app_id' => $this->share_facebook_app_id,
	'app_secret' => $this->share_facebook_app_secret
	);
プラグインの修正は自己責任でお願いします。
本来は自分で直接設定ファイルを変更しません。変更したことでファイルが壊れることもありますし、予期しないエラーが起こるかもしれません。
ですが、この修正は僕自身も行てますし、ファイルが壊れたら、プラグインをインストールし直せば戻りますw

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

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

この部分、別サイトで登録が必要とありますので、登録をします。

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

Twitterにチェックを入れます。

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

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

※下の(5)に画面ありますので参考にどうぞ!

  1. スクリーン名・・・連動させたいTwitterのアカウント名
  2. Consumer key (API Key)とConsumer secret (API Secret)
  3. APIキーは https://dev.twitter.com/apps/new から作成します。 上記アドレスにアクセスして、連動させたいTwitterのアカウントでログインします。
  4. 各項目を入力
    Name・・・日本語&適当でOK
    Description・・・日本語&適当でOK
    Website・・・自分のブログサイトか、ツイッターのアドレスをいれます。
    Callback URL・・・空欄でOK
  5. TwitterAPI取得
  6. Consumer key (API Key)とConsumer secret (API Secret)を取得
  7. 画面が切り替わったら「Keys and Access Tokens」のタブをクリック。「Consumer key」「Consumer secret」の値が取得できます。

    TwitterAPIキー取得
  8. プラグイン画面に入力
  9. 「Consumer key」「Consumer secret」の両方を入れて「Bearer Tokenの取得」ボタンを押すと、コピペで「Bearer Token」に入れる「キー」が出てきます。
    キー」をコピペして「Bearer Token」に入れて、「設定の更新」ボタンを押します。

    フォロー基本キャッシュ機能設定画面

その他、デフォルトのままの設定項目

「シェア臨時キャッシュ機能」「シェア変動分析機能」「フォロー基本キャッシュ機能」「動的キャッシュ機能」「フォールトトレランス機能」「データクローラー機能」「データエクスポート機能」

今回のポイントと
紹介アイテム

SNSでのリアクションは、ブログを書き続ける大きなモチベーションですよね。初めはSNSの数字が出なくて逆にテンション下がってしまうかもしれませんが、書き続けていれば必ず数字がでます!
他にも拡散するテクニックはあるので別の機会に紹介したいと思います。

参考&Special Thanks

下記の記事を参考にさせていただいたり、コードをそのまま、あるいは改造して使用させていただきました。

「SNS Count Cache」v0.10.0におけるFacebook取得の不具合を解決する(参考)
アプリケーションキーの作成(参考)

ABOUTこの記事をかいた人

1998年からWEB関連の仕事に従事。角川グループのWEB会社に入社し、ディレクター、デザイナーとして経験を積む。2004年よりフリーランスとして活動し、2008年に法人を設立。サイトの制作だけでなく運用保守や紙媒体も行う。専門学校の非常勤講師も経験。