Simple Svelte based share buttons component with no tracking. Based on HTML share buttons from https://github.com/mxstbr/sharingbuttons.io.
For Sapper you need to install the package as a dev module to so it gets compiled. If you install it as a runtiome dependency you will 500 errors on the server side. This is explained here.
$ npm i -D svelte-share-buttons-component
$ npm i --save svelte-share-buttons-component
https://svelte-share-buttons-component-demo.netlify.app/
A basic demo app can be found at https://github.com/pchynoweth/svelte-share-buttons-component/tree/master/demo.
Basic usage from svelte looks like this:
<script>
import { Email, HackerNews, Reddit, LinkedIn, Pinterest, Telegram, Tumblr, Vk, WhatsApp, Xing, Facebook, Twitter, Line } from 'svelte-share-buttons-component';
const url = 'https://pchynoweth.github.io/svelte-share-buttons-component/';
const title = 'Svelte Share Buttons Component';
const desc = 'Svelte based social media share buttons component with no tracking.';
</script>
<Email subject="{title}" body="{desc} {url}" />
<HackerNews class="share-button" {title} {url} />
<Reddit class="share-button" {title} {url} />
<LinkedIn class="share-button" {url} />
<Tumblr class="share-button" {title} {url} caption="{title}" />
<Pinterest class="share-button" {url} media="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/200px-Svelte_Logo.svg.png" description={title} />
<Telegram class="share-button" text={title} {url} />
<Vk class="share-button" {title} {url} />
<WhatsApp class="share-button" text="{title} {url}" />
<Xing class="share-button" {title} {url} />
<Facebook class="share-button" quote="{title}" {url} />
<Twitter class="share-button" text="{title}" {url} hashtags="github,svelte" via="username" related="other,users" />
<Line class="share-button" {url} />
- A media tag with a valid image url is required for pinterest.