Update README and docs to include new buttons
parent
c6baa8f79e
commit
9a932f2fd8
10
README.md
10
README.md
|
@ -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:
|
||||||
|
|
|
@ -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><div class="shareon">
|
<pre><code><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></code></pre>
|
</div></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 |
Loading…
Reference in New Issue