先日、Twitterのカウント数が取得できなくなりました。
その代替案として、ツイート数のバルーンが無くなって崩れたデザインを補完するための記事をいくつか書きました。
ただ、これらの方法は、ツイート数の代わりに、「リスト」という文字や、Font Awesomeのアイコンを利用したものでした。
けれど、ネットを見ていたら、ツイート数を取得できるcount.jsoonというサービスがあって、実際に使ってみたら、以下のようなボタンを手軽に作ることができました。
縦型
横型
※上記のカウントは当サイトのトップページのものです。
かなり簡単にできたので、今回は「以前のようなカウント付きのTwitterボタンを表示する方法」の紹介です。
目次
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を利用するには、主に以下の手順が必要です。
- count.jsoonにWEBサイト登録をする
- count.jsoonとTwitterを連携する
- ツイートボタンを表示するコードを貼り付ける
登録作業をする必要があるのですが、それさえやってしまえば利用は簡単です。
count.jsoonにWEBサイト登録をする
まずは、count.jsoonに移動します。
すると、以下のような画面が表示されるので、「使用するサイトURL」と「メールアドレス」を入力して「登録」ボタンを押してください。（パスワードなどを設定する必要はありません。）
すると、「登録を受け付けました。登録処理が完了次第メールでお知らせします。」というメッセージが表示されます。
登録完了のメールが届くまで、最大24時間と結構時間がかかります。僕の場合は数時間で届きました。
で僕の場合は、以下のような何て書いてあるのかよくわからない怪しいメールが届きました。
とりあえず気にせずURLをクリックします。
すると以下のようなページが表示されます。
count.jsoonとTwitterを連携する
count.jsoonによると、Twitterと連携することによりツイートの収集速度が上がるそうなので、連携もしておきます。
「widgetoon.js」と「count.jsoon」は、ツイッターアカウントとの連携が可能です。連携することでツイートの収集速度が上がり、収集内容も増えます。
管理画面上の「ツイッター連携」項目にある「登録する」リンクをクリックします。
すると、以下のような画面が表示されるので、「連携アプリを認証」ボタンを押してください。
連携で利用する機能は、以下の「見る機能」の2つだけなので、結構安心して連携できます。
- タイムラインのツイートを見る
- フォローしている人を見る
すると、以下のように表示されます。
最初は、ツイート数は全く取得されていませんが、何日か時間をかけてツイート数を取得していきます。
ある程度ツイート数が貯まるまで数日はかかるかもしれません。
こんな感じで、登録は完了です。
ツイートボタンを表示するコードを貼り付ける
あとは、count.jsoonでツイートボタン用のコードを貼り付けるだけです。
APIの詳細については以下を参照してください。
手っ取り早くボタンを貼り付ける方法
以下は、とりあえず簡単にツイートボタンを設置する方法を紹介します。
縦型ボタンのWordpressカスタマイズコード（個別・投稿ページ用）
手っ取り早く設置するには、以下のコードをツイートボタンを表示させたい箇所にコピペしてください。
<script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script> <a href="http://twitter.com/share" class="twitter-share-buttoon" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="vertical" data-lang="ja">ツイート</a> <script> widgetoon_main(); </script>
カウント取得用のスクリプトと、ボタン表示部分用のHTMLコード、関数呼び出しを1ヶ所にまとめて行っています。
表示例
横型ボタンのWordpressカスタマイズコード（個別・投稿ページ用）
横型はA要素の「data-count」属性の値を「horizontal」にしただけです。
<script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script> <a href="http://twitter.com/share" class="twitter-share-buttoon" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="horizontal" data-lang="ja">ツイート</a> <script> widgetoon_main(); </script>
表示例
通常サイトで利用する場合
通常サイトで利用する場合は、以下のように直接「data-url」に「URL」を、「data-text」属性に「テキスト（タイトル）」を入力すればOKです。
<script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script> <a href="http://twitter.com/share" class="twitter-share-buttoon" data-url="https://nelog.jp/" data-text="寝ログ" data-count="vertical" data-lang="ja">ツイート</a> <script> widgetoon_main(); </script>
表示例
A要素の「data-count」属性の値を「horizontal」にすれば、横型のツイートボタンも表示できます。
表示例
スクリプトをヘッダーとフッターに設定する
ボタンを1ページに何個も設置する場合は、上記の方法だと、スクリプト呼び出しが何度も記入されてしまいます。
そういった時のために、ヘッダーとフッターで1回だけスクリプトを呼び込む方法も紹介します。
ヘッダーでスクリプトファイル呼び出し
まずはヘッダーの<head></head>内に以下のコードを記入します。
<script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script>
フッターでスクリプト関数の呼び出し
あとは、フッターの</body>タグ手前で以下のコードを記入します。
<script> widgetoon_main(); </script>
ボタンの挿入位置にコードを記述
あとは、ボタンを挿入したい位置に以下のようにコードを記述すれば、毎回スクリプトなどを呼び出す必要はありません。
<p>縦型のバルーンボタン</p> <a href="http://twitter.com/share" class="twitter-share-buttoon" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="vertical" data-lang="ja">ツイート</a> <p>横型のバルーンボタン</p> <a href="http://twitter.com/share" class="twitter-share-buttoon" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="horizontal" data-lang="ja">ツイート</a>
表示例
上のコードは、以下のように表示されます。
縦型のバルーンボタン
横型のバルーンボタン
まとめ
count.jsoonは、登録が少し面倒ではあります。
そして、ちょっとツイート情報を収集するのに時間はかかります。
けれど上に紹介したような感じで、基本コピペだけで、「旧Twitterカウント付きバルーンボタン」を手軽に再現することができます。
「ページのSNSボタン群に、ツイート数がないのはどうしても寂しい」なんて場合には、コードの設置も手軽で良い方法ではないかと思います。
あと、PHPや、JavaScriptで「ツイート数」だけを取得する方法もありますが、また別の記事で書きたいと思います。
追記：PHPでツイート数のみを取得するWordpressカスタマイズ方法。
いつも参考にさせて頂いてます。
本文中の見出し「count.jsoonにWEBサイト登録をする」のすぐ下にある
「まずは、count.jsoonに移動します。」リンクをクリックすると、リンク先が以下のアドレスになっています。
http://jsoon.digitiminimi.com/service_desc.html
このアドレスは、count.jsoonのサイト登録URL http://jsoon.digitiminimi.com/ と違っていたため、コメントさせて頂きました。
1年で1番寒い時期になりますのでお体ご自愛下さい。