Update website
Nikita Karamov
parent
4e9aec2a27
commit
edfcd9dc3c
152
docs/index.html
152
docs/index.html
|
|
@ -9,6 +9,12 @@
|
||||||
|
|
||||||
<title>shareon</title>
|
<title>shareon</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.shareon > a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://igoradamenko.github.io/awsm.css/css/awsm.min.css">
|
<link rel="stylesheet" href="https://igoradamenko.github.io/awsm.css/css/awsm.min.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -43,12 +49,154 @@
|
||||||
<p>
|
<p>
|
||||||
<code>shareon</code> are share buttons for popular social networks.
|
<code>shareon</code> are share buttons for popular social networks.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<div class="shareon" data-title="shareon — lightweight, stylish and ethical share buttons"
|
||||||
|
style="text-align: center">
|
||||||
|
<a class="facebook"></a>
|
||||||
|
<a class="messenger"></a>
|
||||||
|
<a class="pinterest"></a>
|
||||||
|
<a class="telegram"></a>
|
||||||
|
<a class="twitter"></a>
|
||||||
|
<a class="whatsapp"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Unlike many other share buttons, <code>shareon</code> are:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><b>lightweight</b>, clocking in at only 3.15 KB gzipped code (JS+CSS)</li>
|
||||||
|
<li><b>stylish</b>, by having no visual features other than official colors and logos</li>
|
||||||
|
<li><b>ethical</b>, since they do not insert any pesky tracking code</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
The whole JavaScript code is quick and simple: it only populates the buttons with set up links. The
|
||||||
|
speed
|
||||||
|
and easy customization make <code>shareon</code> the perfect choice for your blog, news site or project
|
||||||
|
page!
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>
|
||||||
|
<a id="install" href="#install" aria-hidden="true"></a>
|
||||||
|
Install
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
Include the link to shareon's JS and CSS in your website:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<pre><code><link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
|
||||||
|
rel="stylesheet">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js"
|
||||||
|
type="text/javascript"></script></code></pre>
|
||||||
|
|
||||||
|
<p>or install it via NPM use it in a JS file that you will later bundle:</p>
|
||||||
|
<pre><code>require('shareon');</code></pre>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h2>
|
||||||
|
<a id="usage" href="#usage" aria-hidden="true"></a>
|
||||||
|
Usage
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<aside>
|
||||||
|
<p>
|
||||||
|
<code>shareon</code> was heavily inspired by
|
||||||
|
<a href="https://ilyabirman.net/projects/likely/">Likely</a>,
|
||||||
|
and has a backwards-compatible API
|
||||||
|
</p>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Create a container with class <code>shareon</code> and populate it with elements, whose classes match
|
||||||
|
the
|
||||||
|
names of social networks:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<pre><code><div class="shareon">
|
||||||
|
<a class="facebook"></a>
|
||||||
|
<a class="messenger"></a>
|
||||||
|
<a class="pinterest"></a>
|
||||||
|
<a class="telegram"></a>
|
||||||
|
<a class="twitter"></a>
|
||||||
|
<a class="whatsapp"></a>
|
||||||
|
</div></code></pre>
|
||||||
|
<div class="shareon">
|
||||||
|
<a class="facebook"></a>
|
||||||
|
<a class="messenger"></a>
|
||||||
|
<a class="pinterest"></a>
|
||||||
|
<a class="telegram"></a>
|
||||||
|
<a class="twitter"></a>
|
||||||
|
<a class="whatsapp"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
If you use <code><a></code>, the buttons will get a `href`-attribute to them. In other cases they
|
||||||
|
will get a listener on <code>click</code> event, so you can use <code><button></code>s if you
|
||||||
|
wish.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
By default the URL and the title of the page will be used in sharing dialogs. To change this, you can
|
||||||
|
use
|
||||||
|
the <code>data-url</code> and <code>data-title</code> attributes. Use them on the whole container or on
|
||||||
|
the specific buttons:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<pre><code><div class="shareon" data-url="https://example.com">
|
||||||
|
<a class="facebook" data-title="Custom Facebook title"></a>
|
||||||
|
<a class="twitter" data-title="Custom Twitter title"></a>
|
||||||
|
</div></code></pre>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Apart from the URL and title, some networks support extra parameters:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>add <code>data-media</code> to a Pinterest button to customize the pinned picture</li>
|
||||||
|
<li>add <code>data-text</code> to a WhatsApp or Telegram button to add custom message text</li>
|
||||||
|
<li>add <code>data-via</code> to a Twitter button to mention a user</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Here are all the custom parameters in their glory:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<pre><code><div class="shareon" data-url="https://example.com/custom-url">
|
||||||
|
<a class="facebook" data-title="Custom Facebook title"></a>
|
||||||
|
<a class="messenger" data-url="https://my-cool-website.com"></a>
|
||||||
|
<a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
|
||||||
|
<a class="telegram" data-text="Check this out!"></a>
|
||||||
|
<a class="twitter" data-via="MyNickname"></a>
|
||||||
|
<a class="whatsapp">Send</a>
|
||||||
|
</div></code></pre>
|
||||||
|
<div class="shareon" data-url="https://example.com/custom-url">
|
||||||
|
<a class="facebook" data-title="Custom Facebook title"></a>
|
||||||
|
<a class="messenger" data-url="https://my-cool-website.com"></a>
|
||||||
|
<a class="pinterest" data-media="https://picsum.photos/500">Pin</a>
|
||||||
|
<a class="telegram" data-text="Check this out!"></a>
|
||||||
|
<a class="twitter" data-via="MyNickname"></a>
|
||||||
|
<a class="whatsapp">Send</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>by <a href="https://karamoff.dev" target="_blank">Nikita Karamov</a></p>
|
<p>by <a href="https://karamoff.dev" target="_blank">Nikita Karamov</a></p>
|
||||||
<p>Website built with <a href="https://igoradamenko.github.io/awsm.css/index.html" target="_blank">awsm.css</a></p>
|
<p>Website built with <a href="https://igoradamenko.github.io/awsm.css/index.html" target="_blank">awsm.css</a>
|
||||||
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/shareon@1.0.0-beta.3/dist/shareon.min.css" rel="stylesheet">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/shareon@1.0.0-beta.3/dist/shareon.min.js" type="text/javascript"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue