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?

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Carlos Santos

    Pinterest:

    URL: https://pinterest.com/pin/create/button/

    Params:
    – **url**: the page URL (percent-encoded)
    – **media**: image URL
    – **description**: quick description (text)

    Doc: http://developers.pinterest.com/pin_it/

    • Craig

      Thanks Carlos!

  • Daniel

    Hi Craig, great article. Few points…1) Under the heading LinkedIn, you’ve written ‘Google sharing links’. In your JavaScript, you have missed the open and closing brackets when calling the ‘PopupHandler’. Other than that, it’s good information for any developer to have.

    • Anonymous

      Thanks, Daniel.

  • Andrew

    Great article, thanks!

  • Ted k’

    Very Nice!!!!! Congratulations!

  • Neil

    brilliant

  • José T. Guerra

    Thank you very much, Craig, for sharing these secrets. Excellent material! I plan to start using this simple method for sharing to see how it works in my website.

  • Vincent Clair

    Very good !
    Is there a similar way for counters and likes buttons ? It would be awesome…

    • Craig

      Thanks Vincent. Unfortunately, you can’t add counters unless you use the network’s JavaScript. That said, do you really want them? They remind me of the “this page has been viewed by N people” messages we eradicated from the web a decade ago. Also, they’re rarely accurate and tend to round to the nearest thousand. And finally, isn’t is slightly embarrassing when your pages don’t receive any shares or likes?

      In most cases, I suspect it’s only you who cares about the numbers. Use Google Analytics for more useful statistics!

  • vishal

    I use Floating Social Bar wordpress plugin by wpbeginner on http://www.ebuzznet.com/ and loading time is very fast…

    • Craig

      Are you sure about that? Looking at one page, the total compressed file size is 2Mb, (4.8Mb uncompressed) with 87 scripts totalling 1,121Kb. Not all of them are for the social networks, but you could certainly optimize it further! You probably wouldn’t want to load it over a mobile connection, but the site fails in IE10 and Firefox too.

  • Viktor

    Sorry, for me, this code is a mystery, why is it needed?

    $sURL = urlencode(
    ‘http’ .
    ($_SERVER['SERVER_PORT'] == 443 ? ‘s’ : ”) . ‘://’ .
    $_SERVER['HTTP_HOST'] .
    $_SERVER['PHP_SELF']
    );

    • Craig

      Hi Victor. The code’s used to encode the current page’s URL into a string which can be appended as an argument to another URL. So “http://www.sitepoint.com/” becomes “http%3A%2F%2Fsitepoint.com%2F”.

  • Vincent Clair

    Thanks for your point of view Craig. Actually, i think it’s interesting on website news with a young audience (15-25) to show counters : it gives a feeling of active website. The number is not the interesting part, and you’re right, GA suits well for that. But it’s more an indicator of what is the warm news and “don’t miss it”.

    • Craig

      That’s fair enough … it’s just a shame you need hundreds of Kb’s to show the number!

      • Vincent Clair

        It’s just a shame you think you’re an expert :)

        • sheikh.heera

          Why not give a little brief about your comment that it is meant for.

  • Anonymous

    Good stuff but… that’s a lot of JS code just for a popup don’t you think ?

    • Craig

      Do you think so? It’s less than 1Kb, is cross-browser compatible, allows configuration and shouldn’t cause issues if it fails. You could reduce it further if you don’t need IE8 support, hard-code the configuration parameters and apply minification. It’d should reduce to around 300-400 bytes.

  • Anonymous

    Yes but why do you create a popuphandler? For me, a simple function executing window.open, returnin false, and added inline in an onclick event, and you are done :

    Am I doing it wrong ?

    • Craig

      Yes, you can write code like that – but shouldn’t. Inline event handlers are not recommended; you need to manually add them everywhere, it bulks up your HTML and prevents separation of JavaScript. While we only had four links in this example, we could have 400 — or 4,000. The script above will handle that.

  • Stephanie Boucher

    Tried the Facebook share – but how do you control the image that pops up with it? In some examples you get a choice of thumbnails but not on mine, it just lops off half of the header image.

    • Craig

      Facebook and some of the other sharing system grab the first image on the page. However, they’ll reduce the dimensions to something which can be displayed easily, so you will see some cropping. If you want to fix it, add a suitable image to the top of the page which is hidden using CSS. That said, I wouldn’t worry a great deal.

  • Anonymous

    Okay so let’s use $(‘.poplink’).click(function(){wopen($(this).attr(‘href’))}); and I think we are done with that. More than 5 lines for a popup is way too much.

    To specify the image you want to show on a facebook share, you must not use a hidden image, but use the opengraph tag og:image, like it is done … on sitepoint.com :

    If the image respects the required dimensions, it will be used for the facebook share.
    You can test your page here https://developers.facebook.com/tools/debug

    • Craig

      Hmm, OK but if you’re depending on jQuery, you can’t really claim more than 5 lines is too much!

      Thanks for the meta image info – does that work on the other social networks?

  • Stephanie Boucher

    I’m trying to implement the og:image and despite following instructions to the letter, I can’t get it to work. Debug says my image isn’t large enough even though it is actually larger than specified…

  • Anonymous

    @Stephanie Boucher: should be sufficient. Drop it in .

  • Dave

    Thanks for sharing these examples Craig! I decided to write a simple wordpress plugin to make adding the buttons to my wordpress sites easy. If anyone’s interested, you can download a copy from my site: http://www.xoogu.com/simple-social-sharing-wordpress-plugin/

  • http://makethemclick.com.au/library Mark @ Make Them Click

    Craig, just what I’m looking for although I’m not a coder, so I’m having difficulty following your instructions.

    Obviously we don’t want to hand code this for every page, so how do we insert or call the appropriate url for the link?