- shareon are share buttons for popular social networks.
-
+
Shareon are share buttons for popular social networks.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- Unlike many other share buttons, shareon are:
-
+
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
-
+
+
+ lightweight, clocking in at only 6 KB gzipped code (JS+CSS),
+
+
+ stylish, using official vector logos and colours with no
+ visual mess, and
+
+
+ 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!
-
-
+
+ The whole JavaScript code is quick and simple: it only populates the
+ buttons with share links. This makes 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:
-
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';
-
+
+
or install it via NPM and bundle it in a JS file:
+
import * as Shareon from "shareon";
+import "shareon/css";
-
-
-
- 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.init();
+
-
// shareon auto-initializes
+
+
+
+ Usage
+
-window.title = "Cool new window title";
-shareon();
+
+ Create a container with class shareon and populate it
+ with elements, class names of which match the names of the social
+ networks:
+
-
- 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
-
-
-
-
-
- Create a container with class shareon and populate it with elements, whose classes match
- the
- names of social networks:
-
- 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.
-
+
+ You can customize the shared URL and page title with
+ data- attributes:
+
-
- 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:
-
- 
+