<h1>Social Media Sharing: HTML Links Generator</h1>
<h2>Page Information to Share</h2>

<table>
  <tr>
    <td><label for="url">URL:</label></td>
    <td><input type="text" id="url"></td>
  </tr>
  <tr>
    <td><label for="tweet">Tweet:</label></td>
    <td><input type="text" id="tweet" placeholder="Optional">(Twitter)</td>
  </tr>
  <tr>
    <td><label for="tweet">Hashtags:</label></td>
    <td><input type="text" id="hashtags" placeholder="Optional: Enter comma-separated hashtags">(Twitter)</td>
  </tr>
  <tr>
    <td><label for="title">Title:</label></td>
    <td><input type="text" id="title" placeholder="Optional: Only use to override page's Open Graph tag.">(LinkedIn)</td>
  </tr>
  <tr>
    <td><label for="summary">Summary:</label></td>
    <td><input type="text" id="summary" placeholder="Optional: Only use to override page's Open Graph tag.">(LinkedIn)</td>
  </tr>
</table>

<h2>Generated Share Links</h2>
<textarea id="share-links"></textarea>
<button>Copy to Clipboard</button>
body {
  width: 95%;
  max-width: 810px;
  font-family: tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  padding: 0 0 20px 0;
  margin: 0 auto 0 auto;
}

h1 {
  font-size: 24px;
  text-align: center;
  margin: 20px 0 30px 0;
}

h2 {
  font-size: 20px;
  margin: 20px 0 30px 0;
}

table {
  margin: 0 auto 30px auto;
}

label {
  font-weight: bold;
}

input {
  width: 400px;
  padding: 2px;
  margin: 0 10px 0 0;
}

td:first-child {
  text-align: right;
  padding: 0 5px 0 0;
}

textarea {
  display: block;
  width: 100%;
  height: 80px;
  font-family: monospace;
  white-space: pre;
  margin: 0 0 10px 0;
}
$('table').on('input', function() {
  var url = encodeURIComponent($('#url').val());
  var tweet = encodeURIComponent($('#tweet').val());
  var title = encodeURIComponent($('#title').val());
  var summary = encodeURIComponent($('#summary').val());
  
  var hashtags = $('#hashtags').val();
  hashtags = hashtags.replace(/\s+/g, '');
  hashtags = hashtags.replace(/#/g, '');
  hashtags = encodeURIComponent(hashtags);
  hashtags = hashtags.replace(/%2C/g, ',');
  
  facebook = '<li><a href="https://www.facebook.com/sharer.php?u=' + url + '">Share on Facebook</a></li>';
  
  twitter = '<li><a href="https://twitter.com/intent/tweet?url=' + url;
  if (tweet != "") { twitter += '&text=' + tweet };
  if (hashtags != "") { twitter += '&hashtags=' + hashtags };
  twitter += '">Share on Twitter</a></li>';

  linkedin = '<li><a href="https://www.linkedin.com/sharing/share-offsite/&url=' + url + '&title=' + title + '&summary=' + summary + '">Share on LinkedIn</a></li>';
  linkedin = '<li><a href="https://www.linkedin.com/sharing/share-offsite/&url=' + url;
  if (title != "") { linkedin += '&title=' + title };
  if (summary != "") { linkedin += '&summary=' + summary };
  linkedin += '">Share on LinkedIn</a></li>';

  $('textarea').text(facebook + '\n' + twitter + '\n' + linkedin);
});

$('button').on('click', function() {
  document.querySelector("#share-links").select();
  document.execCommand('copy');
});

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