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

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/

Twitter

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

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. View the demonstration page… 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?

Frequently Asked Questions about Social Media Button Links