How to Add Fat-Free Social Buttons to Your Pages
Sorry Facebook, but adding 270Kb of code to my pages to show a tiny “Like” button seems excessive. As I discussed in my recent post, The Hidden Cost of Social Sharing, adding Facebook, Twitter, Google+ and LinkedIn buttons can bloat your pages, make sites less responsive and introduce unnecessary security risks.
It need not be that way. The majority of social networks offer URL-based sharing buttons which add little weight to the page and do not require third-party JavaScript. They’re not as well publicized but they’re not difficult to use.
Encode Your URL
All these links pass a URL-encoded representation of your page address to the social network. For example, using PHP:
$sURL = urlencode(
'http' .
($_SERVER['SERVER_PORT'] == 443 ? 's' : '') . '://' .
$_SERVER['HTTP_HOST'] .
$_SERVER['PHP_SELF']
);Depending on the social network, you may also want URL-encoded page titles, descriptions and a list of hashtags (separated by a comma and without the leading hash).
Facebook sharing is simple. You supply the URL and Facebook fetches the title, description and thumbnail:
URL: https://www.facebook.com/sharer/sharer.php
Basic parameters:
| u | : the page URL |
Example:
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsitepoint.com%2F
Further resources are available at https://developers.facebook.com/docs/reference/plugins/share-links/
To be fair, Twitter has always offered a fully-documented Web Intents system which allows you to tweet page links.
URL: https://twitter.com/intent/tweet
Basic parameters:
| url | : the page URL |
| text | : optional text |
| hashtags | : a comma-delimited set of hashtags |
Example:
https://twitter.com/intent/tweet?url=http%3A%2F%2Fsitepoint.com%2F&text=SitePoint&hashtags=web,development
Further resources are available at https://dev.twitter.com/docs/intents
Google+
Google sharing links are similar to Facebook:
URL: https://plus.google.com/share
Basic parameters:
| url | : the page URL |
Example:
https://plus.google.com/share?url=http%3A%2F%2Fsitepoint.com%2F
Further resources are available at https://developers.google.com/+/web/share/
LinkedIn sharing links are similar to Facebook:
URL: http://www.linkedin.com/shareArticle
Basic parameters:
| mini | : must be set to ‘true’ |
| url | : the page URL |
| source | : the company/named source (200 characters maximum) |
| title | : article title (200 characters maximum) |
| summary | : a short description (256 characters maximum) |
Example:
http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fsitepoint.com%2F&title=SitePoint
Further resources are available at https://developer.linkedin.com/documents/share-linkedin
Progressive Pop-ups
The links will work in all browsers. However, they will take you away from the page which is a step too far for the most eager social media manager.
Let’s give our social links a class of “share” then add a small self-running JavaScript function to the end of the page which intercepts all clicks and opens them in a small pop-up window. (I agree that pop-ups are evil and this feels like coding in 1999, but it’s what most social buttons do anyway.)
<script>
// create social networking pop-ups
(function() {
// link selector and pop-up window size
var Config = {
Link: "a.share",
Width: 500,
Height: 500
};
// add handler links
var slink = document.querySelectorAll(Config.Link);
for (var a = 0; a < slink.length; a++) {
slink[a].onclick = PopupHandler;
}
// create popup
function PopupHandler(e) {
e = (e ? e : window.event);
var t = (e.target ? e.target : e.srcElement);
// popup position
var
px = Math.floor(((screen.availWidth || 1024) - Config.Width) / 2),
py = Math.floor(((screen.availHeight || 700) - Config.Height) / 2);
// open popup
var popup = window.open(t.href, "social",
"width="+Config.Width+",height="+Config.Height+
",left="+px+",top="+py+
",location=0,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1");
if (popup) {
popup.focus();
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
}
return !!popup;
}
}());
</script>The script will work in all browsers including IE8 and above. If it fails, the browser will simply open the social networking page in the main window.
The result is a few links and an optional script with fewer than 900 characters to handle pop-ups. Who needs 580Kb of social networking code?
