Social sharing buttons

No js,, no external resources. SVG backgrounds. New Facebook sharing dialog

by Arsen

HTML

<!-- https://gist.github.com/mekegi/a8baebc16a462ffd33e299b1e8344485 -->
<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{{...

CSS

.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...