Custom social sharing buttons (1) - Facebook

Although adding the standard integrations with Facebook, Twitter, Pinterest and co. is quick and simple, some people (myself included!) don't particularly like the fact the scope for editing the look and feel of the like button, tweet button, pin this button, or whatever it may be, is somewhat limited.

The easiest solution to this is to write your own custom social sharing buttons. It's not as difficult as you might think, and gives much more scope for creativity and ensuring that the social sharing buttons fit into the overall look and feel of the site.

I'm going to break this into several blog posts, the first of which (this one) will deal with Facebook. For all the social networks, however, it's the same underlying principle, which comes in two parts - the first is to get the information, and the second is to display the information.

Getting the information

For Facebook, the relevant URL to see how many shares a particular page has is their graph page. You can view this info for any page whatsoever, by simply going to :

https://graph.facebook.com/?id=PAGEURL

So, for example, visiting :

https://graph.facebook.com/?id=https://www.facebook.com

reveals that Facebook's home page has just over a million shares. Not too bad.

To use this information, however, we have to firstly get the information via a Json callback. Using Jquery (and wrapping it in a document.ready() function, the relevant coding looks like this :

$(document).ready(function() {
beforecounter = "<span class="sharing-button-count">";
aftercounter = "</span>";
$.getJSON("https://graph.facebook.com/?id=PAGEURL&amp;callback=?", function(data) {
	if(((data.likes != 0) &amp;&amp; (data.likes != undefined) &amp;&amp; (data.likes != null)) || ((data.shares != null) &amp;&amp; (data.shares != undefined) &amp;&amp; (data.shares != 0))) { 
		totallikes = 0;
		if ((data.likes != 0) &amp;&amp; (data.likes != undefined) &amp;&amp; (data.likes != null)) {
			totallikes += data.likes
		}
		if ((data.shares != 0) &amp;&amp; (data.shares != undefined) &amp;&amp; (data.shares != null)) {
			totallikes += data.shares
		}
		$('#facebookLink').removeClass('sharing-button-has-no-count');			
		$('#facebookLink').addClass('sharing-button-has-count');	
		$('#facebookButton').append(beforecounter + totallikes + aftercounter);	
	}
});
});

A bit more explanation. When loaded the button has the following classes :

sharing-button

- common to all buttons

facebook-button

- contains the background image (the Facebook logo)

sharing-button-has-no-count

- all four corners are rounded (more later).

The JSON callback gets the number of likes and the number of shares for the relevant page - this can be populated dynamically from the page's URL using through PHP (using either :

https://<!--?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?-->

or something more precise in the environment (Magento, Wordpress, whatever) you're working in.

If there is more than one like and / or share then it removes the

sharing-button-has-no-count

class from the Facebook button, adds the

sharing-button-has-count

class (which un-rounds the top right and bottom right corners) then adds the number of shares in between the

beforecounter

and

aftercounter

text (which holds the formatting for the number of shares side of the box - the same as the button side, but with un-rounded corners in top left and bottom left, so that it sits snugly).

The logo side of the button links through (using the onClick) to a small script :

function facebook_popup(urlToOpen) {
	_gaq.push(['_trackEvent', 'Event category', 'Event type', 'Event action',, false]);
	window.open( urlToOpen, "facebookWindow", "height=380,width=660,resizable=0,toolbar=0,menubar=0,status=0,location=0,scrollbars=0" ) 
}

The script records the share to Google Analytics, then opens the URL (to Facebook's sharer.php) in a new window.

And that's pretty much it - when the page loads, the button then updates (if there are shares) asychronously and shows the number of shares.

Next time...Twitter.