From edfcd9dc3cf4c6c75c02590e741668d74f00b71f Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Thu, 26 Mar 2020 01:43:21 +0100 Subject: [PATCH] Update website --- docs/index.html | 152 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 150 insertions(+), 2 deletions(-) diff --git a/docs/index.html b/docs/index.html index 50371f0..9deafab 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,6 +9,12 @@ shareon + + @@ -43,12 +49,154 @@

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

+ + +
+

+ + 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 use it in a JS file that you will later bundle:

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

+ + + +

+ 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>
+
+ + + Pin + + + Send +
+
+ + + - \ No newline at end of file +