twitterコメント数がわからなくなったので対応、風船みたいな吹き出し復活^^。

twitterコメント数取得できるようになりました
先日より、twitterの公式ツイートボタンなどで使われていた、コメント数取得API「count.json」の提供が終了し、使用していたブログなどでは、ツイートマークの上の風船みたいな吹き出しの中に表示されていたコメント数がなくなってしまいました。

その後すぐ、コメント数の代わりに吹き出しの中にアイコンや顔文字を出したりする方法などが各ブログでも紹介されていましたが、しばらくするとコメント数取得API「count.json」に変わるAPIの存在などもあることが、わかり私は「count.json」の代わりとして使える「widgetoon.js」というAPIを使ってコメント数を復活させることにしました^^。

この記事のもくじ

1 twitterボタン吹き出しの中を顔文字にするのも惹かれました
2 少し躓いたけど「widgetoon.js」APIを使ってtwiterコメント数復活しました

twitterボタン吹き出しの中を顔文字にするのも惹かれました

tiwtterコメント数取得APIが使えなくなって、しばらくしてから見つけたニョイさん（@ranyoi）の記事で、風船吹き出し内を顔文字にするという案にも非常に惹かれた（猫(=ФωФ=)にしたかった）のですが・・・・

もうしばらく様子見よ～と思っていたところ、ディジティミニミさんという会社が提供している「widgetoon.js」「count.jsoon」というツイッターコメント数取得APIを教えていただきました^^。
（APIの存在を教えていただいた「ままはっく」のまなしばさん（@manami1030）ありがとうございます！）

少し躓いたけど「widgetoon.js」APIを使ってtwiterコメント数復活しました

おそらくAPIとかJavaとかプログラミングに詳しい方には瞬殺でできる内容だと思うのですが、私はプラグインの「Sharebar」という記事の横に追尾してくるようにツイッターボタンを表示していたせいか、ちょっと躓いた部分があったので、私が困った内容を含めて「widgetoon.js」を利用したtwitterのコメント数復活方法をまとめておきますね。

まずは「widgetoon.js　& count.jsoon」に登録

尚、下準備としてAPIを利用するために「 widgetoon.js　& count.jsoon」にて登録しておく必要があります。

twitterコメント数取得方法、widgetoon.jsを使用

リンクwidgetoon.js　& count.jsoon

メールアドレスとサイトURLを登録するだけなので、簡単なのですが、登録完了通知が来るまでに結構時間がかかる時があるようです。（最大1日程度）
私の場合は、朝登録してその日の夕方くらいに登録完了通知が来ました。

また、登録完了するとメールが届き、以下のようなマイページでツイート取得状況が見れるようになるのですが、こちらもツイート取得が反映されるまでに1日以上時間がかかりました。
私はとりあえず設置完了してから、2日後くらいに確認したところ、ツイート数の取得ができるようになっていました。

count.json利用登録完了通知

また、自分のツイッターアカウントと連携もこのマイページ上で行えるので、正確にツイート数取得するためには連携しておいた方が良いような気がします。（連携しなくてもいいと思うけど。）

「widgetoon.js」を利用してtwitterボタンを設置する方法

今回私が利用させてもらったサービスには「widgetoon.js」と「 count.jsoon」の二種類のAPIが提供されていますが、私は「widgetoon.js」を利用してみました。
理由としては、元々自ブログで表示していたtwitterボタンで使用されていたAPIがTwitterが公式に提供していたwidget.jsだったため。

「widgetoon.js」と「 count.jsoon」APIの使い方ページに

witterが公式に提供していたwidget.jsを使用していた方は、このwidgetoon.jsを利用することで、カウント数つきのツイートボタンを表示することが可能です。

との表記があったためです。

twitterコメント数取得APIの使い方
ただし、注意点も書いてあったので、「count.jsoon」を利用してもどちらでもよいかと思います。

今回は、私が実際に行った「widgetoon.js」を使ってのツイッターコメント数復活方法です。

まず、公式に書かれている以下の内容をもとにやってみました。

——————————————————————–
１．http://jsoon.digitiminimi.com/js/widgetoon.jsのjavascriptを利用するページ内から呼び出して下さい。

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

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

２．Aタグを利用してツイートボタンのリンクを作成、このリンクがツイートボタンに置き換わります。その際、class名をtwitter-share-buttoonにしてください。また、オリジナルのボタンと同じ仕様のアトリビュートを指定してください。オリジナルの仕様はTwitterのページから確認できます。

<a href="http://twitter.com/share"
   class="twitter-share-buttoon"
   data-url="http://jsoon.digitiminimi.com/"
   data-text="widgetoon.jsでcount.jsoonを使う"
   data-count="vertical"
   data-lang="ja">ツイート</a>

<a href="http://twitter.com/share"

class="twitter-share-buttoon"

data-url="http://jsoon.digitiminimi.com/"

data-text="widgetoon.jsでcount.jsoonを使う"

data-count="vertical"

data-lang="ja">ツイート</a>

３.widgetoon_mainを実行し、twitter-share-buttoonクラスのリンクをツイートボタンに置き換えます。

<script> widgetoon_main(); </script>

1	<script> widgetoon_main(); </script>

以上リンク「widgetoon.js　& count.jsoon」API使い方より引用
——————————————————————–

これをもとにtwitterコメント数が取得できるボタンを以下のように作ってみました！！

<script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script>
<a class="twitter-share-buttoon" href="http://twitter.com/share" data-count="vertical" data-via="necooooooo22">Tweet</a><script> widgetoon_main(); </script>

1 2	<script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script> <a class="twitter-share-buttoon" href="http://twitter.com/share" data-count="vertical" data-via="necooooooo22">Tweet</a><script> widgetoon_main(); </script>

data-url、data-textはカレントページ（ツイートボタンが設置してあるページ）のURLとタイトルを拾ってくれるはずなので、ここでは入れていません。
またツイートいただいたときに私宛にメンションが届くようにdata-via=”necooooooo22″を追加しています。
参考記事2秒でできた！twitterボタンでシェアされたときに＠（自分あて）メンションを付ける方法

通常であれば、これで問題なく動くはずだったのですが・・・ここで少し・・いや結構躓きましたので以下躓いた内容をまとめます。

twitterコメント数吹き出しボタン設置がうまくできなかった

まず私の場合、「Sharebar」という横に追尾してくるプラグインでSNSボタンを表示していたので、このプラグイン「Sharebar」の設定画面からツイートボタンを修正します。
先ほど書いたコードをそのまま入れると、パッと見はうまいこと吹き出しが復活して成功したと思ったのですが（この時点ではツイート数取得できてないので、正常にツイートコメントカウントできているかは確認できません）、いざボタンを押してみると、ページのURLとタイトルが入らないことが判明T=T。

ボタンを押すとこうなります・・・。
ツイッターコメントボタン設置失敗例２

これじゃせっかくツイートしてもらってもURLもタイトルも入らない・・・私にメンションが来るだけT=T。
ショボーン(´・ω・｀)となりながらも、じゃあ「data-url」と「data-text」を入れればいいのかなと思い、記事タイトルとURLを取得するWordPressの関数（タグ）「the_title()」と「the_permalink()」を入れて再度設定。
（基本的には「data-url」と「data-text」は設定しなかった場合はカレントページの情報を表示してくれるはずです）

<script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script>
<a class="twitter-share-buttoon" href="http://twitter.com/share" 
data-count="vertical" 
data-url="<?php the_permalink() ?>" 
data-text="<?php the_title(); ?>" 
data-via="necooooooo22">Tweet</a>
<script> widgetoon_main(); </script>

<a class="twitter-share-buttoon" href="http://twitter.com/share"

data-count="vertical"

data-url="<?php the_permalink() ?>"

data-text="<?php the_title(); ?>"

data-via="necooooooo22">Tweet</a>

こんな感じに書いてみたところ、ツイートコメント数ボタンの表示すらおかしくなり、更にボタンをクリックするとPHPのコードが一部見える状態に^^；。

ツイッターコメントボタン設置失敗例１３

またもやショボーン(´・ω・｀)・・・となりながらも、他に「data-url」と「data-text」を指定する方法はどうすればいいのかな～と探し、わかったのが以下の書き方。

    <script type="text/javascript" src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script>
    <script>
    document.write(
    '<a href="http://twitter.com/share" class="twitter-share-buttoon" data-url="' + document.URL + '" data-text="' + document.title +'" data-count="vertical" data-via="necooooooo22" data-lang="ja">ツイート</a>');
    widgetoon_main();
    </script>

document.write(

'<a href="http://twitter.com/share" class="twitter-share-buttoon" data-url="' + document.URL + '" data-text="' + document.title +'" data-count="vertical" data-via="necooooooo22" data-lang="ja">ツイート</a>');

widgetoon_main();

</script>

data-urlを「 ‘ + document.URL + ‘ 」、data-textを「’ + document.title +’ 」と指定したら上手にツイッターコメント吹き出しも表示されて、ツイートボタンクリック時の動作も上手くいきました！

ツイッターコメントボタン設置成功
これはJavaScriptの書き方なんですね。

私はプログラミングは詳しくない・・・というかほぼ知識はないので、なんで最初の書き方がダメで最後の書き方で上手くいくのかはわかってません・・・。
多分何かアホっぽい間違いをしている可能性が高いのですが、ひとまず私と同じ状況になる方も万が一にもいらっしゃるかもと思い、まとめてみました^^。

尚、設置してから２～３日後にはツイート数もしっかり取得できていましたので、動作としても上手くいってるはずです！

尚、かなりたくさんのサイトを参考にしたのですが、今覚えている範囲では下記サイトなどを参考にしました！
ありがとうございました！
参考サイト
【Twitter】ツイート数のカウント「count.json」の代替APIを発見したので試してみた。
TwitterのTweet Button（ツイートボタン）を設置する
 Twitterツイートボタンウェブサイト設置方法まとめ（サイズや設定など）