Login

Make Sharing Seamless with This Customizable Share Button

Simplify the sharing process with this all-in-one share button, a custom web component that makes it easy for you and your readers to send content all over the internet.

by Ryan Feigenbaum

Make Sharing Seamless with This Customizable Share Button

Share this post

Make Sharing Seamless with This Customizable Share Button

Make Sharing Seamless with This Customizable Share Button

Your reader just finished reading your spicy new post and is excited to share it with their chums on Facebook. Only, there's a problem. There's no share button in sight.

The moment passes, and the opportunity for you to go viral is lost. Forever ๐Ÿ’€

For you, the content creator or web developer, the problem is an absolute dumpster fire of available solutions. They're clunky, privacy-invasive, locked behind paywalls, or an ungodly mixture of all three.

There's got to be a better way.

Shark Tank: Sharks contemplate a better sharing button

Introducing the <share-button>

Meet the <share-button>, a custom web component I created to solve this exact problem.

Go ahead and try it out ๐Ÿ‘‡

BTS: How It Works

We use custom web components just like a <button> or any other standard HTML element, except we can make custom web components do whatever we want: <custom-video>, <podcast-player>, <toaster-oven>.

They can be used to tackle a small problem like the share button or to build an entire platform like YouTube.

<yt-image alt="" ftl-eligible="" notify-on-loaded="" notify-on-unloaded="" class="style-scope ytd-thumbnail">...
</yt-image>

Real example of a YouTube custom web component

And, they're picking up steam ๐Ÿš‚

I built the share-button component to be used without fuss, with sane defaults, and room for customization when needed. The code is open source and PRs are welcome!

How to Use It

I give the TL;DR version here, but check out the full docs to see all the available options.

  1. Load the Code

Add the following script tag to your site's head. This loads the code that makes the button work.

<script defer src="https://unpkg.com/@royalfig/share-button/dist/share-button.umd.js"></script>
  1. Place the Button

Next, add the custom element, <share-button></share-button>, wherever you want it to appear on the page.

Maybe that's here:

Or here:

Add as many share buttons as you want, anywhere on the page. You could just have a whole page full of share buttons.


I know what you're thinking: "I don't have access to the HTML on my page. Can I not use this?"

Don't worry, I got you.

Inject the button onto the page by adding the data-position attribute to the script tag, specifying where you want the button to appear: left, center, or right.

๐Ÿ’ก
Ghost users can use Code Injection > Header without having to modify their theme.
<script data-position="left" src="https://unpkg.com/@royalfig/share-button/dist/share-button.umd.js">

This will inject the share button on the bottom left corner of the page. See the docs for an example of an injected button.

A share button injecting itself. Yes, really, as a digital painting.

Customize the Button

It ain't just injectionโ€”the share button includes several more juicy customization options.

All customizations happen by way of attributes. For example, to customize the button color, use the color-button attribute with any valid CSS color as the value:

<share-button color-button="#FEBE99"></share-button>

When injecting the button, all attributes are still available but they must be prefixed with data- (to align with HTML standards):

<script data-color-button="#FEBE99" data-position="left" src="https://unpkg.com/@royalfig/share-button/dist/share-button.umd.js">

Colors

The available color customizations are as follows:

Button text

Change the button text by using the button-text attribute.

Icons

Change the share icon by setting the icon attribute to a number from 1 to 7.

Dark Mode

Out of the box, the share button supports dark mode and follows the user's OS preference. That means, when the OS is in dark mode, so will the button and vice versa.

Disable this behavior by setting the dark-mode attribute to false. Alternatively, specify your own dark mode styles by setting the dark-mode attribute to a list of CSS variables equal to the dark mode colors. These variables have identical names as the attributes.

<share-button dark-mode="--color-button: #00C0E8; --color-button-text: #FFF;"></share-button>

Remember that the above example will only be visible when dark mode is set at the OS level. You can force this behavior in dev tools.

Time to Share

The share-button component makes it easy to share posts without that much effort from you or your readers. That's the point: share without the bear. Try it out and let me know what you think in the comments below.