shareon

+ + 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 +

+ + + +

+ 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="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>
+    <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: +

+ +

you have to add data-fb-app-id to the FB Messenger button to make sharing even possible
add data-media to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture
add data-text to a WhatsApp, Mastodon, Telegram, or Viber button to add custom message text
add data-via to a Twitter or Mastodon 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-fb-app-id="0123456789012345"></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-via="@MyNickname@myserver.social"></a>
+    <a class="whatsapp" data-url="https://my-cool-website.com">Send</a>
+</div>

+ + + Pin + + + + Send +

+ +