Creating fast social share buttons that don't track users

A deep dive into the process involved in creating social share buttons and why I chose to snub social bookmarking services.

I recently had some free time on my hands to address some issues with the theme of this site, and one issue I had been meaning to address for a while now was the lack of share buttons for social media.

Now, I don't think the site's lack of share buttons is a barrier for readers to share my posts and I doubt they will get much use, if any, but I had two reasons for adding them. Firstly, I originally created this site so that I could play around with designs and ideas I had. Secondly, without adding the buttons I don't have any metrics to evaluate their usefulness. Just speculation.

So with only limited time I thought the easiest option would be to just add a 3rd party service such as AddThis or ShareThis and be done with it. Right? Well not quite, they do have their disadvantages:

Fortunately, all the most common social networks provide API calls that can be invoked as simple HTML links. No performance hit, no tracking and usually not blocked.

Designing share buttons

My instincts for the design was to use the white space to the left of the page body. The existing layout already used this space to display the publish date and I thought I could continue the circle theme by placing circular buttons below.

The design was simple enough so I quickly mocked it up straight into the existing template with some basic HTML and CSS.

Screen shot of blog post from this site with large social share buttons to the left side
Distraction - The bold brand colours of popular social media sites visually distract from the main content.

Immediately I could see that the bold colours of the icons were too predominate against the, fairly minimalist, design. It didn't work. Even by reducing the size of the buttons to 50px they were still too distracting.

However, I did like the position of the buttons so I wanted to see if I could reduce the impact and align them with the overall theme a bit more. Changing the background colour still made the buttons too distracting from the content body but hollowing them out reduced the impact significantly. By adding the brand colours back I had come up with some skinny buttons that fitted in nicely with the existing design.

Iterations - Four variations on the
Iteration - Four variations of the initial design attempt to soften the visual impact.

The skinny buttons were a good fit for the site theme but by removing the bold brand colours I had made it more difficult for users to recognise their functionality. Coloured sharing buttons are ubiquitous on the web. Familiarity makes it easier for the user to achieve what they want. Granted, this probably wouldn't be such an issue with my target audience but it was a compromise I didn't like. I felt the buttons had lost their brand identity.

I was back to where I began. I wanted the functionality of the buttons to be instantly recognisable but I wasn't prepared to sacrifice the simplicity of the site theme or dedicate a relatively big part of the site to another site's branding.

This exercise was to only test out some ideas and I didn't believe the buttons would get enough clicks to justify the design so I considered leaving the buttons off the page altogether.

As I had some time left, I wanted to try one last idea before I finished.

Speed dials

Inspired by Google's Material Design Speed Dial buttons, I included a primary 'share' button and modified the original buttons to be hidden. Adding a CSS hover to reveal the sharing buttons (more about that later).

See the Pen Speed dial share buttons by David Glenn (@daviglenn) on CodePen.

I was satisfied this was a good compromise. I had managed to add the original buttons with strong associated branding while maintaining the integrity the site's design.

Mobile and touch screens

As mentioned before, I had no intention of displaying the sharing buttons on mobile devices, so I wrapped the whole thing in a CSS media query so that it was only displayed on devices wider than 1192 pixels. That is the width at which point there is enough white space on the left to display the buttons.

But what about touch devices? The hover functionality wouldn't work on touch only devices with a high screen resolution so I added a simple jQuery script to show/hide the dials on click/tap.

Overall I was happy with this design but there was still one thing that was bugging me.

"Share this, trust me it's awesome!"

By positioning the share button at the top of the post's body I was asking the reader to share my content before they had even read it. The reader would have no idea whether my content was something that they would want to share with their friends. That's a big ask. If I was going to persuade anyone to share my post then I would have more of a chance after they had at least read it.

And that is part of the reason I originally liked the positioning. The white space down the left hand side provided an ideal column to make the share button "sticky".

Enter Waypoints. Waypoints is an awesome little JavaScript library that allows you to attach handlers to an element. When a user scrolls past the element, it's assigned handler is triggered. By toggling CSS classes on an element it can be made to stick to a position when scrolling. I could've achieved the same result using the Bootstrap Affix plugin but the site didn't include Bootstrap and it would've been overkill to add it for one feature.

By adding a simple waypoint, I was able to fix the position of the share button when browser is scrolled down and another to automatically open the dials when the bottom of the post is reached.

This makes the share button constantly accessible at all times while reading the content. The user is then subtly reminded to share the content by the animated opening of the social links when the bottom of the post is reached.

Compromises

As always, the final design was a compromise. I've adding the ability for users to easily share posts on this site without compromising the overall design with big adverts for other brands. The sticky effect makes it easily accessible and subtle animations attract the user's attention at the point they are most likely to share. The minimal JavaScript used is faster than 3rd party scripts and the user's privacy is not compromised unless they explicitly choose to share a post. The buttons still function if JavaScript is disabled.

Now I've just got to wait for the statistics to see whether the share button is worth keeping. Until then, let me know what you think in the comments, any constructive feedback is always appreciated.


For those that are interested, the source code and demo for implementing a Material Design Floating Action Button Speed Dial are on GitHub.

View Demo Edit Code

The icons used on the share buttons are from the excellent Font Awesome, I could have used one of many other icon fonts available, but the site already included Font Awesome.


Recent Posts


Comments

Hire Me

I'm currently availble for contracting and consulting work. Get in touch if you are interested in working together.