Add OK

README.md

@@ -46,6 +46,7 @@ classes match the names of social networks:
 <div class="shareon">
     <a class="facebook"></a>
     <a class="messenger"></a>
+    <a class="odnoklassniki"></a>
     <a class="pinterest"></a>
     <a class="telegram"></a>
     <a class="twitter"></a>
@@ -70,7 +71,7 @@ on the whole container or on the specific buttons:
 
 Apart from the URL and title, some networks support extra parameters:
 
-- add `data-media` to a 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-via` to a Twitter button to mention a user
 

docs/index.html

@@ -64,6 +64,7 @@
                  style="text-align: center">
                 <a class="facebook"></a>
                 <a class="messenger"></a>
+                <a class="odnoklassniki"></a>
                 <a class="pinterest"></a>
                 <a class="telegram"></a>
                 <a class="twitter"></a>
@@ -130,6 +131,7 @@
             <pre><code>&lt;div class="shareon"&gt;
     &lt;a class="facebook"&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;
     &lt;a class="telegram"&gt;&lt;/a&gt;
     &lt;a class="twitter"&gt;&lt;/a&gt;
@@ -139,6 +141,7 @@
             <div class="shareon">
                 <a class="facebook"></a>
                 <a class="messenger"></a>
+                <a class="odnoklassniki"></a>
                 <a class="pinterest"></a>
                 <a class="telegram"></a>
                 <a class="twitter"></a>
@@ -174,7 +177,7 @@
             </p>
 
             <ul>
-                <li>add <code>data-media</code> to a Pinterest 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-via</code> to a Twitter button to mention a user</li>
             </ul>

src/index.ts

@@ -15,6 +15,7 @@ type UrlBuilder = (data: PublishPreset) => string;
 const NETWORKS: { [name: string]: UrlBuilder } = {
   facebook: (d) => `https://www.facebook.com/sharer/sharer.php?u=${d.url}`,
   messenger: (d) => `https://www.facebook.com/dialog/send?app_id=3619024578167617&link=${d.url}&redirect_uri=${d.url}`,
+  odnoklassniki: (d) => `https://connect.ok.ru/offer?url=${d.url}&title=${d.title}${d.extra.media ? `&imageUrl=${d.extra.media}` : ''}`,
   pinterest: (d) => `https://pinterest.com/pin/create/button/?url=${d.url}&description=${d.title}${d.extra.media ? `&media=${d.extra.media}` : ''}`,
   telegram: (d) => `https://telegram.me/share/url?url=${d.url}${d.extra.text ? `&text=${d.extra.text}` : ''}`,
   twitter: (d) => `https://twitter.com/intent/tweet?url=${d.url}&text=${d.title}${d.extra.via ? `&via=${d.extra.via}` : ''}`,

src/style.scss

@@ -82,6 +82,14 @@ $width:         $button-size - 2*$padding-hor;
             }
         }
 
+        &.odnoklassniki {
+            background-color: #EE8208;
+
+            &::before {
+                background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.505 17.44a11.599 11.599 0 003.6-1.49 1.816 1.816 0 00-1.935-3.073 7.866 7.866 0 01-8.34 0 1.814 1.814 0 00-2.5.565c0 .002 0 .004-.002.005a1.812 1.812 0 00.567 2.5l.002.002c1.105.695 2.322 1.2 3.596 1.488l-3.465 3.465A1.796 1.796 0 006 23.439l.03.03c.344.354.81.53 1.274.53.465 0 .93-.176 1.275-.53L12 20.065l3.404 3.406a1.815 1.815 0 002.566-2.565l-3.465-3.466zM12 12.388a6.202 6.202 0 006.195-6.193C18.195 2.78 15.415 0 12 0S5.805 2.78 5.805 6.197A6.2 6.2 0 0012 12.389zm0-8.757a2.566 2.566 0 010 5.13 2.569 2.569 0 01-2.565-2.564A2.57 2.57 0 0112 3.63z'/%3E%3C/svg%3E");
+            }
+        }
+
         &.pinterest {
             background-color: #e60023;