【修正お願い!】シェア数付きボタンでツイート数が取得できずグルグル回り続けるものの対処方法

シェア数付き自作シェアボタンを配布していたのですが、それらのTwitterでのツイート数を取得するサービスが昨日(11/20)で終了してしまったので、その原因と対処法を書きたいと思います。

症状

このブログで配布していて、結構多くの方に使っていただいているシェアボタン

www.yukihy.com

www.yukihy.com

ですが、ツイート数が取得できなくなってしまいました‥。

ただ取得できないだけでなく、このシェアボタンは表示されるまでぐるぐる回るようになっているので、あたかも表示されるかのように思わせてしまいます^^;。

純粋にサイトが重いと思われてしまうので、お手数ですが対応をお願いします。

ちなみにこのボタンのみでの現象ではなく、デフォルトのシェアボタンも表示されなくなっています。数か月前から表示されたりされなかったり不安定でしたよね。

直し方

直し方を書いていきます。下に詳細を書いていきますが、面倒な方は上に貼ったシェアボタンのリンクからもう一度やり直していただいても良いかもしれません。上のリンク先は既に修正をしてあります。

HTMLを直す

まずはHTMLを直していきます。

3Dバージョンでもフラットバージョンでも、自分がシェアボタンを置きたい場所に、以下のようなものを貼ったと思います(下のは3Dバージョンを例に)。

Before

<!--シェアボタン-->
<div class="share-3d">
<span style="font-size: 8px">シェアする</span>
<div class="share-3d-inner">
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/share.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" ><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="twitter-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Googleプラス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google+</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
</div>
</div>

この中のTwitterの部分

Before

<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="twitter-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>

を、以下のように変えてください。

After

<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>

これで、一応大丈夫だと思います。一応ここまででもちゃんと表示されるようになりますが、表示速度などをさらに高めたい方は以下のjQueryの部分もお願いします。

jQuery

記事下に以下のものがあると思います。

Before

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--シェア数の数字-->
<script>
//Twitterのシェア数を取得
function get_social_count_twitter(url, selcter) {
  jQuery.ajax({
  url:'http://urls.api.twitter.com/1/urls/count.json',
  dataType:'jsonp',
  data:{
    url:url
  },
  success:function(res){
    jQuery( selcter ).text( res.count || 0 );
  },
  error:function(){
    jQuery( selcter ).text('0');
  }
  });
}
//Facebookのシェア数を取得
function get_social_count_facebook(url, selcter) {
  jQuery.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
      id:url
    },
    success:function(res){
      jQuery( selcter ).text( res.shares || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}
//はてなブックマークではてブ数を取得
function get_social_count_hatebu(url, selcter) {
  jQuery.ajax({
    url:'http://api.b.st-hatena.com/entry.count?callback=?',
    dataType:'jsonp',
    data:{
      url:url
    },
    success:function(res){
      jQuery( selcter ).text( res || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}
jQuery(function(){
  get_social_count_twitter('{Permalink}', '.twitter-count');
  get_social_count_facebook('{Permalink}', '.facebook-count');
  get_social_count_hatebu('{Permalink}', '.hatebu-count');
});
</script>

これを、ツイッターの部分を消して以下のようにしてください。（張り替えればOKです！）

After

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--シェア数の数字-->
<script>
//Facebookのシェア数を取得
function get_social_count_facebook(url, selcter) {
  jQuery.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
      id:url
    },
    success:function(res){
      jQuery( selcter ).text( res.shares || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}
//はてなブックマークではてブ数を取得
function get_social_count_hatebu(url, selcter) {
  jQuery.ajax({
    url:'http://api.b.st-hatena.com/entry.count?callback=?',
    dataType:'jsonp',
    data:{
      url:url
    },
    success:function(res){
      jQuery( selcter ).text( res || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}
jQuery(function(){
  get_social_count_facebook('{Permalink}', '.facebook-count');
  get_social_count_hatebu('{Permalink}', '.hatebu-count');
});
</script>

これで終了です！

原因

詳しくは「持続的なプラットフォームのための難しい決断」に書かれているのですが、どうやら今までツイート数を取得するサービスというのは、ツイッター公式のものではなかったようです^^;

ツイートボタンのカウントはある特定のURLを含んだツイートの数を表示しますが、この数字は皆様のコンテンツに対するTwitterのインパクトを反映していません。この数字は、リプライ、引用リツイート、同じコンテンツを表すが異なるURLを含むツイートといったものを含まないだけではなく、このURLをツイートしたユーザーにどれだけ多くのフォロワーがいるかといった情報を含まないからです。

とあるように、ツイート数というのはその記事がTwitterで話題になっているかなどを表す指標として正確なものではないということなのでしょう。

それにしても、ツイート数が取得できなくなるのはかなり痛いような気がします。代わりになるようなものを開発してくれるとすごく嬉しいですよね。

まとめ

ということで、お手数ですが時間のあるときにでも変えていただければと思います。忘れていて対応が遅くなってしまいすみません^^;。

もうPocketやググタスも安定して取得できないので、もはやはてブとFacebookだけになってしまいました‥。ボタン作者が言うのもなんですが、シェア数を全部無くしたり純正のボタンに戻したりしても良いかもしれませんw

見つかった不具合は常時この「不具合連絡」というカテゴリで出していこうと思うので、よろしくお願いします^^

不具合・修正点・改善点などありましたら、コメントお願いします！

www.yukihy.com