White Arrow icon
Back to all Elements

"Highlight & Share" with Sharect.js (like in Medium)

A lightweight 'Select text and share / tweet'

This is really lightweight and easy!

First we add the script source to our project, before the</body> tag.

* if we want the plugin to work on the entire website we add it in the project's settings under custom code. otherwise we can add it on the page's custom code section.

<script src="https://cdn.jsdelivr.net/npm/sharect@1.1.0/src/sharect.js"></script>

Copy

2nd step is to add the code that triggers the plugin. We should add this right after the previous code.

Some options are available, like icon color, background color, which elements can be selected and Facebook share (needs additional code).

<script>

 var sharect = new Sharect();

 sharect.init();

</script>

Copy

That is about it!

Depending on your page structure, the plugin might be hidden under a higher z-indexed layer, so add this to your <head> tag:

<style>

.sharect {

z-index: 9999;

}

</style>

Copy

Preview:

browser mockup
Share:
Heart icon

When your bath soap bar gets too small to use, don't throw it away! open the next bar, and when you finish showering, stick the small old bar to the back of the new bar. Onces they both dry, they will become one.

Might also interest you:

Auto get Current Year

Cloneable
Code
JavaScript

Automatically insert the current year to any element with the class of 'year'

Read more
Blue arrow iconWhite Arrow icon

Scroll Menu to Current Link

Cloneable
CMS
Code

Using JS to scroll a div (menu) to the current link inside.

Read more
Blue arrow iconWhite Arrow icon

Background Video with Audio (using plyr.js)

Cloneable
Code
JavaScript

An embed video with Mute/UnMute button using plyr.js plugin.

Read more
Blue arrow iconWhite Arrow icon