Create social sharing buttons in WordPress that open popup for sharing

scripts.js

/** SOCIAL MEDIA SHARES  */
var shareBtns = document.querySelectorAll('.social-share-btns a');

shareBtns.forEach( function(btn) {
  btn.addEventListener('click', function(e) {
    e.preventDefault();

    var width = 575, height = 400,
      left = (document.documentElement.clientWidth / 2 - width / 2),
      top = (document.documentElement.clientHeight - height) / 2,
      url = e.target.href,
      opts = 'status=1,resizable=yes' +
        ',width=' + width + ',height=' + height +
        ',top=' + top + ',left=' + left;

    window.open(url, '', opts);

  });
});
/** END SOCIAL MEDIA SHARES  */

template.php

<div class="social-share-btns">
  <?php // Make sure you are in the loop
  $this_url = wp_get_shortlink(); ?>
  <ul class="list-inline">
    <li class="twitter">
      <a href="https://twitter.com/intent/tweet?source=<?php echo urlencode ($this_url); ?>&amp;text=<?php echo get_the_title() . ': ' . urlencode ($this_url); ?>" class="xicon-twitter" rel="noreferrer" title="Twitter">Twitter</a>
    </li>
    <li class="facebook">
      <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode ($this_url); ?>&amp;t=<?php echo get_the_title(); ?>" class="xicon-facebook" rel="noreferrer" title="Facebook">Facebook</a>
    </li>
    <li class="linkedin">
      <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=<?php echo urlencode ($this_url); ?>&amp;title=<?php echo get_the_title(); ?>&amp;summary=<?php echo urlencode ( get_the_excerpt() ); ?>" class="xicon-linkedin" rel="noreferrer" title="LinkedIn">LinkedIn</a>
    </li>
  </ul>
</div>