<h1>Social Media Sharing: Automated Link Creator<span>(jQuery)</span></h1>

<div class="links">
  <ul>
    <li class="social-share facebook">Share on Facebook</li>
    <li class="social-share twitter">Share on Twitter</li>
    <li class="social-share linkedin">Share on LinkedIn</li>
  </ul>
</div>

<div class="notes">
  <p>This sample HTML and JavaScript can be used to create links that share the current page on either Facebook, Twitter, and LinkedIn. Usage notes:</p>
  <ul>
    <li><p>The JavaScript function <code>setShareLinks()</code> should be called after the DOM has loaded.</p></li>
    <li><p>This function creates sharing links on any object in the HTML that has the class <code>social-share</code> and the name of a social media service – see above HTML for an example.</p></li>
    <li><p>Setting the variable <code>params</code> to an empty string in the JavaScript function <code>socialWindow()</code> will cause these links to launch in a new window or tab rather than a pop-up.</p></li>
    <li><p><a href="https://codepen.io/adamcoti/pen/qrobLZ" target="_blank">This routine is also available using vanilla JavaScript</a>.</li>
  </ul>
</div>
body {
  width: 95%;
  max-width: 700px;
  font-family: tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  padding: 0 10px 20px 10px;
  margin: 0 auto 0 auto;
}

h1 {
  font-size: 24px;
  text-align: center;
}

h1 span {
  display: block;
  font-size: 18px;
  font-weight: normal;
}

code {
  background-color: #eee;
  padding: 0 3px 0 3px;
}

.links ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.links li {
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}

.links li:hover {
  text-decoration: underline;
}

.notes {
  width: 100%;
  margin: 0 0 20px 0;
}
setShareLinks();

function socialWindow(url) {
  var left = (screen.width - 570) / 2;
  var top = (screen.height - 570) / 2;
  var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
  // Setting 'params' to an empty string will launch
  // content in a new tab or window rather than a pop-up.
  // params = "";
  window.open(url,"NewWindow",params);
}

function setShareLinks() {
  var pageUrl = encodeURIComponent(document.URL);
  var tweet = encodeURIComponent($("meta[property='og:description']").attr("content"));

  $(".social-share.facebook").on("click", function() {
    url = "https://www.facebook.com/sharer.php?u=" + pageUrl;
    socialWindow(url);
  });

  $(".social-share.twitter").on("click", function() {
    url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet;
    socialWindow(url);
  });

  $(".social-share.linkedin").on("click", function() {
    url = "https://www.linkedin.com/sharing/share-offsite/?url=" + pageUrl;
    socialWindow(url);
  })
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js