The Proper Way of Embedding Social Sharing Links

Social sharing buttons are everywhere and even if most webmasters look at them with scoff, users have gotten accustomed to using them and will actively look for them on any page if they believe its content is good or interesting enough for being shared.

All social networks provide embed codes for adding their own share button to remote pages, and while highly useful for non-technical users, these buttons are a nightmare for experienced Web developers.

The problem is that these social button embed codes do not only create a fully-functional button, but they also tend to load external resources in the form of JS&CSS code. These are “page blocking” resources that delay the page loading process and tend to make every website behave slower than it really is.

Since every social network that utilizes this kind of social sharing buttons uses a custom-made share screen where the details of each shared link can be tweaked, the solution to this mess is to use custom-made buttons that redirect the user to that screen, without loading all those useless third-party scripts.

There are quite a few good alternatives available

Thanks to the open source community, you don't even have to know how to do this. There are lots of scripts on the market providing some pretty good tools for this problem already.

There is jsSocials, Ridiculously Responsive Social Sharing Buttons, HTML-Only Share Buttons, prettySocial, Flati Social Share, socialShare.js, and Angular Socialshare. All of them are available for free, will work even with JavaScript turned off, and will load social sharing buttons the proper way, without any third-party scripts.

socialShare.js also provides share counters

Doing it yourself

If you're one of those developers that's always picking on the quality of someone else's code, then don't worry, there's a way of recreating their results in a simple manner.

First off, you need to get your hands on the URL for the intermediary share screen of the social networks you want to build a button for. This is a small list of sharing URLs for all major social networks.

The code for your social share links should be something like this:

This function also has its alternatives in almost all programming languages, so you can create the encoded URL on the server-side and embed it on the page automatically when sending the HTML code to the user. There's also a visual tool from Eric Meyer that allows developers to perform this operation by hand (via copy-paste).

Once you have the final code, it should look like this:

If you want to produce social sharing links more advanced than this simple form, take a look through each website's developer section and see what extra parameters each network supports.

PS: You'll need some CSS to style your buttons. They normally produce a text-based link. If you want them to look pretty you'll also have to write a beautiful skin for them as well.

Hope this was clear enough and you understood why it's important to use custom-made solutions for social sharing buttons and avoid using the bulky, page-blocking tools provided by default. Happy coding!