<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);
})
}
This Pen doesn't use any external CSS resources.