Add Mastodon button using NickKaramoff's toot.karamoff.dev

README.md

@@ -87,6 +87,7 @@ classes match the names of social networks:
 <div class="shareon">
     <a class="facebook"></a>
     <a class="linkedin"></a>
+    <a class="mastodon"></a>
     <a class="messenger"></a>
     <a class="odnoklassniki"></a>
     <a class="pinterest"></a>
@@ -117,8 +118,8 @@ on the whole container or on the specific buttons:
 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-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-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
 
 Here are all the custom parameters in their glory:
 
@@ -129,6 +130,14 @@ Here are all the custom parameters in their glory:
     <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-text="Check this out!" data-via="@MyNickname@myserver.social"></a>
     <a class="whatsapp">Send</a>
 </div>
 ```
+
+## Copyright
+
+Includes a modified version of the
+[Mastodon logo](https://commons.wikimedia.org/wiki/File:Mastodon_Logotype_%28Simple%29.svg),
+which is licensed under the
+[APGLv3 license](https://www.gnu.org/licenses/agpl.html) or later.

docs/index.html

@@ -68,6 +68,7 @@ <h2>
                  style="text-align: center">
                 <a class="facebook"></a>
                 <a class="linkedin"></a>
+                <a class="mastodon"></a>
                 <a class="messenger"></a>
                 <a class="odnoklassniki"></a>
                 <a class="pinterest"></a>
@@ -186,6 +187,7 @@ <h2>
             <pre><code>&lt;div class="shareon"&gt;
     &lt;a class="facebook"&gt;&lt;/a&gt;
     &lt;a class="linkedin"&gt;&lt;/a&gt;
+    &lt;a class="mastodon"&gt;&lt;/a&gt;
     &lt;a class="messenger"&gt;&lt;/a&gt;
     &lt;a class="odnoklassniki"&gt;&lt;/a&gt;
     &lt;a class="pinterest"&gt;&lt;/a&gt;
@@ -200,6 +202,7 @@ <h2>
             <div class="shareon">
                 <a class="facebook"></a>
                 <a class="linkedin"></a>
+                <a class="mastodon"></a>
                 <a class="messenger"></a>
                 <a class="odnoklassniki"></a>
                 <a class="pinterest"></a>
@@ -241,8 +244,8 @@ <h2>
 
             <ul>
                 <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, 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-text</code> to a WhatsApp, Mastodon, Telegram, or Viber button to add custom message text</li>
+                <li>add <code>data-via</code> to a Twitter or Mastodon button to mention a user</li>
             </ul>
 
             <p>
@@ -255,6 +258,7 @@ <h2>
     &lt;a class="pinterest" data-media="https://picsum.photos/500"&gt;Pin&lt;/a&gt;
     &lt;a class="telegram" data-text="Check this out!"&gt;&lt;/a&gt;
     &lt;a class="twitter" data-via="MyNickname"&gt;&lt;/a&gt;
+    &lt;a class="mastodon" data-text="Check this out!" data-via="@MyNickname@myserver.social"&gt;&lt;/a&gt;
     &lt;a class="whatsapp"&gt;Send&lt;/a&gt;
 &lt;/div></code></pre>
             <div class="shareon" data-url="https://example.com/custom-url">
@@ -263,6 +267,7 @@ <h2>
                 <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-text="Check this out!" data-via="@MyNickname@myserver.social"></a>
                 <a class="whatsapp">Send</a>
             </div>