Medium style highlight to share module

Medium has always pushed the UX boundaries and has introduced many features which others have replicated - in this Gist we'll show you how to create a Medium-style share module.

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 đŸ™‚

Gist List
Get the Gist of things
Read the Comments
Open on github

Comments

No comments on this article yet.

Add a Comment

Your email address will not be published.

These HTML tags work: <a href=""> <code> <strong> <pre>


Connect:
OR

Our Services
Validate your ideas before diving in. Consultancy
Dig deep, audit your data, prepare for action Discovery
Get everything in shape to smooth the project path. Shaping
Let us help you realize your imagination Design
Rock-solid WordPress tools, built to last. Development
Without water, the garden will not grow. Support


Projects
Quinta de Sant’Ana, Portugal
Quinta de Sant’Ana, Portugal

Quinta de Sant'Ana overlooks the picturesque village of Gradil with its cobbled streets, white washed houses and hospitable inhabitants.


Projects: View All or
Releases
Willow
Willow

Willow is a Logic~less Template Engine built for WordPress. Willow plays nicely with ACF, is quick to learn and developer-focused.


Releases: View All or