Responsible Social Share Links
Social share scripts are convenient and easy to copy & paste but rely on JavaScript and add additional overhead to your site, which means more HTTP requests and slower load times. Instead, use share links that don’t require you to load scripts for each social site.
Stop loading third-party scripts
It’s important to design and build sites responsibly—people pay for data and to truly serve a global audience where 3G and 4G networks are luxuries or nonexistent, every byte of data transferred matters.
Here’s a breakdown of loading social sharing scripts from some of the most popular sites:
| Site | Files | Size |
|---|---|---|
| Google+ | 1 | 15.1KB |
| 3 | 73.3KB | |
| 2 | 47.7KB | |
| 3 | 12.9KB | |
| Tumblr | 1 | 1.5KB |
| 4 | 52.7KB | |
| Total | 14 | 203.2KB |
That’s 14 additional requests and although it took 1.3 seconds to load on my connection, my connection advertises 50-105 Mbps. When I throttle the loading to an EDGE network, it takes 7.7 seconds.
The privacy of your users is another thing to consider—loading third-party share scripts allows them to track users on your site. Using share links not dependent on third-party scripts is not only faster, but you’re being more responsible and cautious with the privacy of your users, which is another huge plus.
Use Share URLs
Each social network has its own unique share URL that accepts custom parameters used to pull in the information to be displayed. Most importantly, social share links work without JavaScript.
Let’s take a look at Facebook’s share URL:
https://www.facebook.com/sharer/sharer.php?u=URL_TO_SHARE
Facebook’s only accepts one parameter, u, and you’ll replace the URL you want shared with URL_TO_SHARE.
URL Encode
It’s important to note that values of parameters must be URL encoded—spaces and certain special characters will not be read, and URL encoding converts them into readable values. An encoded URL looks like the following:
http%3A%2F%2Fjonsuh.com%2F
Depending on the language(s) or framework you’re using, there are various ways to URL encode. With PHP:
<?php echo urlencode('https://jonsuh.com/'); ?>
With Jekyll I use this plugin and do the following:
{{ 'https://jonsuh.com/' | url_encode }}
Construct the Share URL
Construct the Facebook share URL by appending the encoded URL immediately after u= (the question mark denotes the start of query strings):
https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fjonsuh.com%2F
Then create the share link by using an anchor <a> with target=_blank, which should look like the following:
(The code has been broken up into several lines for readability—remember to remove any spaces and line breaks in the href if you copy & paste.)
<a href="https://www.facebook.com/sharer/sharer.php
?u=https%3A%2F%2Fjonsuh.com%2F"
target="_blank">Share on Facebook</a>
Multiple parameters
Facebook’s sharer is simple because it only accepts one parameter, but let’s take a look at Twitter’s, which accepts more than one.
https://twitter.com/intent/tweet?text=TWEET_TO_SHARE&url=URL_TO_SHARE&via=USERNAME_TO_SHARE
This example accepts 3 parameters: text, url and via. It’s important to note the ampersands are not part of the parameter values—they’re query string separators.
Let’s take the corresponding values and construct the share URL:
<!--
text: Check out this website!
url : https://jonsuh.com/
via : jonsuh
-->
<a href="https://twitter.com/intent/tweet/
?text=Check%20out%20this%20website!
&url=https%3A%2F%2Fjonsuh.com%2F
&via=jonsuh"
target="_blank">Share on Twitter</a>
You can also replace the “Share on Twitter” text with a custom image:
<a href="https://twitter.com/intent/tweet/
?text=Check%20out%20this%20website!
&url=https%3A%2F%2Fjonsuh.com%2F
&via=jonsuh"
target="_blank">
<img src="http://example.com/image.png" alt="Share on Twitter">
</a>
Even better, customize it with CSS:
<a class="custom-share-button" href="https://twitter.com/intent/tweet/
?text=Check%20out%20this%20website!
&url=https%3A%2F%2Fjonsuh.com%2F
&via=jonsuh"
target="_blank">
<span class="custom-share-button-icon"><svg viewBox="0 0 12 12" preserveAspectRatio="xMidYMid meet" class="svg-icon svg-icon-twitter"><path class="svg-icon-path" d="M10.8,3.5c0,0.1,0,0.2,0,0.3c0,3.3-2.5,7-7,7c-1.4,0-2.7-0.3-3.8-1c0.2,0,0.4,0,0.6,0c1.1,0,2.2-0.5,3.1-1.2 c-1.1,0-2-0.7-2.3-1.7c0.2,0,0.3,0,0.5,0s0.4,0,0.7-0.1c-1.1-0.2-2-1.2-2-2.4l0,0c0.3,0.2,0.7,0.3,1.1,0.3C1,4.3,0.6,3.5,0.6,2.7 c0-0.5,0.1-0.8,0.3-1.2c1.2,1.6,3,2.5,5,2.6c0-0.2-0.1-0.4-0.1-0.6c0-1.3,1.1-2.4,2.5-2.4c0.7,0,1.4,0.3,1.8,0.8 c0.6-0.1,1.1-0.3,1.6-0.6c-0.2,0.6-0.6,1.1-1.1,1.4c0.5-0.1,1-0.2,1.4-0.4C11.7,2.8,11.2,3.2,10.8,3.5z"/></svg></span>
<span class="custom-share-button-label">Share on Twitter</span>
</a>
<style>
.custom-share-button {
font-family: "Roboto", Helvetica, Arial, sans-serif;
color: #fff;
background-color: #55acee;
padding: .8em 1.2em;
border-radius: 3px;
display: inline-block;
}
.custom-share-button-icon,
.custom-share-button-label {
display: inline-block;
vertical-align: middle;
}
.custom-share-button-icon {
width: 1em;
height: 1em;
margin-right: .2em;
}
.custom-share-button-icon path { fill: #fff; }
.custom-share-button-label {
font-size: .9em;
font-weight: 500;
}
.custom-share-button:hover { background-color: #70b7ec; }
</style>
Enhance with JavaScript
Now that we’ve gotten social sharing links to work without JavaScript, let’s enhance them by adding some JavaScript to open the share URL in a popup window. Here’s the function we’ll use to handle the popup window.
function windowPopup(url, width, height) {
// Calculate the position of the popup so
// it’s centered on the screen.
var left = (screen.width / 2) - (width / 2),
top = (screen.height / 2) - (height / 2);
window.open(
url,
"",
"menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=" + width + ",height=" + height + ",top=" + top + ",left=" + left
);
}
Bind windowPopup to when the share link is clicked. In this example, we’ll use a JavaScript-specific utility class js-social-share.
<a class="js-social-share" href="https://twitter.com/intent/tweet/?text=Check%20out%20this%20website!&url=https%3A%2F%2Fjonsuh.com%2F&via=jonsuh" target="_blank">Share on Twitter</a>
//jQuery
$(".js-social-share").on("click", function(e) {
e.preventDefault();
windowPopup($(this).attr("href"), 500, 300);
});
// Vanilla JavaScript
var jsSocialShares = document.querySelectorAll(".js-social-share");
if (jsSocialShares) {
[].forEach.call(jsSocialShares, function(anchor) {
anchor.addEventListener("click", function(e) {
e.preventDefault();
windowPopup(this.href, 500, 300);
});
});
}
Share URLs
Here’s a collection of common social share URLs and examples of their structures along with links to documentations.
(The code has been broken up into several lines for readability—remember to remove any spaces and line breaks in the href if you copy & paste.)
<a href="https://www.facebook.com/sharer/sharer.php
?u=https%3A%2F%2Fjonsuh.com%2F"
target="_blank">Share on Facebook</a>
Parameter u is required.
Google+
<a href="https://plus.google.com/share
?url=https%3A%2F%2Fjonsuh.com%2F"
target="_blank">Share on Google+</a>
Parameter url is required. Read the documentation
<a href="https://www.linkedin.com/shareArticle
?mini=true
&url=https%3A%2F%2Fjonsuh.com%2F
&title=Jonathan%20Suh
&source=https%3A%2F%2Fjonsuh.com%2F
&summary=Short%20summary
target="_blank">Share on LinkedIn</a>
Parameter mini is required and must be true, url is required. Read the documentation
<a href="https://www.pinterest.com/pin/create/button/
?url=https%3A%2F%2Fjonsuh.com%2F
&media=https%3A%2F%2Fjonsuh.com%2Ficon.png
&description=Short%20description
&hashtags=web,development"
target="_blank">Share on Pinterest</a>
Parameter url is required. Read the documentation
<a href="http://www.reddit.com/submit/
?url=https%3A%2F%2Fjonsuh.com%2F"
target="_blank">Share on Reddit</a>
Parameter url is required. Read the documentation
<a href="https://twitter.com/intent/tweet/
?text=Visit%20my%20website
&url=https%3A%2F%2Fjonsuh.com%2F
&via=jonsuh
&hashtags=web,development"
target="_blank">Share on Twitter</a>
All parameters are optional. Read the documentation
Conclusion
Removing third-party social share scripts and using social share URLs will make your site leaner and faster. However, there are some limitations to using traditional share URLs (for example you can’t set custom captions and descriptions with Facebook’s; therefore, you’d have to use Facebook’s SDK and Feed Dialog, or not being able to show the like/tweet/share count) but unless it’s necessary, the benefits of not loading third-party scripts outweight the cons.
