<!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>
    </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>
    </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(document.URL);
var text = encodeURIComponent(document.title); // 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');
}
Custom Social Share Buttons in raw JavaScript

Article: 
http://shmck.herokuapp.com/custom-social-buttons-in-vanilla-javascript/