shareon
source link: https://shareon.js.org/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
shareon
shareon
Lightweight, stylish and ethical share buttons
What is it?
shareon
are share buttons for popular social networks.
Unlike many other share buttons, shareon
are:
- lightweight, clocking in at only 6 KB gzipped code (JS+CSS)
- stylish, by having no visual features other than official colors and logos
- ethical, since they do not insert any pesky tracking code
The whole JavaScript code is quick and simple: it only populates the buttons with set up links. The
speed
and easy customization make shareon
the perfect choice for your blog, news site or project
page!
Install
Include the link to shareon's JS and CSS in your website:
<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>
or install it via NPM and use it in a JS file that you will later bundle:
const shareon = require('shareon');
import shareon from 'shareon';
Initialization
By default, shareon will initialize every button after page load.
It also exports the shareon
function, that will let
you repopulate your buttons with updated information (for example,
if you changed the page title):
// shareon auto-initializes
window.title = "Cool new window title";
shareon();
If you want to postpone the initialization, you can import the
noinit
-version of the package. You'll need to
manually call the shareon
function when you want the
buttons to be initialized:
<!-- notice the 'noinit' section of the url for JS -->
<script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/noinit/shareon.min.js"
type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.css"
rel="stylesheet">
<script type="text/javascript">
// do something important
shareon();
</script>
or, if you're using Node:
const shareon = require('shareon');
// or
import shareon from 'shareon';
// do something important
shareon();
Usage
shareon
was heavily inspired by
Likely,
and has a backwards-compatible API
Create a container with class shareon
and populate it with elements, whose classes match
the
names of social networks:
<div class="shareon">
<a class="facebook"></a>
<a class="linkedin"></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>
If you use <a>
, the buttons will get a `href`-attribute to them. In other cases they
will get a listener on click
event, so you can use <button>
s if you
wish.
By default, the URL and the title of the page will be used in sharing dialogs. To change this, you can
use
the data-url
and data-title
attributes. Use them on the whole container or on
the specific buttons:
<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>
Apart from the URL and title, some networks support extra parameters:
- add
data-media
to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture - add
data-text
to a WhatsApp, Telegram, or Viber button to add custom message text - add
data-via
to a Twitter button to mention a user
Here are all the custom parameters in their glory:
<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>
Website built with awsm.css
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK