diff --git a/README.md b/README.md index dd8d032..7d3ea70 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,7 @@ classes match the names of social networks:
+ @@ -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 diff --git a/docs/index.html b/docs/index.html index c4c242c..a397dd6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -64,6 +64,7 @@ style="text-align: center"> + @@ -130,6 +131,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>
@@ -139,6 +141,7 @@
             
+ @@ -174,7 +177,7 @@

    -
  • add data-media to a Pinterest 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
diff --git a/src/index.ts b/src/index.ts index 00d95d0..495ae4b 100644 --- a/src/index.ts +++ b/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}` : ''}`, diff --git a/src/style.scss b/src/style.scss index 96274ba..1912696 100644 --- a/src/style.scss +++ b/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;