【Twitterボタン】count.jsoonでツイート数を再表示

   2015/12/03   icon-clock-o読了時間:約9分3秒

Twitter、Facebook、Google+、はてなにYahoo!にPocketに、と
各SNSボタンを設置しているサイトがすっかり当たり前になった今日この頃。
しかし11月21日からTwitterで呟いてもらった件数(ツイート数)が表示されない、
あるいはゼロで表示されるようになりました。

もちろんこのブログも。
Twitter数が非表示に
ページ下部のSNSボックスの中に綺麗に並んでいたのに
Twitterだけ小さくなってしまって何だかしっくり来ませんね。

これはTwitterが今まで呟き件数を表示させていた機能を廃止したため。
自作自演でTwitter数を稼ぎ、あたかも人気記事のように見せかけて訪問者を誘う、というような
ズルをもう許しませんよ!ということのようです。

運営さんがそうするのなら仕方ないかーとも思ったのですが、
記事に読んだ上に呟いてくださった方がいるんだなあと嬉しくなるTwitterボタン、
数多ある人気アカウントさんに比べればこのブログのツイート件数なんて微々たるものなのですが、
無くなったら無くなったで寂しい・・・ということで、
ガジェット通信さんのおかげで代わりとなる機能を知ったので
設置方法なども合わせてご紹介したいと思います。

ご注意
WordPressでテーマを借りて使用している場合などは
テーマ提供者さんが上手いことTwitterボタンの辺りも調整して更新してくださるかもしれません。
自分でなんやかんやするよりも簡単ですし、間違った編集をしてしまうことも防げますから
テーマの更新によってツイート数が表示されるようにならないか、
しばらく様子を見てみるのも有りだと思います。

また、現在count.jsoonのユーザーが急速に増加しているせいか、
正確にデータ取得して反映されるまで時間がかかっているようです。
設置後もツイート数がゼロのままの場合は数日待ってから再度ツイート数を確認してください。

count.jsoonの登録方法

今までTwitterが提供していたカウントサービスのcount.json、
この代わりとなるのがディジティ・ミニミ社が提供するcount.jsoonです。

登録情報を入力

count.jsoonのページにアクセスして
自サイトのURLとメールアドレスを入力して【 登録 】をクリックします。
count.jsoonの登録

登録が完了して通知が来るまで待ちましょう。
count.jsoon登録受付
数時間~1日程度で jsoon@digitiminimi.com から登録完了のメールが来ます。
URL付きのメールなので迷惑メールに振り分けられることがありますのでご注意ください。
count.jsoonの登録完了メール

Twitterとの連携を許可

通知メール内のURLをクリックしてアクセスし、Twitter連携の 【 登録する 】をクリック。
Twitter連携登録

【 連携アプリを認証 】をクリック。
認証が完了するとTwitter連携の項目が 『 有効 』 に変わります。
※Twitterにあらかじめログインしていない状態だと【 ログイン 】と表示されるので
 Twitterにログインしてから認証を続けてください。
countoonへの認証許可
これでcount.jsoonと、その中の機能であるwidgetoon.jsを使う準備ができました。
count.jsoon【 登録済みのユーザー/Twitterでログインする 】から、現在のカウントの状態などを見ることができます。

widgetoon.jsの使用について

ツイート数を表示していたTwitterサービスの名前はwidget.js
今回count.jsoonに登録したことによって使用可能になったサービスはwidgetoon.js

widgetoon.jsをwidget.jsの代わりに設置することで、今までと同じように
Twitterのカウントを表示させることができるようです。
設置方法の詳細は APIの使い方 のwidgetoon.jsについての項目をご覧ください。

ただし、『 !注意! 』の項目にも書いてありますがTwitterが提供していたwidget.jsには
様々な機能があり、ツイート数だけを管理していたわけではありません。
そのため、不用意にwidgetoon.jsに置き換えてしまうと、ツイート数以外の
Twitter機能(タイムラインの抜き出し表示など)を表示させている場合に不具合が起きる可能性があります。
設置する際はくれぐれも慎重に編集してください。

widgetoon.jsの設置方法

ご注意
私はWordPressのテーマ 『 Gush2 』 をお借りしているので、
Gush2のファイル構成に基づいたご説明になっています。
お使いのテーマによってはファイル名などが異なる場合があります。
ファイル編集およびwidgetoon.js設置はバックアップを取った上で自己責任のもと行ってください。

widgetoon.jsのjavascriptを呼び出す

ヘッダー部分(head)にスクリプトを呼び出すためのコードを記述します。
外観⇒テーマの編集⇒ 『 ヘッダー (header.php) 』 を開き、
<head>から</head>で囲まれた部分に次のコードを加えてください。

ヘッダー内であればどこに記述しても同じなのですが、
私は自分で付け足した部分が分かりやすいように</head>のすぐ手前に記述するようにしています。
こうしておくと、テーマが更新されてファイルが書き換わった後に
自分で修正する際にも分かりやすいかと思います。

sns.phpを編集

Gush2の場合、記事下部にSNSボックス(Twitterボタンを表示させたい部分)があります。
外観⇒テーマの編集⇒この部分を表示させているファイル『 sns.php 』を開き、
Twitterボタンに関わる記述を書き換えていきます。

元の状態がこれ。

これ ↑ をこう ↓ 書き換えます。

書き換えのポイント

 icon-asterisk class
twitter-share-buttonをtwitter-share-buttoonに。
『 O 』 が一個増えただけですね。

 icon-asterisk data-viaを削除
Twitterアカウント名の設定は元々しておらず、空欄のままだったのでこの機会に削除しました。

 icon-asterisk data-urlとdata-text
“http://●●.com(自サイトのURL)”に変更します。
また、data-textの箇所も”●●のブログ”というように、Twitterに引用するための
ブログタイトルなどを記述してください。

ここでは<?php the_permalink(); ?>と書いてありますが、
これは記事ごとのツイート数を表示させる場合です。
data-text=”<?php the_title(); ?>”の部分も記事ごとのタイトルを使う場合です。
ここはテーマやご自分の設定によりますので、このまま記述しないようにご注意ください。

 icon-asterisk 日本語指定
data-lang=”ja”を付け加えました。

 icon-asterisk スクリプトを付け足す
最後にTwitterボタンを表示させるスクリプトを記述します。

これでまたTwitterボタンとツイート数が表示されるようになるはずです。
フッターに表示させているTwitter欄も問題なく動いているので大丈夫だとは思うのですが
もし何か不具合が起きたらまたここでご報告します(=ФωФ=)ノ

そしてもしこの記事がお役に立ちましたら、
是非この下のTwitterボタンから呟いてみてください。
問題なく動いていることを確認できる上に私のテンションが上がります。

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket