Zach’s ugly mug (his face) Zach Leatherman

<webcare-webshare> Web Component

Two small hands play with colorful wooden blocks
February 20, 2024

<webcare-webshare> is a web component that uses the Web Share API to share a web site, falling back (on desktop usually) to a copy to clipboard workflow.

Used on the registration flow for conf.11ty.dev.

Features

  • Defaults to copy URL when Web Share API is not available.
  • Optionally override with your own copy-able content.
  • Custom button text when Web Share API is not available.

Installation

You can install via npm (@zachleat/webcare-webshare) or download the webcare-webshare.js JavaScript file manually.

npm install @zachleat/webcare-webshare --save

Add webcare-webshare.js to your site’s JavaScript assets.

Usage

Use share-text and share-url per the Web Share API. The button is un-disabled when initialized.

<webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/">
	<button disabled>Share your ticket!</button>
</webcare-webshare>

Custom button text

Copy to clipboard workflow only. Use the label-copy (Before) and label-after-copy (After) attributes.

<webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/" label-copy="📋 Copy your ticket URL" label-after-copy="✅ Copied to Clipboard">
	<button disabled>Share your ticket!</button>
</webcare-webshare>

Set custom share content

Copy to clipboard workflow only. Use copy-text to override share-url as the default content that is copied when using Copy to Clipboard.

<webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/" copy-text="Go to https://conf.11ty.dev/">
	<button disabled>Share your ticket!</button>
</webcare-webshare>

IndieWeb Avatar for https://unsplash.com/Poster image by Michał Bożek

< Newer
hypercard Web Component
Older >
throbber Web Component

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

8 Reposts

Brian DavidRaymond CamdenJakub Iwanowski :bash:Tixie Salander ????Ernie SmithJean Pierre KolbbdsIndieWeb Avatar for https://www.alvinashcraft.com

9 Likes

Emil van GalenJustinMorbipicmanStefan ZweifelJakub Iwanowski :bash:tomhazledineMiriam (still)tbeseda
2 Comments
  1. Ben Myers ????

    @zachleat Gotta say, I love that you've set this up so users can supply all of their own strings. It makes this very #i18n friendly! i18n

  2. Zach Leatherman :verify:

    @ben Thanks Ben!

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)