[Social sharing] Social sharing functionality #social

social-share.js

function socialShare (e) {
  e.preventDefault();
  
  const href = this.getAttribute('href');
  const options = 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,';
  const network = this.getAttribute('data-network');
  const networks = {
    facebook: { width: 600, height: 300 },
    twitter: { width: 600, height: 254 },
    google: { width: 515, height: 490 },
    linkedin: { width: 600, height: 473 }
  }

  window.open(href, '', options + 'height=' + networks[network].height + ',width=' + networks[network].width);
}

function socialShareEventListeners () {
  const socialIcons = document.querySelectorAll('.social-icon');
  
  if (socialIcons.length) {
    for (let i = 0; i < socialIcons.length; i++) {
      socialIcons[i].addEventListener('click', socialShare);
    }
  }
}

social-share.php

<div class="social-buttons-wrapper">
    <div class="social-buttons">
        <a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" data-network="facebook" class="social-icon facebook" title="Share on Facebook" target="_blank"  rel="noopener noreferrer">
            <svg id="facebook"><use xlink:href="#facebook-logo" /></svg>
        </a>
        <a href="https://twitter.com/home?status=<?php the_title(); echo ': '; the_permalink(); ?>%20%23hashtag" data-network="twitter" class="social-icon twitter" title="Share on Twitter" target="_blank"  rel="noopener noreferrer">
            <svg id="twitter"><use xlink:href="#twitter-logo" /></svg>
        </a>
        <a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" data-network="linkedin" class="social-icon linkedin" title="Share on LinkedIn" target="_blank"  rel="noopener noreferrer">
            <svg id="linkedin"><use xlink:href="#linkedin" /></svg>
        </a>
        <a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" data-network="google" class="social-icon google-plus" title="Share on Google+" target="_blank"  rel="noopener noreferrer">
            <svg id="google"><use xlink:href="#google-plus" /></svg>
        </a>
    </div>
</div>