廃止されたTwitterの「シェア数付きボタン」を表示させる方法、「count.jsoon」の基本的な使い方

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

先日、Twitterのカウント数が取得できなくなりました。

その代替案として、ツイート数のバルーンが無くなって崩れたデザインを補完するための記事をいくつか書きました。

コピペで実装!廃止されるTwitter純正の吹き出し付きツイートボタンの代替案
先日Twitterブログにて「Twitterボタンのシェア数」の廃止と、非公式カウント取得APIの廃止が発表されました。 今まで...
新しくなったTwitterボタンを「縦型のバルーン付きボタン」にする方法
アメリカ時間の11月20日に、Twitterボタンが刷新されました。 それに伴い、以前はこんなだったTwitterの縦型ボタンが ...
刷新されたTwitterボタンを「横型のバルーン付きボタン」にする方法
前回、縦型バルーンボタンの作成方法について書きました。 今回は、一応横型のバルーンボタンのWordpressカスタマイズ方法につい...

ただ、これらの方法は、ツイート数の代わりに、「リスト」という文字や、Font Awesomeのアイコンを利用したものでした。

けれど、ネットを見ていたら、ツイート数を取得できるcount.jsoonというサービスがあって、実際に使ってみたら、以下のようなボタンを手軽に作ることができました。

縦型

横型

※上記のカウントは当サイトのトップページのものです。

かなり簡単にできたので、今回は「以前のようなカウント付きのTwitterボタンを表示する方法」の紹介です。

スポンサーリンク
レクタングル(大)広告

count.jsoonとは

count.jsoon

count.jsoonは、Twitterが以前使用していたスクリプト「widget.js」とAPI「count.json」に代わって、digitiminimi社が作成した「widgetoon.js」と「count.jsoon」を利用してWEBページのツイート数を提供するサービスです。

このサービスのバックエンドには、全文検索エンジン「Groonga」が使われています。

どのようなことを行っているか技術的なことを言うと、以下のようなことを行っています。

「widgetoon.js」と「count.jsoon」は、TwitterのAPIを使ってツイートを収集、ツイート内のURL情報をカウントしています。APIは、このURL情報を元にツイートされた件数と、公式RTと非公式RTの数を集計、総カウント数を算出します。

count.jsoonは、登録制です。登録後にツイート情報の収集を始めるので、カウント情報が集まるされるまで、ある程度時間がかかります。

count.jsoon設置までの主な手順

count.jsoonを利用するには、主に以下の手順が必要です。

  1. count.jsoonにWEBサイト登録をする
  2. count.jsoonとTwitterを連携する
  3. ツイートボタンを表示するコードを貼り付ける

登録作業をする必要があるのですが、それさえやってしまえば利用は簡単です。

count.jsoonにWEBサイト登録をする

まずは、count.jsoonに移動します。

すると、以下のような画面が表示されるので、「使用するサイトURL」と「メールアドレス」を入力して「登録」ボタンを押してください。(パスワードなどを設定する必要はありません。)

count.jsoonへの登録

すると、「登録を受け付けましたまれ登録処理が完了次第メールでお知らせします。」というメッセージが表示されます。

count.jsoonで登録を受け付けましたと表示される

登録完了のメールが届くまで、最大24時間と結構時間がかかります。僕の場合は数時間で届きました。

で僕の場合は、以下のような何て書いてあるのかよくわからない怪しいメールが届きました。

count.jsoonから届いたメール

とりあえず気にせずURLをクリックします。

すると以下のようなページが表示されます。

count.jsoonからきたメールアドレスをクリックしたら表示する画面

count.jsoonとTwitterを連携する

count.jsoonによると、Twitterと連携することによりツイートの収集速度が上がるそうなので、連携もしておきます。

「widgetoon.js」と「count.jsoon」は、ツイッターアカウントとの連携が可能です。連携することでツイートの収集速度が上がり、収集内容も増えます。

管理画面上の「ツイッター提携」項目にある「登録する」リンクをクリックします。

count.jsoonとTwitterを提携させる

すると、以下のような画面が表示されるので、「提携アプリを認証」ボタンを押してください。

count.jsoonとTwitterの提携画面

提携で利用する機能は、以下の「見る機能」の2つだけなので、結構安心して提携できます。

  • タイムラインのツイートを見る
  • フォローしている人を見る

すると、以下のように表示されます。

ツイート取得開始時

最初は、ツイート数は全く取得されていませんが、何日か時間をかけてツイート数を取得していきます。

ツイート取得開始から数日後

ある程度ツイート数が貯まるまで数日はかかるかもしれません。

こんな感じで、登録は完了です。

ツイートボタンを表示するコードを貼り付ける

あとは、count.jsoonでツイートボタン用のコードを貼り付けるだけです。

APIの詳細については以下を参照ししてください。

手っ取り早くボタンを貼り付ける方法

以下は、とりあえず簡単にツイートボタンを設置する方法を紹介します。

縦型ボタンのWordpressカスタマイズコード(個別・投稿ページ用)

手っ取り早く設置するには、以下のコードをツイートボタンを表示させたい箇所にコピペしてください。

カウント取得用のスクリプトと、ボタン表示部分用のHTMLコード、関数呼び出しを1ヶ所にまとめて行っています。

表示例

横型ボタンのWordpressカスタマイズコード(個別・投稿ページ用)

横型はA要素の「data-count」属性の値を「horizontal」にしただけです。

表示例

通常サイトで利用する場合

通常サイトで利用する場合は、以下のように直接「data-url」に「URL」を、「data-text」属性に「テキスト(タイトル)」を入力すればOKです。

表示例

A要素の「data-count」属性の値を「horizontal」にすれば、横型のツイートボタンも表示できます。

表示例

スクリプトをヘッダーとフッターに設定する

ボタンを1ページに何個も設置する場合は、上記の方法だと、スクリプト呼び出しが何度も記入されてしまいます。

そういった時のために、ヘッダーとフッターで1回だけスクリプトを呼び込む方法も紹介します。

ヘッダーでスクリプトファイル呼び出し

まずはヘッダーの<head></head>内に以下のコードを記入します。

フッターでスクリプト関数の呼び出し

あとは、フッターの</body>タグ手前で以下のコードを記入します。

ボタンの挿入位置にコードを記述

あとは、ボタンを挿入したい位置に以下のようにコードを記述すれば、毎回スクリプトなどを呼び出す必要はありません。

表示例

上のコードは、以下のように表示されます。

縦型のバルーンボタン

横型のバルーンボタン

まとめ

count.jsoonは、登録が少し面倒ではあります。

そして、ちょっとツイート情報を収集するのに時間はかかります。

けれど上に紹介したような感じで、基本コピペだけで、「旧Twitterカウント付きバルーンボタン」を手軽に再現することができます。

「ページのSNSボタン群に、ツイート数がないのはどうしても寂しい」なんて場合には、コードの設置も手軽で良い方法ではないかと思います。

あと、PHPや、JavaScriptで「ツイート数」だけを取得する方法もありますが、また別の記事で書きたいと思います。

 

追記:PHPでツイート数のみを取得するWordpressカスタマイズ方法。

PHPとcount.jsoonを用いてTwitterのシェア数を取得するWordpressカスタマイズ方法
前回、count.jsoonを用いてシェア数付きのバルーンボタンを設置する方法を書きました。 ただ、上記の記事では、count.j...

『廃止されたTwitterの「シェア数付きボタン」を表示させる方法、「count.jsoon」の基本的な使い方』へのコメント

  1. 名前:いのぽん 投稿日:2016/01/11(月) 20:54:04 ID:7cb919a53

    いつも参考にさせて頂いてます。

    本文中の見出し「count.jsoonにWEBサイト登録をする」のすぐ下にある
    「まずは、count.jsoonに移動します。」リンクをクリックすると、リンク先が以下のアドレスになっています。

    http://jsoon.digitiminimi.com/service_desc.html

    このアドレスは、count.jsoonのサイト登録URL http://jsoon.digitiminimi.com/ と違っていたため、コメントさせて頂きました。

    1年で1番寒い時期になりますのでお体ご自愛下さい。

  2. わいひら 名前:わいひら 投稿日:2016/01/12(火) 20:39:12 ID:f6cfcb1b2

    いのぽんさんこんにちは。

    ありがとうございます!
    誤字や、間違いの指摘は自分では、まず気づくことはないので、本当に助かります。
    早速修正させていただきました。

    というか、一昨日の冷え込みで、早速体調崩しました(笑)
    昨日1日は、OS-1を飲みつつ、安静に寝ていたら、だいぶ良くなったようで、助かりました;
    寒さは本当、体に与える影響が大きいです。
    気をつけないと…。ありがとうございます。
    いのぽんさんもお気をつけてください。