Skip to content

Instantly share code, notes, and snippets.

@mekegi mekegi/social.html
Last active Apr 23, 2017

Embed
What would you like to do?
<!-- live preview https://jsfiddle.net/duburlan/16vstjxo/2/ -->
<section class="sharing-btns post-share">
<a href="https://www.facebook.com/dialog/share?app_id={{ .Site.Params.facebook_admin }}&amp;display=popup&amp;href={{ .Permalink }}&redirect_uri={{ .Permalink }}"
target="_blank"
title="Поделиться через Facebook"
data-social="Facebook"
class="like__widget swidget_facebook"
></a>
<a href="https://twitter.com/share?url={{ .Permalink }}&amp;text={{ .Title }}&amp;hashtags=some,ololo"
target="_blank"
title="Поделиться через Twitter"
data-social="Twitter"
class="like__widget swidget_twitter"></a>
<a href="http://vkontakte.ru/share.php?url={{ .Permalink }}" target="_blank"
title="Поделиться через Vkontakte"
data-social="Vkontakte"
class="like__widget swidget_vkontakte"
></a>
<a href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&amp;st.s=1&amp;st.comments={{ .Title }}&amp;st._surl={{ .Permalink }}"
target="_blank" title="Поделиться через Odnoklassniki"
data-social="Odnoklassniki"
class="like__widget swidget_odnoklassniki"
></a>
<a href="https://plus.google.com/share?url={{ .Permalink }}&amp;hl=ru"
target="_blank" title="Поделиться через Google Plus"
data-social="Google Plus"
class="like__widget swidget_gplus"
></a>
<a href="http://some-instagram-link"
target="_blank" title="Поделиться через Instagram"
data-social="Instagram"
class="like__widget swidget_instagram"
></a>
<a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ .Permalink }}&amp;summary={{ .Summary }}&source=your.site.tld"
target="_blank" title="Поделиться через Linkedin"
data-social="Linkedin"
class="like__widget swidget_linkedin"
></a>
<a href="mailto:?subject=Отправлено с сайта ololo.com&amp;body=%0D%0A{{ .Title }}%0D%0A{{ .Permalink }} %0D%0A%0D%0A{{ .Summary }}"
title="Поделиться через почту" data-social="Email" target="_blank"
class="like__widget swidget_email"
></a>
<a
href="whatsapp://send?text={{ .Title }}.%20{{ .Permalink }}" data-action="share/whatsapp/share"
target="_blank"
title="Share link on Whatsapp"
data-social="Whatsapp"
class="like__widget swidget_whatsapp only_mobile">
</a>
<a
href="https://telegram.me/share/url?url={{ .Permalink }}&amp;text={{ .Title }}"
target="_blank"
title="Share link on Telegram"
data-social="Telegram"
class="like__widget swidget_telegram only_mobile">
</a>
</section>
<style>
.like__widget {
margin: .3em;
color: #333;
width: 32px;
height: 32px;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
}
.swidget_facebook:active,.swidget_facebook:focus,.swidget_facebook:hover {
background: #425497;
border-color: #425497;
}
.swidget_facebook {
background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#425497" d="M13 0H3C1 0 0 1 0 3v10c0 2 1 3 3 3h5V9H6V7h2V5c0-2 2-2 2-2h3v2h-3v2h3l-.5 2H10v7h3c2 0 3-1 3-3V3c0-2-1-3-3-3z"/></svg>');
}
.swidget_twitter:active,.swidget_twitter:focus,.swidget_twitter:hover {
background: #00b7ec;
border-color: #00b7ec;
}
.swidget_twitter {
background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 455.7 455.7"><rect rx="60" ry="60" width="455.7" height="455.7" fill="#00abea"/><path d="M60.4 337.8c30.3 19.2 66.3 30.4 104.9 30.4 108.3 0 196.2-87.8 196.2-196.2 0-2.7-0.1-5.4-0.2-8.1 3.9-3.1 28.2-22.5 34.1-35 0 0-19.7 8.2-38.9 10.1 0 0-0.1 0-0.1 0 0 0 0 0 0.1-0.1 1.8-1.2 26.6-18.1 30-38.2 0 0-13.9 7.4-33.4 13.9 -3.2 1.1-6.6 2.1-10.1 3.1 -12.6-13.4-30.4-21.8-50.2-21.8 -38 0-68.8 30.8-68.8 68.8 0 5.4 0.6 10.6 1.8 15.6 -5.3-0.2-86.2-4.8-141.3-71.4 0 0-32.9 44.9 19.6 91.1 0 0-16-0.6-29.7-8.9 0 0-5.1 54.4 54.4 68.3 0 0-11.7 4.4-30.4 1.3 0 0 10.4 44 63.3 48.1 0 0-41.8 37.7-101.1 28.9L60.4 337.8z" fill="#FFF"/></svg>');
}
.swidget_vkontakte:active,.swidget_vkontakte:focus,.swidget_vkontakte:hover {
background: #526e8f;
border-color: #526e8f;
}
.swidget_vkontakte {
background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#526e8f" d="M13 0H3C1 0 0 1 0 3v10c0 2 1 3 3 3h10c2 0 3-1 3-3V3c0-2-1-3-3-3zm.452 11.394l-1.603.022s-.345.068-.8-.243c-.598-.41-1.164-1.48-1.604-1.342-.446.144-.432 1.106-.432 1.106s.003.206-.1.315c-.11.12-.326.144-.326.144H7.87s-1.582.095-2.975-1.356c-1.52-1.583-2.862-4.723-2.862-4.723s-.078-.206.006-.305c.094-.112.35-.12.35-.12l1.716-.01s.162.026.277.11c.095.07.15.202.15.202s.276.7.643 1.335c.716 1.238 1.05 1.508 1.293 1.376.353-.193.247-1.75.247-1.75s.006-.565-.178-.817c-.145-.194-.415-.25-.534-.267-.096-.014.062-.238.267-.338.31-.15.853-.16 1.497-.153.502.004.646.035.842.083.59.143.39.694.39 2.016 0 .422-.075 1.018.23 1.215.13.085.453.013 1.256-1.352.38-.647.666-1.407.666-1.407s.062-.136.16-.194c.098-.06.232-.04.232-.04l1.804-.012s.542-.065.63.18c.092.257-.203.857-.94 1.84-1.21 1.612-1.345 1.46-.34 2.394.96.89 1.16 1.325 1.192 1.38.4.66-.44.71-.44.71z" /></svg>');
}
.swidget_odnoklassniki:active,.swidget_odnoklassniki:focus,.swidget_odnoklassniki:hover {
background: #f6903b;
border-color: #f6903b
}
.swidget_odnoklassniki {
background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#f6903b" d="M8 6.107c.888 0 1.607-.72 1.607-1.607 0-.888-.72-1.607-1.607-1.607s-1.607.72-1.607 1.607c0 .888.72 1.607 1.607 1.607zM13 0H3C1 0 0 1 0 3v10c0 2 1 3 3 3h10c2 0 3-1 3-3V3c0-2-1-3-3-3zM8 .75c2.07 0 3.75 1.68 3.75 3.75 0 2.07-1.68 3.75-3.75 3.75S4.25 6.57 4.25 4.5C4.25 2.43 5.93.75 8 .75zm3.826 12.634c.42.42.42 1.097 0 1.515-.21.208-.483.313-.758.313-.274 0-.548-.105-.758-.314L8 12.59 5.69 14.9c-.42.418-1.098.418-1.516 0s-.42-1.098 0-1.516L6.357 11.2c-1.303-.386-2.288-1.073-2.337-1.11-.473-.354-.57-1.025-.214-1.5.354-.47 1.022-.567 1.496-.216.03.022 1.4.946 2.698.946 1.31 0 2.682-.934 2.693-.943.474-.355 1.146-.258 1.5.213.355.474.26 1.146-.214 1.5-.05.036-1.035.723-2.338 1.11l2.184 2.184z"/></svg>');
}
.swidget_whatsapp:active,.swidget_whatsapp:focus,.swidget_whatsapp:hover {
background: #2CB742;
border-color: #2CB742
}
.swidget_whatsapp {
background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 187 187"><rect height="187" rx="22" ry="22" width="187" fill="#009846"/><path d="M95 146c-11 0-22-3-31-9l-21 7 7-20c-6-9-10-20-10-32 0-2 0-4 0-5 3-28 26-50 55-50 29 0 52 22 55 51 0 1 0 2 0 4 0 30-25 54-55 54zm65-56c-1-35-30-63-65-63-35 0-64 27-66 62 0 1 0 2 0 3 0 12 4 24 10 33l-12 35 36-11c9 5 20 8 32 8 36 0 65-29 65-65 0-1 0-1 0-2z" fill="#fefefe"/><path d="M125 105c-2-1-10-5-11-5-2-1-3-1-4 1-1 1-4 5-5 6-1 1-2 1-3 0-2-1-7-2-13-8-5-4-8-9-9-11-1-1 0-2 0-3 1-1 2-2 3-3 0 0 0 0 0-1 1 0 1-1 1-1 1-2 1-2 0-3 0-1-3-9-5-12-1-3-2-3-3-3-1 0-2 0-3 0-1 0-3 1-5 2-1 2-5 6-5 13 0 2 0 4 1 6 1 5 5 10 5 11 1 1 11 18 28 24 16 6 16 4 19 4 3 0 10-4 11-8 1-3 1-7 1-7-1-1-2-1-3-2z" fill="#fefefe"/></svg>');
}
.swidget_telegram:active,.swidget_telegram:focus,.swidget_telegram:hover {
background: #64a9dc; border-color: #64a9dc;
}
.swidget_telegram {
background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect height="512" rx="64" ry="64" width="512" fill="#64a9dc"/><path d="M425.1 94.2 78.8 227.8c-23.6 9.5-23.5 22.7-4.3 28.5l86.4 27 33.1 101.3c4 11.1 2 15.5 13.7 15.5 9 0 13-4.1 18-9 3.2-3.1 22.1-21.5 43.2-42l89.9 66.4c16.5 9.1 28.5 4.4 32.6-15.4L450.1 122.2C456.2 98 440.9 87 425.1 94.2zM174.4 277.1 369.1 154.3c9.7-5.9 18.6-2.7 11.3 3.8l-166.7 150.4-6.5 69.2-32.8-100.6z" fill="#fff"/></svg>');
}
.swidget_instagram:active,.swidget_instagram:focus,.swidget_instagram:hover {
background: #369; border-color: #369;
}
.swidget_instagram {
background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 384"><rect height="384" rx="48" ry="48" width="384" fill="#369"/><path d="M142 59l100 0c22 0 42 9 56 24 14 14 23 34 23 56l0 106c0 22-9 41-23 56-14 14-34 23-56 23l-100 0c-22 0-42-9-56-23-15-15-24-34-24-56l0-106c0-22 9-42 24-56 14-15 34-24 56-24zm100 23l-100 0c-16 0-30 6-41 16-10 11-17 25-17 41l0 106c0 15 7 30 17 40 11 11 25 17 41 17l100 0c16 0 30-6 40-17 11-10 17-25 17-40l0-106c0-16-6-30-17-41-10-10-24-16-40-16z" fill="white"/><path d="M192 123c19 0 36 7 48 20 12 12 20 29 20 48 0 19-8 35-20 48-12 12-29 20-48 20-19 0-36-8-48-20-13-13-20-29-20-48 0-19 7-36 20-48 12-13 29-20 48-20zm32 35c-8-8-20-13-32-13-13 0-24 5-33 13-8 9-13 20-13 33 0 12 5 24 13 32 9 8 20 13 33 13 12 0 24-5 32-13 8-8 14-20 14-32 0-13-6-24-14-33z" fill="white"/><circle cx="265" cy="119" r="16" fill="white"/></svg>');
}
.swidget_linkedin:active,.swidget_linkedin:focus,.swidget_linkedin:hover {
background: #379AD0; border-color: #379AD0;
}
.swidget_linkedin {
background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 201"><rect height="201" rx="26" ry="26" width="201" fill="#379AD0"/><polygon points="39 102 39 162 68 162 68 97 68 80 39 80 " fill="#fefefe"/><path d="M54 39c-8 0-15 7-15 15 0 7 7 14 15 14 7 0 14-7 14-14 0-8-7-15-14-15z" fill="#fefefe"/><path d="M161 105c-2-15-9-25-30-25-12 0-20 5-24 11l0 0 0-11-23 0 0 16 0 66 24 0 0-41c0-10 2-21 15-21 13 0 14 13 14 22l0 40 25 0 0-45 0 0c0-4 0-8-1-12z" fill="#fefefe"/></svg>');
}
.swidget_gplus:active,.swidget_gplus:focus,.swidget_gplus:hover {
background: #ED2524;
border-color: #ED2524;
}
.swidget_gplus {
background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134 134"><rect height="134" rx="18" ry="18" width="134" fill="#ED2524"/><path d="M65 31c1 0 1 1 2 2 1 0 2 1 3 3 0 1 1 2 2 4 0 1 0 3 0 5 0 4-1 7-2 9-1 1-2 2-3 3-1 1-2 2-3 3 0 0-1 1-2 2 0 1 0 2 0 3 0 1 0 2 1 3 0 0 1 1 1 1l4 3c2 2 4 4 5 6 2 2 3 5 3 9 0 5-2 9-7 13-4 4-11 6-20 6-7 0-13-1-16-4-4-3-6-6-6-10 0-2 1-4 2-7 1-2 3-4 6-6 4-2 7-3 11-4 4 0 7-1 9-1-1-1-1-2-2-3-1-1-1-2-1-4 0-1 0-2 0-2 1-1 1-2 1-2-1 0-2 0-3 0-6 0-10-2-13-5-3-3-5-7-5-11 0-5 3-10 7-14 3-3 6-4 9-5 3-1 6-1 9-1l21 0-6 4-7 0zm4 60l0 0c0-3-1-5-2-7-2-2-5-4-9-7-1 0-1 0-2 0-1 0-2 0-4 0-3 0-5 1-7 2-1 0-1 0-2 1-1 0-2 1-3 1-1 1-2 2-3 4 0 1-1 3-1 4 0 4 2 7 5 9 3 3 8 4 13 4 5 0 9-1 11-3 3-2 4-5 4-8zm-14-31l0 0c2 0 5-1 6-3 1-1 2-2 2-4 0-1 0-2 0-3 0-4-1-9-3-13-1-2-2-3-4-5-1-1-3-1-5-1-3 0-6 1-7 3-2 2-3 5-3 8 0 3 1 7 4 11 1 2 2 4 4 5 1 2 3 2 6 2z" fill="white"/><polygon points="106 38 95 38 95 28 90 28 90 38 79 38 79 44 90 44 90 55 95 55 95 44 106 44 " fill="white"/></svg>');
}
.swidget_email:active,.swidget_email:focus,.swidget_email:hover {
background: #e95;
border-color: #e95;
}
.swidget_email {
background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect height="512" rx="64" ry="64" width="512" fill="#e95"/><path d="M110.7 130.2h290.9c15.3 0 27.8 12.5 27.8 27.8v195.9c0 15.3-12.5 27.8-27.8 27.8H110.7c-15.5 0-28-12.5-28-27.8v-195.9C82.6 142.7 95.1 130.2 110.7 130.2L110.7 130.2z" fill="#FFF"/><path d="M256 290.2l137.8-97.3v190.1h9.2c15.5 0 28.1-12.6 28.1-28.1V166.6v-9.6c0-13-9-24-21.2-27.3L256 238.5 102.3 129.8c-12.2 3.1-21.4 14.3-21.4 27.3v9.4 188.5c0 15.5 12.6 28.1 28.3 28.1h9V192.9L256 290.2z" fill="#DF4B3F"/><path d="M393.8 192.9v190.1h9.2c15.5 0 28.1-12.6 28.1-28.1V166.6L393.8 192.9z" fill="#DF4B3F"/></svg>');
}
@media screen and (max-width: 680px) {
.only_mobile {
visibility: visible !important;
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.