jQueryを使わないでシェア数を取得するJavaScriptコード

jQueryを使わないでシェア数を取得します。

脱jQueryの第一歩です。

この記事のシェア数を取得してもあれなので、メインブログの以下の記事のシェア数を取得します。

理解していますか？営業利益・経常利益・純利益などの様々な利益の違い - NO TITLE

Facebookのシェア数は

はてブのシェア数は

<p>Facebookのシェア数は<span class="test-facebook-count"><i class="fa fa-spinner fa-spin"></i></span></p>
<p>Hatenaのシェア数は<span class="test-hatebu-count"><i class="fa fa-spinner fa-spin"></i></span></p>
<script>
// コールバック関数
function getJson(json) {
  var hatebuCount = json;
  var allSelector = document.getElementsByClassName('test-hatebu-count');
  for(var i=0;i<allSelector.length;i++){
    allSelector[i].innerHTML = hatebuCount;
  }
}
//　ここは即時関数で他のコードに影響が出ない様に。
(function(){
  var url = "http://shiromatakumi.hatenablog.com/entry/2015/11/09/110056"; //　実際に利用する時はlocation.hrefを代入する
  getResponse("//graph.facebook.com/?id=",'test-facebook-count','json',callbackFb);
  // はてブのjsonpを受け取る
  var script = document.createElement('script');
  script.src = 'http://api.b.st-hatena.com/entry.count?url='+encodeURIComponent(url)+'&callback=getJson';
  document.body.appendChild(script);
  
  // 通信用の関数（あとで再利用するかもなので関数化）
  function getResponse(reqUrl,selector,type,callback){
    var data = null;
    var xhr = new XMLHttpRequest();
    xhr.ontimeout = function() {
      xhr.abort(); // 中止
      callback(data,selector);
    };
    // 通信エラー時の処理
    xhr.onerror = function(){callback(data,selector);};
    xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 ) {
        if(xhr.status == 200) {
          data = xhr.response;
        }
        callback(data,selector);
      }
    }
    xhr.open('GET',reqUrl+encodeURIComponent(url),true);
    xhr.timeout = 15000 ;
    xhr.responseType = type;
    xhr.send();
  }
  // 各SNSのコールバック関数
  function callbackFb(obj,selector) {
    var allSelector = document.getElementsByClassName(selector);
    if(!obj.share || !obj.share.share_count) {
      for(var i=0;i<allSelector.length;i++){
        allSelector[i].innerHTML = 0;
      }
    } else {
      for(var i=0;i<allSelector.length;i++){
        allSelector[i].innerHTML = obj.share.share_count;
      }
    }
  }
}());
</script>

こんな感じです。