Custom social share buttons

05 Mar 2015

Share buttons are a useful tool for increasing the audience on a website and easing your users to distribute the content in social media. Over time share buttons have become one of default means for boosting the content promotion. There are a few ways to integrate them on a website. First and most obvious option is to use official buttons provided by social platforms. There are also quite a few third-party services aggregating access to multiple social media. They are offering a rather comprehensive solution to the problem, which may however come at a price. Last but not least, we can craft our own solution, which is in some cases the best option.

My first attempt to integrate share buttons on my blog was to embed the official ones. There are pros and cons of using them. On the one hand, they usually offer some customization options, e.g. regarding the size of button or share count display. On the other hand, official buttons can be pretty bloated and may slow down load times of the website. For the most part each button will load its own script and generate pretty heavy markup. They may also pose styling issues or simply not fit in some layout scenarios (such as mobile layouts for small screens), especially if consistent design is essential.

Share buttons with Font Awesome

Custom share buttons in the JSFiddle below support Twitter, Facebook, Google+, LinkedIn, Pinterest and StumbledUpon. The demo contains basically two layouts: the default one for page and one for image sharing. It also provides a few styling options for the share counter: it can either be hidden or displayed at the top or at the bottom of a button.

A complete share button consists of three components, which is: the layout, the sharing functionality and optionally the ability to display metadata regarding the shared object (usually the actual number of shares of the URL). I wrapped all three parts in a little jQuery plugin, the Gist can be found here. Code is free to use or modify.

The layout is based on the Font Awesome toolkit, which provides a set of scalable font-based icons and CSS for styling them. Using a font as a basis for a button lets us to harness all of CSS goodness and easily achieve some neat layout effects, without having to deal with any graphic editors, etc.

Responsive layout

It is a quite common approach to show buttons vertically or horizontally, adjusting responsively to the viewport size. On larger screens share buttons can be fixed vertically to the left and switch to horizontal layout on smaller screens. Here’s the demo of such design with slightly changed styles:

Share click

The implementation boils down mostly to opening a separate window and requesting the share dialog URL, like in the example below for Google+:

$share.find(".google-plus a")
      .attr("href", "//plus.google.com/share?url=" + settings.url)
      .on("click", function () {
        window.open(e.href, 'mywin',
            'left=20,top=20,width=500,height=400,toolbar=1,resizable=0');
        return false;
      });

Some of the platforms provide additional URL parameters to specify a custom logo or a default text for the share. This is the case e.g. for Twitter and Pinterest. Sharing to Pinterest can be done by either calling a share URL with custom parameters (for image and description) or invoking a script which handles the resolution of Pin image, like in this snippet. Google+ and Facebook prefer to use Open Graph properties embedded in page’s meta tags to enhance the share post content.

Share counter

Retrieving metadata about a shared URL can be challenging. Some of the platforms provide an API call for getting the share count. The thing is that if you want to handle share buttons completely client-side you will probably need to use a JSONP request in order to not violate the same origin policy while sending an AJAX request to a different domain. And sometimes it is the only option, e.g. when you have a static website. Whether or not JSONP request is supported depends on specific API provider. Out of the six above mentioned social media four support JSONP requests: Twitter, Facebook, Pinterest and LinkedIn. StumledUpon has an API call for counter but it doesn’t support JSONP (the data could be proxied by one's own server to the client to avoid cross-domain requests). In case of Google+ there is no public API for a URL share counter, AFAIK. There is one unofficial / hacky method but it doesn’t support JSONP requests anyway.

comments powered by Disqus