Mastodon
/
shareon-pulsanti-condivisione-social
mirror of https://github.com/NickKaramoff/shareon
1
0
Fork 0
Code Issues Releases Wiki Activity

Deploy to GitHub pages

This commit is contained in:
github-actions[bot] 2020-09-24 18:24:16 +00:00 committed by GitHub
commit 7d328dac30
11 changed files with 299 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
.nojekyll Normal file
View File

1
CNAME Normal file
View File

@ -0,0 +1 @@
shareon.js.org

BIN
banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 354 B

BIN
favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 682 B

BIN
favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

1
google1b3b138126470b07.html Normal file
View File

@ -0,0 +1 @@
google-site-verification: google1b3b138126470b07.html

286
index.html Normal file
View File

@ -0,0 +1,286 @@
<!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">
<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/develop/docs/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">
<title>shareon</title>
<link rel="stylesheet" href="https://igoradamenko.github.io/awsm.css/css/awsm.min.css">
<style>
.shareon > a:hover {
color: #fff;
}
button:not([disabled]):hover {
border: none;
}
</style>
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
</head>
<body>
<header>
<p>
<img src="https://raw.githubusercontent.com/googlefonts/noto-emoji/master/png/128/emoji_u1f4ef.png"
alt="Postal Horn emoji"
width="64"
height="64">
</p>
<h1>shareon</h1>
<p>Lightweight, stylish and ethical share buttons</p>
<nav>
<ul>
<li>
<a href="https://www.npmjs.com/package/shareon" target="_blank">npm</a>
</li>
<li>
<a href="https://github.com/NickKaramoff/shareon" target="_blank">github</a>
</li>
</ul>
</nav>
</header>
<main>
<article>
<h2>
<a id="what-is-it" href="#what-is-it" aria-hidden="true"></a>
What is it?
</h2>
<p>
<code>shareon</code> 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"></a>
<a class="linkedin"></a>
<a class="mastodon"></a>
<a class="messenger"></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>
<p>
Unlike many other share buttons, <code>shareon</code> are:
</p>
<ul>
<li><b>lightweight</b>, clocking in at only 6 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>&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
rel="stylesheet"&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js"
type="text/javascript"&gt;&lt;/script&gt;</code></pre>
<p>or install it via NPM and use it in a JS file that you will later bundle:</p>
<pre><code>const shareon = require('shareon');</code></pre>
<pre><code>import shareon from 'shareon';</code></pre>
</article>
<article>
<h2>
<a id="initialization" href="#initialization" aria-hidden="true"></a>
Initialization
</h2>
<p>
By default, shareon will initialize every button after page load.
It also exports the <code>shareon</code> function, that will let
you repopulate your buttons with updated information (for example,
if you changed the page title):
</p>
<pre><code>// shareon auto-initializes
window.title = "Cool new window title";
shareon();</code></pre>
<p>
If you want to postpone the initialization, you can import the
<code>noinit</code>-version of the package. You'll need to
manually call the <code>shareon</code> function when you want the
buttons to be initialized:
</p>
<pre><code>&lt;!-- notice the 'noinit' section of the url for JS --&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/noinit/shareon.min.js"
type="text/javascript"&gt;&lt;/script&gt;
&lt;link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
rel="stylesheet"&gt;
&lt;script type="text/javascript"&gt;
// do something important
shareon();
&lt;/script&gt;</code></pre>
<p>
or, if you're using Node:
</p>
<pre><code>const shareon = require('shareon');
// or
import shareon from 'shareon';
// do something important
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>&lt;div class="shareon"&gt;
&lt;a class="facebook"&gt;&lt;/a&gt;
&lt;a class="linkedin"&gt;&lt;/a&gt;
&lt;a class="mastodon"&gt;&lt;/a&gt;
&lt;a class="messenger"&gt;&lt;/a&gt;
&lt;a class="odnoklassniki"&gt;&lt;/a&gt;
&lt;a class="pinterest"&gt;&lt;/a&gt;
&lt;a class="pocket"&gt;&lt;/a&gt;
&lt;button class="reddit"&gt;&lt;/button&gt;
&lt;button class="telegram"&gt;&lt;/button&gt;
&lt;button class="twitter"&gt;&lt;/button&gt;
&lt;button class="viber"&gt;&lt;/button&gt;
&lt;button class="vkontakte"&gt;&lt;/button&gt;
&lt;button class="whatsapp"&gt;&lt;/button&gt;
&lt;/div&gt;</code></pre>
<div class="shareon">
<a class="facebook"></a>
<a class="linkedin"></a>
<a class="mastodon"></a>
<a class="messenger"></a>
<a class="odnoklassniki"></a>
<a class="pinterest"></a>
<a class="pocket"></a>
<button class="reddit"></button>
<button class="telegram"></button>
<button class="twitter"></button>
<button class="viber"></button>
<button class="vkontakte"></button>
<button class="whatsapp"></button>
</div>
<p>
If you use <code>&lt;a&gt;</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>&lt;button&gt;</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>&lt;div class="shareon" data-url="https://example.com"&gt;
&lt;a class="whatsapp" data-title="Custom WhatsApp title"&gt;&lt;/a&gt;
&lt;a class="twitter" data-title="Custom Twitter title"&gt;&lt;/a&gt;
&lt;/div&gt;</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 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>
<p>
Here are all the custom parameters in their glory:
</p>
<pre><code>&lt;div class="shareon" data-url="https://example.com/custom-url"&gt;
&lt;a class="facebook" data-title="Custom Facebook title"&gt;&lt;/a&gt;
&lt;a class="messenger" data-url="https://my-cool-website.com"&gt;&lt;/a&gt;
&lt;a class="pinterest" data-media="https://picsum.photos/500"&gt;Pin&lt;/a&gt;
&lt;a class="telegram" data-text="Check this out!"&gt;&lt;/a&gt;
&lt;a class="twitter" data-via="MyNickname"&gt;&lt;/a&gt;
&lt;a class="mastodon" data-text="Check this out!" data-via="@MyNickname@myserver.social"&gt;&lt;/a&gt;
&lt;a class="whatsapp"&gt;Send&lt;/a&gt;
&lt;/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="mastodon" data-text="Check this out!" data-via="@MyNickname@myserver.social"></a>
<a class="whatsapp">Send</a>
</div>
</article>
</main>
<footer>
<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>
</footer>
<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>
</body>
</html>

BIN
screen01@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

5
shareon.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
shareon.min.js vendored Normal file
View File

@ -0,0 +1,6 @@
/*!
* shareon v1.5.0 by Nikita Karamov
* https://shareon.js.org
*/
var shareon=function(){"use strict";var t={facebook:function(t){return"https://www.facebook.com/sharer/sharer.php?u="+t.url},linkedin:function(t){return"https://www.linkedin.com/shareArticle?mini=true&url="+t.url+"&title="+t.title},mastodon:function(t){return"https://toot.karamoff.dev/?text="+t.title+"%0D%0A"+t.url+(t.text?"%0D%0A%0D%0A"+t.text:"")+(t.via?"%0D%0A%0D%0A"+t.via:"")},messenger:function(t){return"https://www.facebook.com/dialog/send?app_id=3619024578167617&link="+t.url+"&redirect_uri="+t.url},odnoklassniki:function(t){return"https://connect.ok.ru/offer?url="+t.url+"&title="+t.title+(t.media?"&imageUrl="+t.media:"")},pinterest:function(t){return"https://pinterest.com/pin/create/button/?url="+t.url+"&description="+t.title+(t.media?"&media="+t.media:"")},pocket:function(t){return"https://getpocket.com/edit.php?url="+t.url},reddit:function(t){return"https://www.reddit.com/submit?title="+t.title+"&url="+t.url},telegram:function(t){return"https://telegram.me/share/url?url="+t.url+(t.text?"&text="+t.text:"")},twitter:function(t){return"https://twitter.com/intent/tweet?url="+t.url+"&text="+t.title+(t.via?"&via="+t.via:"")},viber:function(t){return"viber://forward?text="+t.title+"%0D%0A"+t.url+(t.text?"%0D%0A%0D%0A"+t.text:"")},vkontakte:function(t){return"https://vk.com/share.php?url="+t.url+"&title="+t.title+(t.media?"&image="+t.media:"")},whatsapp:function(t){return"https://wa.me/?text="+t.title+"%0D%0A"+t.url+(t.text?"%0D%0A%0D%0A"+t.text:"")}},e=function(){for(var e=document.getElementsByClassName("shareon"),r=0;r<e.length;r+=1)for(var n=e[r],i=0;i<n.children.length;i+=1){var o=n.children[i];if(o)for(var a=o.classList.length,u=0;u<a;u+=1){var l=o.classList.item(u);if(Object.prototype.hasOwnProperty.call(t,l)){var s={url:encodeURIComponent(o.dataset.url||n.dataset.url||window.location.href),title:encodeURIComponent(o.dataset.title||n.dataset.title||document.title),media:encodeURIComponent(o.dataset.media||n.dataset.media||""),text:encodeURIComponent(o.dataset.text||n.dataset.text||""),via:encodeURIComponent(o.dataset.via||n.dataset.via||"")},c=t[l](s);if("a"===o.tagName.toLowerCase())o.setAttribute("href",c),o.setAttribute("rel","noopener noreferrer"),o.setAttribute("target","_blank");else{o.addEventListener("click",function(t){return function(){window.open(t,"_blank","noopener,noreferrer")}}(c))}break}}}};return window.onload=function(){e()},e}();