2015/12/11

消えた Twitter のツイート数を JavaScript で表示する方法(count.jsoon)


先日、Twitter 社が count.json の API を廃止したことにより、記事のツイートボタンにツイート数が表示されなくなりました。

こんな感じですね。

Pic01

ですが、これだと記事がどの位反響があったのか分かりません。

このツイートボタンにツイート数を JavaScript で表示する方法をご紹介します。

その方法とは、以下の「widgetoon.js & count.jsoon」サービスを利用するものです。

Pic02

 

「widgetoon.js & count.jsoon」は、Twitter のツイートを検索して、該当記事のツイート数を表示するウィジェットを提供してくれるサービスです。

但し、このサービスは実験的なものであるので、サービスが終了する可能性があることを念頭に入れておいてください。

利用方法は簡単で、上記のトップ画面でサイトまたはブログの URL とメールアドレスを入力して登録します。

そうすると、以下のようなメールが来るので、リンクをクリックして Twitter 連携をします。メールが届くまで1営業日ほどかかるそうですが、私の場合は、4、5時間位で届きました。

Pic03

Twitter 連携をするメリットは、ツイートの収集速度があがることと、過去のツイートにさかのぼってツイートを収集できることです。Twitter 連携をしないと、登録以降のツイートしか収集しません。

また、1つのサイトには1つのTwitterアカウントしか使えないのでご注意ください。複数のサイトを Twitter 連携するのであれば、サイトの数だけ Twitter アカウントを用意する必要があります(問い合わせ済み)。

なお、ツイートの収集には数日かかる場合があるので、気長に待ちましょう。

 

さて、実際の設定ですが、ツイートボタンを表示したいページの <head> </head> タグの中に以下の行を追加します。

<script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script>

そして、Twitter のツイートボタンを表示していた部分を、以下のように書き換えます。

<a href="http://twitter.com/share"
  class="twitter-share-buttoon"
  data-url=""
  data-text=""
  data-count="horizontal"
  data-lang="ja">ツイート</a>

<script>
!function(d) {
  var a = d.querySelector('.twitter-share-buttoon');
  a.setAttribute('data-url', d.location.href);
  a.setAttribute('data-text', d.title);
}(document);
</script>

 最後に、</body> タグの前辺りに以下の行を追加します。

<script> widgetoon_main(); </script>

これで、ツイート数の収集が完了していれば、以下のようにツイートボタンにツイート数が表示されるようになります。

Pic04

もし、ツイートボタンのレイアウトが崩れた場合はスタイルシートで調整します。私の環境では、ツイートボタンが上に飛び出したので、以下のスタイルシートで対応しました。

#twitter-widgetoon-0 {
  height:20px!important;
  width:110px!important;
}

他にもツイート数のバルーンをツイートボタンの上に表示する方法などもあるのですが、詳しくは 「API の使い方」を参考にしてください。簡単に設定方法が分かります。

ネット上には、「widgetoon.js & count.jsoon」を WordPress と PHP で対応しているサンプルはあるのですが、JavaScript で設定する方法がなかったので紹介してみましたがいかがだったでしょうか。

ツイート数は記事の影響度を図る指標として重要なものなので、本当は Twitter 社が考えを改めてくれればいいのですけどね。

概数でもよいので、ツイート数の復活を期待したいと思います。


スポンサーリンク


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




Twitter ではブログにはない、いろんな情報を発信しています。


コメント

コメントを書く



プロフィール

  • 名前:fnya
    経歴:
    SE としての経験は15年以上。様々な言語と環境で業務系システム開発を行い、セキュリティ対策などもしていました。現在は趣味SE。

    Twitter では、ブログでは取り上げない情報も公開しています。


    ブログについて

    このブログは、IT、スマートフォン、タブレット、システム開発などに関するさまざまな話題を取り上げたり、雑感などをつづっています。

    現在、Enty で支援を受け付けています。もしよければご支援ください。



    >>ブログ詳細
    >>自作ツール
    >>運営サイト
    >>Windows 10 まとめ

    Twitter のフォローはこちらから Facebook ページはこちら Google+ページはこちら RSSフィードのご登録はこちらから