<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" />
  <script src="style.css"></script>
</head>

<body>

  <section class="social-icons">
    <div class="social-icon-group">
      <a href="//www.facebook.com/sharer/sharer.php" onClick="callFacebookAPI(this.href); return false;">
        <i class="fa fa-facebook"></i>
      </a>
      <span class="fbCount">0</span>
    </div>
    <div class="social-icon-group">
      <a href="twitter.com/share" rel="canonical" onClick="callTwitterAPI(this.href); return false;">
        <i class="fa fa-twitter"></i>
      </a>
      <span class="twCount">0</span>
    </div>
  </section>

  <style>
    .social-icons {
      padding: 40px;
    }
    
    .social-icon-group {
      display: inline-block;
      margin: 0 15px;
    }
    
    .social-icon-group a {
      text-decoration: none;
      color: grey;
    }
    
    .social-icon-group a:hover {
      color: black;
    }
  </style>

  <script src="script.js"></script>
</body>

</html>
var url = encodeURIComponent('www.twitter.com');
var text = encodeURIComponent('Twitter'); // won't work in plunker

function callFacebookAPI() {
  window.open('//www.facebook.com/sharer/sharer.php?u=' + url + '&t=' + text, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
}

function callTwitterAPI() {
  window.open('//twitter.com/share?text=' + text, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=255, width=550');
}

function getJSON(url, success) {

  var ud = '_' + +new Date,
    script = document.createElement('script'),
    head = document.getElementsByTagName('head')[0] || document.documentElement;

  window[ud] = function(data) {
    head.removeChild(script);
    success && success(data);
  };

  script.src = url.replace('callback=?', 'callback=' + ud);
  head.appendChild(script);
}

/* get twitter count */
getJSON("http://cdn.api.twitter.com/1/urls/count.json?url=" + url + "&callback=?", function(json) {
  if (json.count) {
  return document.getElementsByClassName("twCount")[0].innerHTML = json.count;
  }
});

/* get facebook shares */
getJSON("http://graph.facebook.com/?id=http://" + url + "&callback=?", function(json) {
  if (json.shares) {
  return document.getElementsByClassName("fbCount")[0].innerHTML = json.shares;
  }
});
Custom Social Share Buttons in raw JavaScript with Number Values

Article: 
http://shmck.herokuapp.com/incrementing-social-media-counters-in-vanilla-javascript/