Svelte Share Buttons: using Web Share API with Fallback # Svelte Share Buttons: using Web Share API with Fallback #

🧱 What we’re Building #

I mentioned we are working in SvelteKit using the MDsveX blog starter. If Astro is your preferred tool for building Svelte sites, start with the Astro Svelte Markdown starter  instead. Of course, if you have an existing Svelte app, you can create a feature branch and add this functionality there. Anyway, to start, let’s clone a repo:

    
git clone https://github.com/rodneylab/sveltekit-blog-mdx.git sveltekit-share-buttons
cd sveltekit-share-buttons
pnpm install
cp .env.EXAMPLE .env
pnpm run dev

  

With that done, we will start by adding the fallback share button functionality. We will run through adding Twitter in detail, then sketch over adding other networks. If you want to add a popular network not mentioned, drop a comment below, and I will see what I can do. Equally, feel free to submit a pull request to the repo if you code up support for a well-known network, not already implemented.

🧩 Initial Share Button Component #

To get the ball rolling, let’s create a src/lib/components/ShareButtons folder and inside it add an index.svelte file. This file will ultimately contain the logic for the Web Share progressive enhancement, as well as the fallbacks. Progressive enhancement expresses a similar sentiment to graceful degradation. The idea is, we want to support a new feature which does not currently enjoy wide support. We have a baseline which supports all (or most) devices, then the progressive enhancement offers the new feature, but only where the user device supports it.

To get going, paste this code into the new file:

    
1 <script>
2   import Twitter from '$lib/components/ShareButtons/Twitter.svelte';
3   import website from '$lib/config/website';
4 
5   const { siteUrl } = website;
6 
7   export let slug;
8   export let title;
9 
10   const url = `${siteUrl}/${slug}`;
11 </script>
12 
13 <aside aria-label="Share buttons" class="container">
14   <div class="wrapper">
15     Share: <div class="buttons">
16         <Twitter {url} {title} />
17     </div>
18   </div>
19 </aside>

  

Here is some optional styling which you can paste at the end of the file:

    
21 <style lang="scss">
22   .container {
23     display: flex;
24     flex-direction: row;
25     margin-top: $spacing-12;
26     width: $max-width-full;
27   }
28   .wrapper {
29     display: flex;
30     flex-direction: row;
31     margin-left: auto;
32     font-weight: $font-weight-bold;
33     font-size: $font-size-2;
34   }
35   .buttons {
36     margin-left: $spacing-4;
37   }
38 
39   button {
40     background: transparent;
41     border-style: none;
42     transition: all 0.2s ease-in-out;
43   }
44 
45   @media (prefers-reduced-motion: reduce) {
46     button {
47       transition: all 2s ease-in-out;
48     }
49   }
50 
51   button:focus,
52   button:hover {
53     transform: scale(1.1);
54   }
55 </style>

  

This will not work yet — we need to create the Twitter share button component. Nonetheless, let’s add the ShareButton component to our blog post template now:

    
1 <script>
2   import BannerImage from '$lib/components/BannerImage.svelte';
3   import SEO from '$lib/components/SEO/index.svelte';
4   import ShareButtons from '$lib/components/ShareButtons/index.svelte';
5   import readingTime from 'reading-time';

  

    
73 <BannerImage {imageData} />
74 <h1>{title}</h1>
75 <ShareButtons {slug} {title} />

  

With that basic wiring up done, we will next create the Twitter share button component. The other components work similarly, though the Twitter API supports the most customization, so it provides a good starting point.

🐦 Twitter Share Button Component #

This button will be part of the fallback; as such, we will not show it on devices which support the Web Share API. Currently, on MacOS, Safari does support the API, so test this part in Firefox and Chrome. The Twitter code, together with the other share button components, are based off the nygardk/react-share  GitHub repo by Klaus Nygård.

    
1 <script>
2   import TwitterIcon from '$lib/components/Icons/Twitter.svelte';
3 
4   export let hashtags = []; // array of hashtags exclude '#' e.g. ['svelte', 'askRodney']
5   export let quote = undefined;
6   export let related = []; // array of Twitter users (including '@')
7   export let title; // text in Tweet
8   export let url;
9   export let via = ''; // include '@' e.g. '@askRodney'
10 
11   const TWITTER_BLUE = '#00aced';
12 
13   const baseUrl = 'https://twitter.com/share';
14   const parametersObject = {
15     url,
16     ...(hashtags.length > 0 ? { hashtags: hashtags.join(',') } : {}),
17     quote,
18     text: title,
19     ...(related.length > 0 ? { related: related.join(',') } : {}),
20     ...(via.length > 0 ? { via: via.slice(1) } : {}),
21   };
22 
23   const params = Object.entries(parametersObject)
24     .filter(([, value]) => value ?? false)
25     .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
26     .join('&');
27 
28   const urlWithParameters = params === '' ? baseUrl : `${baseUrl}?${params}`;
29 
30   function handleClick() {
31     const config = {
32       height: 550,
33       width: 400,
34       location: 'no',
35       toolbar: 'no',
36       status: 'no',
37       directories: 'no',
38       menubar: 'no',
39       scrollbars: 'yes',
40       resizable: 'no',
41       centerscreen: 'yes',
42       chrome: 'yes',
43     };
44     return window.open(
45       urlWithParameters,
46       '',
47       Object.keys(config)
48         .map((key) => `${key}=${config[key]}`)
49         .join(','),
50     );
51   }
52 </script>
53 
54 <button on:click={handleClick}
55   ><span class="screen-reader-text">Share on Twitter</span><TwitterIcon
56     colour={TWITTER_BLUE}
57     width={48}
58   /></button
59 >
60 
61 <style lang="scss">
62   button {
63     background: transparent;
64     border-style: none;
65     transition: all 0.2s ease-in-out;
66   }
67   @media (prefers-reduced-motion: reduce) {
68     button {
69       transition: all 2s ease-in-out;
70     }
71   }
72 
73   button:focus,
74   button:hover {
75     transform: scale(1.1);
76   }
77   @media screen and (max-width: $desktop-breakpoint) {
78     button {
79       padding-left: $spacing-2;
80       padding-right: $spacing-2;
81     }
82   }
83 </style>

  

In line 2 we import an Iconify Twitter icon already used in the project. It is fairly easy to add icons from dozens of libraries using Iconify. In fact, this post is a follow-up to an earlier post which tells you exactly how to gain access to over 100,000 SVG icons using a single package. So jump back there when you want to see how to add icons to your own project.

The Twitter API has most bells and whistles: you can include hashtags, quotes and related accounts as well as a via Twitter account. I have added some comments in the code to explain how to use these. Here, we’ll just focus on adding the text (title prop) and URL.

Twitter Customizations #

Lines 14 – 21 (above) build up the query parameters for the URL which we need to send to Twitter to share the post. Because this is a URL, some characters are not allowed, and we have to encode them. In line 25, we make use of encodeURIComponent to URL encode the keys and parameters  for us.

The handleClick code in lines 30 – 51 brings up a new window on Twitter’s site which lets the visitor log in (if they are not already logged in) and share. The sizes are sensible defaults which work on different sized devices, so you will probably not need to adjust these.

The other components will be similar, though with differing baseUrl (see line 13). For improved accessibility, include some screen reader text on all buttons (as in line 55). This will not be visible, though screen readers will announce it, helping screen reader users know what the button does.

🔘 Other Network Buttons #

We will skim over the other networks now, in fact, we will only point out details which are different. Then in the following section we will add them into the principal component and also wire up the Web Share API.

Facebook #

    
1 <script>
2   import FacebookIcon from '$lib/components/Icons/Facebook.svelte';
3   export let hashtag = '';
4   export let quote = '';
5   export let url;
6 
7   const FACEBOOK_BLUE = '#3b5998';
8 
9   const baseUrl = 'https://www.facebook.com/sharer/sharer.php';
10   const parametersObject = {
11     u: url,
12     ...(quote !== '' ? { quote } : {}),
13     ...(hashtag !== '' ? { hashtag } : {}),
14   };
15 
16   const params = Object.entries(parametersObject)
17     .filter(([, value]) => value ?? false)
18     .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
19     .join('&');
20 
21   const urlWithParameters = params === '' ? baseUrl : `${baseUrl}?${params}`;
22 
23   function handleClick() {
24     const config = {
25       height: 550,
26       width: 400,
27       location: 'no',
28       toolbar: 'no',
29       status: 'no',
30       directories: 'no',
31       menubar: 'no',
32       scrollbars: 'yes',
33       resizable: 'no',
34       centerscreen: 'yes',
35       chrome: 'yes',
36     };
37     return window.open(
38       urlWithParameters,
39       '',
40       Object.keys(config)
41         .map((key) => `${key}=${config[key]}`)
42         .join(','),
43     );
44   }
45 </script>
46 
47 <button on:click={handleClick}
48   ><span class="screen-reader-text">Share on Facebook</span><FacebookIcon
49     colour={FACEBOOK_BLUE}
50     width={48}
51   /></button
52 >
53 
54 <style lang="scss">
55   button {
56     background: transparent;
57     border-style: none;
58     transition: all 0.2s ease-in-out;
59   }
60 
61   @media (prefers-reduced-motion: reduce) {
62     button {
63       transition: all 2s ease-in-out;
64     }
65   }
66 
67   button:focus,
68   button:hover {
69     transform: scale(1.1);
70   }
71 
72   @media screen and (max-width: $desktop-breakpoint) {
73     button {
74       padding-left: $spacing-2;
75       padding-right: $spacing-2;
76     }
77   }
78 </style>

  

Telegram #

    
1 <script>
2   import TelegramIcon from '$lib/components/Icons/Telegram.svelte';
3 
4   export let url;
5   export let title;
6 
7   const TELEGRAM_BLUE = '#49a9e9';
8 
9   const baseUrl = 'https://telegram.me/share/url';
10   const parametersObject = {
11     url,
12     text: title,
13   };
14 
15   const params = Object.entries(parametersObject)
16     .filter(([, value]) => value ?? false)
17     .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
18     .join('&');
19 
20   const urlWithParameters = params === '' ? baseUrl : `${baseUrl}?${params}`;
21 
22   function handleClick() {
23     const config = {
24       height: 550,
25       width: 400,
26       location: 'no',
27       toolbar: 'no',
28       status: 'no',
29       directories: 'no',
30       menubar: 'no',
31       scrollbars: 'yes',
32       resizable: 'no',
33       centerscreen: 'yes',
34       chrome: 'yes',
35     };
36     return window.open(
37       urlWithParameters,
38       '',
39       Object.keys(config)
40         .map((key) => `${key}=${config[key]}`)
41         .join(','),
42     );
43   }
44 </script>
45 
46 <button on:click={handleClick}
47   ><span class="screen-reader-text">Share on Telegram</span><TelegramIcon
48     colour={TELEGRAM_BLUE}
49     width={48}
50   /></button
51 >
52 
53 <style lang="scss">
54   @import '../../styles/variables';
55 
56   button {
57     background: transparent;
58     border-style: none;
59     transition: all 0.2s ease-in-out;
60   }
61 
62   @media (prefers-reduced-motion: reduce) {
63     button {
64       transition: all 2s ease-in-out;
65     }
66   }
67 
68   button:focus,
69   button:hover {
70     transform: scale(1.1);
71   }
72 
73   @media screen and (max-width: $desktop-breakpoint) {
74     button {
75       padding-left: $spacing-2;
76       padding-right: $spacing-2;
77     }
78   }
79 </style>

  

WhatsApp #

    
1 <script>
2   import { browser } from '$app/env';
3   import WhatsappIcon from '$lib/components/Icons/Whatsapp.svelte';
4   import { isMobileOrTablet } from '$lib/utilities/device';
5 
6   const WHATSAPP_GREEN = '#25D366';
7 
8   export let url;
9   export let title;
10 
11   const baseUrl =
12     browser && isMobileOrTablet()
13       ? 'https://api.whatsapp.com/send'
14       : 'https://web.whatsapp.com/send';
15   const parametersObject = {
16     text: title ? title + ' ' + url : url,
17   };
18 
19   const params = Object.entries(parametersObject)
20     .filter(([, value]) => value ?? false)
21     .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`)
22     .join('&');
23 
24   const urlWithParameters = params === '' ? baseUrl : `${baseUrl}?${params}`;
25 
26   function handleClick() {
27     const config = {
28       height: 550,
29       width: 400,
30       location: 'no',
31       toolbar: 'no',
32       status: 'no',
33       directories: 'no',
34       menubar: 'no',
35       scrollbars: 'yes',
36       resizable: 'no',
37       centerscreen: 'yes',
38       chrome: 'yes',
39     };
40     return window.open(
41       urlWithParameters,
42       '',
43       Object.keys(config)
44         .map((key) => `${key}=${config[key]}`)
45         .join(','),
46     );
47   }
48 </script>
49 
50 <button on:click={handleClick}
51   ><span class="screen-reader-text">Share on Whatsapp</span><WhatsappIcon
52     colour={WHATSAPP_GREEN}
53     width={48}
54   /></button
55 >
56 
57 <style lang="scss">
58   button {
59     background: transparent;
60     border-style: none;
61     transition: all 0.2s ease-in-out;
62   }
63   @media (prefers-reduced-motion: reduce) {
64     button {
65       transition: all 2s ease-in-out;
66     }
67   }
68 
69   button:focus,
70   button:hover {
71     transform: scale(1.1);
72   }
73 
74   @media screen and (max-width: $desktop-breakpoint) {
75     button {
76       padding-left: $spacing-2;
77       padding-right: $spacing-2;
78     }
79   }
80 </style>

  

There is not already a WhatsApp icon in the starter. Add this code, or create your own using your preferred icon set:

    
1 <script>
2   import Icon, { addCollection } from '@iconify/svelte/dist/OfflineIcon.svelte';
3 
4   export let label = 'Whatsapp icon';
5   export let colour = 'inherit';
6   export let ariaHidden = false;
7   export let width = 48;
8 
9   addCollection({
10     prefix: 'simple-icons',
11     icons: {
12       whatsapp: {
13         body: '<path fill="currentColor" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967c-.273-.099-.471-.148-.67.15c-.197.297-.767.966-.94 1.164c-.173.199-.347.223-.644.075c-.297-.15-1.255-.463-2.39-1.475c-.883-.788-1.48-1.761-1.653-2.059c-.173-.297-.018-.458.13-.606c.134-.133.298-.347.446-.52c.149-.174.198-.298.298-.497c.099-.198.05-.371-.025-.52c-.075-.149-.669-1.612-.916-2.207c-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372c-.272.297-1.04 1.016-1.04 2.479c0 1.462 1.065 2.875 1.213 3.074c.149.198 2.096 3.2 5.077 4.487c.709.306 1.262.489 1.694.625c.712.227 1.36.195 1.871.118c.571-.085 1.758-.719 2.006-1.413c.248-.694.248-1.289.173-1.413c-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214l-3.741.982l.998-3.648l-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884c2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z"/>',
14       },
15     },
16     width: 24,
17     height: 24,
18   });
19 
20   // https://api.iconify.design/simple-icons.json?icons=whatsapp
21 </script>
22 
23 <Icon icon="simple-icons:whatsapp" {ariaHidden} aria-label={label} color={colour} {width} />

  

Also for WhatsApp, there are different API URLs depending on whether the visitor is using a mobile device or not. We make use of a utility function to check the type of device the user has. Create this file if you added the WhatsApp share button code above to your app:

    
1 /**
2  * Returns true if the device is thought to be a mobile or tablet
3  * @returns {boolean}
4  */
5 export function isMobileOrTablet() {
6   return /(android|iphone|ipad|mobile)/i.test(navigator.userAgent);
7 }

  

🔨 Pulling it all Together #

We are going back to src/lib/components/ShareButtons/index.svelte now to tie the new buttons in. Feel free to omit any networks you will not need on your app here.

    
1 <script>
2   import Facebook from '$lib/components/ShareButtons/Facebook.svelte';
3   import Telegram from '$lib/components/ShareButtons/Telegram.svelte';
4   import Twitter from '$lib/components/ShareButtons/Twitter.svelte';
5   import Whatsapp from '$lib/components/ShareButtons/Whatsapp.svelte';
6   import website from '$lib/config/website';
7 
8   const { siteUrl } = website;
9 
10   export let slug;
11   export let title;
12 
13   const url = `${siteUrl}/${slug}`;
14 </script>
15 
16 <aside aria-label="Share buttons" class="container">
17   <div class="wrapper">
18     Share: <div class="buttons">
19         <Twitter {url} {title} /><Facebook {url} /><Whatsapp {url} {title} />
20         <Telegram {url} {title} />
21     </div>
22   </div>
23 </aside>

  

I think it will be clear what we are doing here, but let me know if I have forgotten to explain something!

🕸 Web Share API #

The final missing piece is the Web Share button. We will add a webShareAPISupported boolean variable with a reactive declaration  . This requires access to the browser navigator object, so will not work when the code is running server-side. SvelteKit provides the browser variable defined in $app/env which we make use of here. If you are working in Astro, check for ssr using this snippet:

    
// ASTRO ONLY - IGNORE FOR SVELTEKIT
const ssr = import.meta.env.SSR;

  

Remember when browser in the SvelteKit code is true, ssr will be false (and vice verse).

Anyway, let’s update the file:

    
1 <script>
2   import { browser } from '$app/environment';
3   import ShareIcon from '$lib/components/Icons/Share.svelte';
4   import Facebook from '$lib/components/ShareButtons/Facebook.svelte';
5   import Telegram from '$lib/components/ShareButtons/Telegram.svelte';
6   import Twitter from '$lib/components/ShareButtons/Twitter.svelte';
7   import Whatsapp from '$lib/components/ShareButtons/Whatsapp.svelte';
8   import website from '$lib/config/website';
9 
10   const { siteTitle, siteUrl } = website;
11 
12   export let slug;
13   export let title;
14 
15   $: webShareAPISupported = browser && typeof navigator.share !== 'undefined';
16 
17   $: handleWebShare;
18   const handleWebShare = async () => {
19     try {
20       navigator.share({
21         title,
22         text: `Shared from ${siteTitle}`,
23         url,
24       });
25     } catch (error) {
26       webShareAPISupported = false;
27     }
28   };
29   const url = `${siteUrl}/${slug}`;
30 </script>
31 
32 <aside class="container">
33   <div class="wrapper">
34     Share: <div class="buttons">
35       {#if webShareAPISupported}
36         <button on:click={handleWebShare}
37           ><span class="screen-reader-text">Share</span><ShareIcon width={48} /></button
38         >
39       {:else}
40         <Twitter {url} {title} /><Facebook {url} /><Whatsapp {url} {title} />
41         <Telegram {url} {title} />{/if}
42     </div>
43   </div>
44 </aside>

  

In line 17 we declare the handleWebShare function as reactive, using the dollar syntax. This will let the interface update if, in line 26, the function sets webShareAPISuported to false.

What have we got here? #

In lines 35 – 41, we have a guard so if webShareAPISupported is false, the user will see the share buttons we previously defined. On the other hand, if it is true, the user sees the share button, which we will add in a moment.

When the use clicks or taps the share button, the handleWebShare function is invoked. This is asynchronous, so it is best practice to include try/catch blocks. If for some reason, the share fails, there is no issue! Remember, we have our fallback, so just show the share buttons for the networks we added initially. Lines 20 – 24 have the core Web Share code.

Sharing via the API #

The Web Share API lets users share links, text, and files  . We focus on sharing text and links here. To share a file, just add an extra files field to the share object. We share both a link and some related text. You can opt to share either one of these on its own and drop the other (some browsers do not yet support text, though). You see that the API is fairly simple and there is not much more left to explain… the browsers do all the heavy lifting! The final thing worth a mention is the check for support in line 15. To check the latest browser support, see MDN Web Share API docs  .

Share Icon #

Before we can test, we need to put the missing share icon into the project (feel free to swap this out, using your preferred collection):

    
1 <script>
2   import Icon, { addCollection } from '@iconify/svelte/dist/OfflineIcon.svelte';
3 
4   export let label = 'Share icon';
5   export let colour = 'inherit';
6   export let ariaHidden = false;
7   export let width = 24;
8 
9   addCollection({
10     prefix: 'simple-line-icons',
11     icons: {
12       share: {
13         body: '<path fill="currentColor" d="M864 704c-52.688 0-99.295 25.585-128.431 64.88l-421.36-214.72c3.664-13.455 5.792-27.535 5.792-42.16c0-18.303-3.216-35.807-8.88-52.175l423.76-205.616C763.97 294.016 810.897 320 864.001 320c88.367 0 160-71.649 160-160c0-88.368-71.633-160-160-160S704 71.633 704 160c0 12.431 1.567 24.464 4.24 36.08L278.4 404.657c-29.281-32.273-71.393-52.656-118.4-52.656C71.631 352 0 423.633 0 512c0 88.351 71.631 160 160 160c50.895 0 96.127-23.824 125.423-60.865l423.104 215.632C705.664 838.736 704 851.152 704 864c0 88.368 71.632 160 160 160s160-71.632 160-160s-71.632-160-160-160zm.002-639.999c53.008 0 96 42.992 96 96s-42.992 96-96 96s-96-42.992-96-96s42.992-96 96-96zm-704 544c-53.024 0-96-42.992-96-96s42.976-96 96-96c53.008 0 96 42.992 96 96s-42.992 96-96 96zm704 352c-53.008 0-96-42.992-96-96s42.992-96 96-96s96 42.992 96 96s-42.992 96-96 96z"/>',
14       },
15     },
16     width: 1024,
17     height: 1024,
18   });
19 
20   // https://api.iconify.design/simple-line-icons.json?icons=share
21 </script>
22 
23 <Icon icon="simple-line-icons:share" {ariaHidden} aria-label={label} color={colour} {width} />

  

💯 Svelte Share Buttons: Test #

You should now be able to see the share buttons if you open any of the blog posts in a browser. To test on desktop, at the time of writing the WebShare API was not supported on Firefox and Chrome, so these are good for testing the fallback buttons. Safari on desktop does support the Web Share API, so is fantastic for testing that button. Also, try deploying your app to a staging environment to test a few mobile browsers.

🙌🏽 Svelte Share Buttons: Wrapup #

In this post we looked at:

• how to add share buttons to a Svelte app with progressive enhancement,
• using the Web Share API to share from a Svelte app,
• adding fallback share icons with Iconify.

I do hope there is at least one thing in this article which you can use in your work or a side project. Also, let me know if you feel more explanation of the config is needed.

This post came from a request in a comment on another post, so do drop a comment below if there is something else you would like to see a video or post on.

You can see the full SvelteKit code for this project on the Rodney Lab Git Hub repo  . If you run into any issues, you can drop a comment below as well as reach out for a chat on Element  . Also, Twitter @mention  if you have suggestions for improvements or questions.

🏁 Svelte Share Buttons: Summary #

What is the Web Share API? #

The Web Share API offers a convenient way for web developers to allow site visitors to share text, URLs, and files. The API needs to be invoked via a user action, such a tapping a button. Once invoked, supporting browsers show a native dialogue allowing users to share using apps installed on their device. The developer needs no prior knowledge of which apps are available on the user device. The user experience is ideal, allowing them to share content with friends, family, and followers using their favourite apps and social networks.

Which browsers currently support the Web Share API? #

The Web Share API is supported on some, but not all browsers. Mobile browsers tend to have more favourable support. Safari on iOS and Chrome, Firefox and Opera on Android all support it. On top, Safari and Opera offer full desktop support, while Chrome and Edge have partial support. That’s for sharing URLs. Firefox for Android does not support file sharing via the Web Share API at the time of writing, and only Safari offers full desktop support.

How can you add the Web Share API with Progressive Enhancement? #

To provide the best overall experience for all users, it is worth adding JavaScript based share buttons (without use of the Web Share API) as a base case. These buttons need to make use of the social networks’ own APIs. To offer an enhanced experience to users with devices which support the API, add a check for support and only show the corresponding share button where it is supported. While a single share button may suffice when the Web Share API is supported, buttons for multiple popular networks invoking that network’s own API are needed in the fallback.

🙏🏽 Feedback #

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention, so I can see what you did. Finally, be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Rodney

@askRodney

Just dropped a new post taking you through how to roll-your-own sharing in your ❤️ Svelte app with Web Share API support as a progressive enhancement.

Includes fallbacks for the Facebook, Telegram, Twitter & WhatsApp share APIs.

Hope you find it useful!

https://t.co/5eZGjznGoB

— Rodney (@askRodney) April 8, 2022

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram  . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.