Dev & Design

Make your own progressively enhanced share buttons

Ah, social buttons… they’re just like modern day hit counters…

Screen Shot 2015-04-18 at 2.05.02 pm

At their worst they slow your site down and show how little your pages are shared on social media, at their best they make it easier for people to promote your pages to their friends and followers.

When faced with the task of implementing share buttons in the past I’ve reached straight for a third party library or service. But whenever I’ve done that I’ve always had questions nagging at me; what are these third parties bringing into my site? Does it really need that 50kb JavaScript file? or that 30kb CSS file? why would someone give this kind of service away for free? what are they getting in return? will they make a change at their end that will break my site?

So when this task came to me once more I decided to look into what it takes to roll your own social buttons.

What do we need?

share-buttons

In this post we’re going to set ourselves the following requirements for our share buttons:

  1. The share button will allow a person using our site to share a URL
  2. The share button will include a count of how many times the URL has been shared

The good news is that the major social networks provide you with some very simple ways to achieve these two goals.

Sharing your URL

Most social networks have a URL that takes a few parameters allowing you to share a page. For example, Facebook’s looks like this*:

https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.david-lewis.com

You will need to replace the www.david-lewis.com part with the page you want to share. Once you have constructed your URL you can use it with an <a> tag and you’re pretty much there. I like this as I haven’t had to use any JavaScript.

If you want to find more URLs like this, for services like LinkedIn and Twitter bradvin has a great GitHub repo listing heaps of sharing URLs.

* Note there’s also the Share Dialog for Facebook

Getting the share count

Quite a few social networks also include a URL that returns the share count for a given page. To make things even better for us they often support for JSONP.

Using Facebook as an example we can use the following:

https://graph.facebook.com/?id=http%3A%2F%2Fwww.david-lewis.com&callback=callback_json

Again, you’ll want to replace www.david-lewis.com with your own page. If you’re using something like jQuery to take care of the request you’ll also want to look up how it handles the callback portion of the url.

Using this URL plus a little JavaScript you can request the page count after page load and inject the value returned into your page.

Additional example URLs

Twitter: https://cdn.api.twitter.com/1/urls/count.json?url=http%3A%2F%2Fwww.david-lewis.com.au%2F&callback=callback_json

LinkedIn: https://www.linkedin.com/countserv/count/share?url=http%3A%2F%2Fwww.david-lewis.com&callback=callback_json

Facebook like: https://api.facebook.com/method/fql.query?query=select%20like_count%20from%20link_stat%20where%20url=%27https://www.david-lewis.com/%27&format=json&callback=callback

Seeing this in action

If you’re keen to see these techniques in action I’ve prepared a standalone library.  You can see what it looks like on the demo page.

The Barebones Share Buttons deliberately exclude any styling and the markup is in your hands too, I felt that users of this library would want to retain complete control.