> ## Content Index
> Fetch the complete content index at: https://ryanfeigenbaum.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Make Sharing Seamless with This Customizable Share Button
- URL: https://ryanfeigenbaum.com/share/
- Published: 2024-01-04T23:44:30.000Z
- Updated: 2025-03-19T16:36:32.000Z
- Description: 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.
- Author: Ryan Feigenbaum
- Tags: Projects, Code, #Import 2024-04-18 10:10

💡

Wait! Check out the [update to this article](https://ryanfeigenbaum.com/share-this-share-button/), with all the juicy improvements I've made to the 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](https://storage.ghost.io/c/09/e8/09e80f31-2850-4ccb-83c7-70faf422ebfb/content/images/2024/01/share.jpeg)

## Introducing the <share-button>

Meet the `<share-button>`, a [custom web component](https://developer.mozilla.org/en-US/docs/Web/API/Web%5Fcomponents?ref=ryanfeigenbaum.com) 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.

```html
<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 🚂

#### Custom Web Component Resources

- [Awesome Standalones](https://github.com/davatron5000/awesome-standalones?tab=readme-ov-file&ref=ryanfeigenbaum.com) \- Dave Rupert
- [The Good, The Bad, and The Web Components](https://www.youtube.com/watch?v=R4Ri4ft7bXY&ref=ryanfeigenbaum.com) \- Zach Leatherman
- [If Web Components are so great, why am I not using them?](https://daverupert.com/2023/07/why-not-webcomponents/?ref=ryanfeigenbaum.com) \- Dave Rupert
- [Learn Web Components](https://www.youtube.com/watch?v=2I7uX8m0Ta0&ref=ryanfeigenbaum.com) \- Web Dev Simplified \[Video\]
- [Using Web Components for What They're Good At](https://nolanlawson.com/2023/08/23/use-web-components-for-what-theyre-good-at/?ref=ryanfeigenbaum.com) \- Nolan Lawson
- [An Attempted Taxonomy of Web Components](https://www.zachleat.com/web/a-taxonomy-of-web-component-types/?ref=ryanfeigenbaum.com) \- Zack Leatherman

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](https://github.com/royalfig/share-button?ref=ryanfeigenbaum.com) and PRs are welcome!

## How to Use It

I give the TL;DR version here, but check out the [full docs](https://royalfig.github.io/share-button/?ref=ryanfeigenbaum.com) 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.

```html
<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.

![](https://media.tenor.com/Cqxc61fu6rwAAAAC/stillesque.gif)

---

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.

```html
<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](https://royalfig.github.io/share-button/?ref=ryanfeigenbaum.com) for an example of an injected button.

![A share button injecting itself. Yes, really, as a digital painting.](https://storage.ghost.io/c/09/e8/09e80f31-2850-4ccb-83c7-70faf422ebfb/content/images/2024/01/injection.jpeg)

### 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:

```html
<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):

```html
<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:

- **color-backdrop**: The backdrop color behind the share modal
- **color-border**: Share modal border and preview card color
- **color-button-text**: Button text color
- **color-button**: Button color
- **color-element**:Share modal text and icon color
- **color-surface**: Share modal background color

### 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.

![](https://storage.ghost.io/c/09/e8/09e80f31-2850-4ccb-83c7-70faf422ebfb/content/images/2024/01/CleanShot-2024-01-03-at-16.21.22.png)

### 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.

```html
<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.