From d6e160aa5c79d629dd17d4c072dcb09292ea7233 Mon Sep 17 00:00:00 2001 From: Nikita Karamov Date: Thu, 26 Mar 2020 00:44:31 +0100 Subject: [PATCH] Add usage instructions to README --- README.md | 35 ++++++++++++++++++++++++++++++++++- docs/screen01.png | Bin 6711 -> 0 bytes 2 files changed, 34 insertions(+), 1 deletion(-) delete mode 100644 docs/screen01.png diff --git a/README.md b/README.md index 27a96b9..fb4a97f 100644 --- a/README.md +++ b/README.md @@ -34,11 +34,44 @@ yarn add shareon require('shareon'); ``` -shareon example +## Usage + +Create a container with class `shareon` and populate it with elements, whose +classes match the names of social networks: ```html
+ + + + + +
+``` + +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 links: + +```html +
+ + +
+``` + +Apart from the URL and title, some networks support extra parameters: + +- add `data-via` to a Twitter button to mention a user +- add `data-text` to a WhatsApp or Telegram button to add custom message text +- add `data-media` to a Pinterest button to customize the pinned picture + +Here are all the custom parameters in their glory: + +```html +
+ Pin diff --git a/docs/screen01.png b/docs/screen01.png deleted file mode 100644 index 425f610c026bd46ae905da21105e1f99b51c8ab7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6711 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