diff --git a/docs/index.html b/docs/index.html index f8b9043..e45e48a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,292 +1,144 @@ - - - - + + + + - shareon – Lightweight, stylish and ethical share buttons + shareon – Lightweight, stylish and ethical share buttons - - - - - - + + + + + + - + + - - - + -
-

- shareon logo — the Postal Horn emoji -

-

shareon

-

Lightweight, stylish and ethical share buttons

- -
+
+

shareon 📯

+

Lightweight, stylish and ethical share buttons

+ +
-
-
-

- - What is it? -

+
+
+

+ shareon are share buttons for popular social networks. +

-

- shareon are share buttons for popular social networks. -

+
+ + + Toot + + + Pin +
+ + + + + + Отправить + +
-
- - - - - - - - - - - - - -
+

+ Unlike many other share buttons, shareon are: +

-

- Unlike many other share buttons, shareon are: -

+
    +
  • lightweight, clocking in at around 7 KB gzipped
    • +
  • stylish, by having no visual features other than official colours and logos
    • +
  • ethical, since they do not insert any pesky tracking code
    • +
-
    -
  • 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
    • -
+

+ Upon initialization, shareon just populates the buttons with generated URLS. 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 set up links. The - speed - and easy customization make shareon the perfect choice for your blog, news site or project - page! -

-
+
+

Get started

+
    +
  1. + Include the links to shareon's JS and CSS in your website: -
    -

    - - 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"
+					
    <link href="https://cdn.jsdelivr.net/npm/shareon@2/shareon.css"
       rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/shareon@1/dist/shareon.min.js"
-        type="text/javascript"></script>
    
+<script type="module"
+        src="https://cdn.jsdelivr.net/npm/shareon@2"></script>
    +
    2. +
  2. + Create a container with class shareon and populate it with elements, whose classes match the names of the social networks: -

    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 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>
+  <a class="reddit"></a>
+  <a class="telegram"></a>
+  <a class="twitter"></a>
+  <a class="viber"></a>
+  <a class="vkontakte"></a>
+  <a class="whatsapp"></a>
 </div>
    
-            
    
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-            
    
+
    3. +
  3. + Refine your buttons with extra parameters: -

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

    +
      +
    • add data-url to any button to change the shared URL
      • +
    • add data-title to any button to change the shared title
      • +
    • you MUST 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
      • +
    -

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

    + Use extra parameters 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 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>
    
+
    4. +
  4. + Go to the GitHub repo for more detailed documentation! +
    5. +
+
+
-
- - -
- -

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