Medium style highlight to share module

As a developer, I am always dragging my mouse, trackpad or finger ( on touch devices ) around, selecting, highlighting, resizing and probing to see how a UI reacts and responds.

One feature I have always enjoyed is the ability to select or highlight text to share it – as this reduces the need to occupy UI space with a sharing widget and overcomes the need for fixed positioning / floating widgets, which can be cumbersome or clunky – it also can act as a serendipitous cta, which visitors might use to propagate your content.

To see this module working simply highlight any text in the main content area of this post.

We did not write the core JS function, that was written by Massimo Artizzu and can be found on GitHub here: https://github.com/MaxArt2501/share-this.

However, we did add some wrappers to make the module easy to set-up from a WordPress theme via an Event Listener placed either in a specific template or in a theme scripts.js file.

// init share on defined selector ##
document.addEventListener('DOMContentLoaded', function(e) {
    q.share.init( '.the-content', [ 'facebook', 'twitter', 'email' ] );
});

Below is the full JS module – again note the original credits to the author and below our wrapper object:

And here is the SASS file used to style it on this site:

Short and sweet – happy coding 🙂