145 lines
5.4 KiB
HTML
145 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Lightweight, stylish and ethical share buttons for popular social networks">
|
||
<meta name="keywords" content="share buttons, sharing, social networks, share via, share on">
|
||
<meta name="author" content="Nikita Karamov">
|
||
|
||
<title>shareon – Lightweight, stylish and ethical share buttons</title>
|
||
|
||
<meta property="og:title" content="shareon">
|
||
<meta property="og:url" content="https://shareon.js.org">
|
||
<meta property="og:image" content="https://raw.githubusercontent.com/NickKaramoff/shareon/main/assets/banner.png">
|
||
<meta property="og:description" content="Lightweight, stylish and ethical share buttons for popular social networks">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:creator" content="@NickKaramoff">
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/modern-normalize@1.1.0,npm/simpledotcss@1.0.1,npm/shareon@1.6.2/dist/shareon.min.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/shareon@1.6.2/dist/shareon.min.js" defer></script>
|
||
|
||
<link rel="icon" href="/favicon.ico">
|
||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||
<link rel="manifest" href="/site.webmanifest">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>shareon 📯</h1>
|
||
<p>Lightweight, stylish and ethical share buttons</p>
|
||
<nav>
|
||
<a href="https://www.npmjs.com/package/shareon" target="_blank">
|
||
npm
|
||
</a>
|
||
<a href="https://github.com/NickKaramoff/shareon" target="_blank">
|
||
GitHub
|
||
</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<section>
|
||
<p>
|
||
shareon are share buttons for popular social networks.
|
||
</p>
|
||
|
||
<div class="shareon"
|
||
data-title="shareon — lightweight, stylish and ethical share buttons"
|
||
style="text-align: center">
|
||
<a class="facebook">Share</a>
|
||
<a class="linkedin"></a>
|
||
<a class="mastodon" data-via="@NickKaramoff@fosstodon.org">Toot</a>
|
||
<a class="messenger" data-fb-app-id="3619024578167617"></a>
|
||
<a class="odnoklassniki"></a>
|
||
<a class="pinterest">Pin</a>
|
||
<br>
|
||
<a class="pocket"></a>
|
||
<a class="reddit"></a>
|
||
<a class="telegram"></a>
|
||
<a class="twitter" data-via="NickKaramoff"></a>
|
||
<a class="viber"></a>
|
||
<a class="vkontakte">Отправить</a>
|
||
<a class="whatsapp"></a>
|
||
</div>
|
||
|
||
<p>
|
||
Unlike many other share buttons, shareon are:
|
||
</p>
|
||
|
||
<ul>
|
||
<li><b>lightweight</b>, clocking in at around 7 KB gzipped</li>
|
||
<li><b>stylish</b>, by having no visual features other than official colours and logos</li>
|
||
<li><b>ethical</b>, since they do not insert any pesky tracking code</li>
|
||
</ul>
|
||
|
||
<p>
|
||
Upon initialization, shareon just populates the buttons with generated URLS. The speed and easy customization make shareon the perfect choice for your blog, news site, or project page!
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>Get started</h2>
|
||
<ol>
|
||
<li>
|
||
Include the links to shareon's JS and CSS in your website:
|
||
|
||
<pre><code><link href="https://cdn.jsdelivr.net/npm/shareon@2/shareon.css"
|
||
rel="stylesheet">
|
||
<script type="module"
|
||
src="https://cdn.jsdelivr.net/npm/shareon@2"></script></code></pre>
|
||
</li>
|
||
<li>
|
||
Create a container with class <code>shareon</code> and populate it with elements, whose classes match the names of the social networks:
|
||
|
||
<pre><code><div class="shareon">
|
||
<a class="facebook"></a>
|
||
<a class="linkedin"></a>
|
||
<a class="mastodon"></a>
|
||
<!-- FB App ID is required for the Messenger button to function -->
|
||
<a class="messenger" data-fb-app-id="0123456789012345"></a>
|
||
<a class="odnoklassniki"></a>
|
||
<a class="pinterest"></a>
|
||
<a class="pocket"></a>
|
||
<a class="reddit"></a>
|
||
<a class="telegram"></a>
|
||
<a class="twitter"></a>
|
||
<a class="viber"></a>
|
||
<a class="vkontakte"></a>
|
||
<a class="whatsapp"></a>
|
||
</div></code></pre>
|
||
</li>
|
||
<li>
|
||
Refine your buttons with extra parameters:
|
||
|
||
<ul>
|
||
<li>add <code>data-url</code> to any button to change the shared URL</li>
|
||
<li>add <code>data-title</code> to any button to change the shared title</li>
|
||
<li>you <strong>MUST</strong> add <code>data-fb-app-id</code> to the FB Messenger button to make sharing even possible</li>
|
||
<li>add <code>data-media</code> to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture</li>
|
||
<li>add <code>data-text</code> to a WhatsApp, Mastodon, Telegram, or Viber button to add custom message text</li>
|
||
<li>add <code>data-via</code> to a Twitter or Mastodon button to mention a user</li>
|
||
</ul>
|
||
|
||
Use extra parameters on the whole container or on the specific buttons:
|
||
|
||
<pre><code><div class="shareon" data-url="https://example.com">
|
||
<a class="whatsapp" data-title="Custom WhatsApp title"></a>
|
||
<a class="twitter" data-title="Custom Twitter title"></a>
|
||
</div></code></pre>
|
||
</li>
|
||
<li>
|
||
Go to the <a href="https://github.com/NickKaramoff/shareon#readme">GitHub repo</a> for more detailed documentation!
|
||
</li>
|
||
</ol>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>
|
||
shareon was created by <a href="https://karamoff.dev/" target="_blank">Nikita Karamov</a> and is licenced under BSD-3-Clause
|
||
</p>
|
||
</footer>
|
||
</body>
|
||
</html>
|