shareon are share buttons for popular social networks.
+ Unlike many other share buttons, shareon are:
+
+ 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!
+
+ 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 use it in a JS file that you will later bundle:
+require('shareon');
+ 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="messenger"></a>
+ <a class="pinterest"></a>
+ <a class="telegram"></a>
+ <a class="twitter"></a>
+ <a class="whatsapp"></a>
+</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="facebook" data-title="Custom Facebook title"></a>
+ <a class="twitter" data-title="Custom Twitter title"></a>
+</div>+ Apart from the URL and title, some networks support extra parameters: +
+ +data-media to a Pinterest button to customize the pinned picturedata-text to a WhatsApp or Telegram button to add custom message textdata-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>