Make your own progressively enhanced share buttons
April 17th, 2015 Leave a reply
Ah, social buttons… they’re just like modern day hit counters…
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.
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?
In this post we’re going to set ourselves the following requirements for our share buttons:
- The share button will allow a person using our site to share a URL
- 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*:
* 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:
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.
Additional example URLs
Seeing this in action
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.