Update README and docs to include new buttons

pull/12/head
Nikita Karamov 2020-07-04 22:53:53 +02:00
parent c6baa8f79e
commit 9a932f2fd8
No known key found for this signature in database
GPG Key ID: E40DFE6E993540FF
3 changed files with 21 additions and 5 deletions

View File

@ -8,7 +8,7 @@ Lightweight, stylish and ethical share buttons.
- **Stylish.** Uses official vector logos and colors with no visual mess. - **Stylish.** Uses official vector logos and colors with no visual mess.
- **Ethical.** Embeds no tracking code. JS is required only for the setup. - **Ethical.** Embeds no tracking code. JS is required only for the setup.
<img src="https://raw.githubusercontent.com/NickKaramoff/shareon/master/docs/screen01@2x.png" height="100" width="570" alt="shareon example"> <img src="https://raw.githubusercontent.com/NickKaramoff/shareon/master/docs/screen01@2x.png" height="114" width="715" alt="shareon example">
---- ----
Observe the live demo here: [shareon.js.org](https://shareon.js.org) Observe the live demo here: [shareon.js.org](https://shareon.js.org)
@ -45,11 +45,15 @@ classes match the names of social networks:
```html ```html
<div class="shareon"> <div class="shareon">
<a class="facebook"></a> <a class="facebook"></a>
<a class="linkedin"></a>
<a class="messenger"></a> <a class="messenger"></a>
<a class="odnoklassniki"></a> <a class="odnoklassniki"></a>
<a class="pinterest"></a> <a class="pinterest"></a>
<a class="pocket"></a>
<button class="reddit"></button>
<button class="telegram"></button> <button class="telegram"></button>
<button class="twitter"></button> <button class="twitter"></button>
<button class="viber"></button>
<button class="vkontakte"></button> <button class="vkontakte"></button>
<button class="whatsapp"></button> <button class="whatsapp"></button>
</div> </div>
@ -71,8 +75,8 @@ on the whole container or on the specific buttons:
Apart from the URL and title, some networks support extra parameters: Apart from the URL and title, some networks support extra parameters:
- add `data-media` to an Odnoklassniki, Pinterest or VK button to customize the pinned picture - add `data-media` to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture
- add `data-text` to a WhatsApp or Telegram button to add custom message text - add `data-text` to a WhatsApp, Telegram or Viber button to add custom message text
- add `data-via` to a Twitter button to mention a user - add `data-via` to a Twitter button to mention a user
Here are all the custom parameters in their glory: Here are all the custom parameters in their glory:

View File

@ -63,11 +63,15 @@
<div class="shareon" data-title="shareon — lightweight, stylish and ethical share buttons" <div class="shareon" data-title="shareon — lightweight, stylish and ethical share buttons"
style="text-align: center"> style="text-align: center">
<a class="facebook"></a> <a class="facebook"></a>
<a class="linkedin"></a>
<a class="messenger"></a> <a class="messenger"></a>
<a class="odnoklassniki"></a> <a class="odnoklassniki"></a>
<a class="pinterest"></a> <a class="pinterest"></a>
<a class="pocket"></a>
<a class="reddit"></a>
<a class="telegram"></a> <a class="telegram"></a>
<a class="twitter"></a> <a class="twitter"></a>
<a class="viber"></a>
<a class="vkontakte"></a> <a class="vkontakte"></a>
<a class="whatsapp"></a> <a class="whatsapp"></a>
</div> </div>
@ -131,21 +135,29 @@
<pre><code>&lt;div class="shareon"&gt; <pre><code>&lt;div class="shareon"&gt;
&lt;a class="facebook"&gt;&lt;/a&gt; &lt;a class="facebook"&gt;&lt;/a&gt;
&lt;a class="linkedin"&gt;&lt;/a&gt;
&lt;a class="messenger"&gt;&lt;/a&gt; &lt;a class="messenger"&gt;&lt;/a&gt;
&lt;a class="odnoklassniki"&gt;&lt;/a&gt; &lt;a class="odnoklassniki"&gt;&lt;/a&gt;
&lt;a class="pinterest"&gt;&lt;/a&gt; &lt;a class="pinterest"&gt;&lt;/a&gt;
&lt;a class="pocket"&gt;&lt;/a&gt;
&lt;button class="reddit"&gt;&lt;/button&gt;
&lt;button class="telegram"&gt;&lt;/button&gt; &lt;button class="telegram"&gt;&lt;/button&gt;
&lt;button class="twitter"&gt;&lt;/button&gt; &lt;button class="twitter"&gt;&lt;/button&gt;
&lt;button class="viber"&gt;&lt;/button&gt;
&lt;button class="vkontakte"&gt;&lt;/button&gt; &lt;button class="vkontakte"&gt;&lt;/button&gt;
&lt;button class="whatsapp"&gt;&lt;/button&gt; &lt;button class="whatsapp"&gt;&lt;/button&gt;
&lt;/div&gt;</code></pre> &lt;/div&gt;</code></pre>
<div class="shareon"> <div class="shareon">
<a class="facebook"></a> <a class="facebook"></a>
<a class="linkedin"></a>
<a class="messenger"></a> <a class="messenger"></a>
<a class="odnoklassniki"></a> <a class="odnoklassniki"></a>
<a class="pinterest"></a> <a class="pinterest"></a>
<a class="pocket"></a>
<button class="reddit"></button>
<button class="telegram"></button> <button class="telegram"></button>
<button class="twitter"></button> <button class="twitter"></button>
<button class="viber"></button>
<button class="vkontakte"></button> <button class="vkontakte"></button>
<button class="whatsapp"></button> <button class="whatsapp"></button>
</div> </div>
@ -178,8 +190,8 @@
</p> </p>
<ul> <ul>
<li>add <code>data-media</code> to an Odnoklassniki, Pinterest or VK button to customize the pinned picture</li> <li>add <code>data-media</code> to an Odnoklassniki, Pinterest, or VK button to customize the pinned picture</li>
<li>add <code>data-text</code> to a WhatsApp or Telegram button to add custom message text</li> <li>add <code>data-text</code> to a WhatsApp, Telegram, or Viber button to add custom message text</li>
<li>add <code>data-via</code> to a Twitter button to mention a user</li> <li>add <code>data-via</code> to a Twitter button to mention a user</li>
</ul> </ul>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 14 KiB