HummingbirdUK main logo

HummingbirdUK

Coding solutions to business problems

About us

We use code to create solutions to business challenges, bottle-necks and headaches.

If you think your business has a problem that can be solved through code, we are happy to chat things through without any obligation.

Get in touch

Custom social sharing buttons Part 1 - Facebook

Home / Blog / Custom social sharing buttons Part 1 - Facebook

Written by Giles Bennett

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 - as amply demonstrated below the title of this, and every, blog post on this blog, or in the picture below.
Custom social sharing buttons - an example
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 : [php]http://graph.facebook.com/?id=PAGEURL[/php] So, for example, visiting : [php]http://graph.facebook.com/?id=http://www.facebook.com[/php] 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 : [php]$(document).ready(function() { beforecounter = "<span class="sharing-button-count">"; aftercounter = "</span>"; $.getJSON("http://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); } }); }); [/php] and the Facebook button itself looks like this (wrapped in a div which contains it and the other social sharing buttons) : A bit more explanation. When loaded the button has the following classes : [php]sharing-button[/php] - common to all buttons [php]facebook-button[/php] - contains the background image (the Facebook logo) [php]sharing-button-has-no-count[/php] - 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 : [php]http://<!--?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?--> [/php] 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 [php]sharing-button-has-no-count[/php] class from the Facebook button, adds the [php]sharing-button-has-count[/php] class (which un-rounds the top right and bottom right corners) then adds the number of shares in between the [php]beforecounter[/php] and [php]aftercounter[/php] 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 : [php]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" ) } [/php] 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.
Author : Giles Bennett

About the author

Giles Bennett built his first website in 1996, and is old enough to miss Netscape Navigator. Initially a lawyer, he jumped ship to IT in 2008, and after 5 years as a freelancer, he founded HummingbirdUK in 2013. He can be reached by email at giles@hummingbirduk.com.