Add usage instructions to README

README.md

@@ -34,11 +34,44 @@ yarn add shareon
 require('shareon');
 ```
 
-<img src="https://raw.githubusercontent.com/NickKaramoff/shareon/develop/docs/screen01.png" height="60" alt="shareon example">
+## Usage
+
+Create a container with class `shareon` and populate it with elements, whose
+classes match the names of social networks:
 
 ```html
 <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>
+```
+
+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
+<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:
+
+- 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
+<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>