Кнопки поделиться (share) в социальных сетях

Наверно одно из не мало важных вещей на сайте, это кнопки поделиться в социальных сетях. Почему это важно? Потому что с каждым днем количество сайтов увеличивается и с каждым днем пробиться в топ в поисковиках все сложнее. Если вашими страницами будут делиться в социальных сетях, то поисковики воспринят, что сайт полезный и позиции в выдаче улучшиться!

Кнопки share

Пример:

See the Pen Share buttons by Aleksandrs (@CoolS2) on CodePen.0

И так, 6 топовых социальных сетей, которые обычно ставят себе на сайт. Так же не большая анимация, которая возможно привлечет внимание.

Разбор кода

HTML

Создадим блок, в котором будут наши ссылки, каждой ссылке пропишем путь в соц. сеть вместе с параметрами (для теста, вместо параметров, я указал в квадратных скобках, что за параметр нужно вставлять, к примеру где [link], нужно указать ссылку на страницу, который будут делиться)

Внутри каждой ссылки добавим картинку (логотип соц. сети), в примере я использовал фонт Font Awesome

<div class="share-buttons">

    <a class="share-btn-fb" href="http://www.facebook.com/sharer/sharer.php?s=100&p%5Btitle%5D=[TITLE]&p%5Bsummary%5D=[TEXT]&p%5Burl%5D=[LINK]&p%5Bimages%5D%5B0%5D=[IMAGE]" target="_blank" onclick="return Share.me(this);">
        <div class="facebook share-block">
            <i class="fa fa-facebook" aria-hidden="true"></i>
        </div>
    </a>

    <a href="https://plus.google.com/share?url=[LINK]" target="_blank" onclick="return Share.me(this);">
        <div class="google share-block">
            <i class="fa fa-google-plus" aria-hidden="true"></i>
        </div>
    </a>
    <a class="share-btn-in" href="https://www.linkedin.com/cws/share?url=[LINK]" target="_blank" onclick="return Share.me(this);">
        <div class="linkedin share-block">
            <i class="fa fa-linkedin" aria-hidden="true"></i>
        </div>
    </a>
    <a class="share-btn-p" href="https://www.pinterest.com/pin/create/bookmarklet/?description=<?=get_the_title($id)?>&url=[LINK]" target="_blank" onclick="return Share.me(this);">
        <div class="pinterest share-block">
            <i class="fa fa-pinterest" aria-hidden="true"></i>
        </div>
    </a>
    <a class="share-btn-vk" href="https://vk.com/share.php?url=[LINK]" target="_blank" onclick="return Share.me(this);">
        <div class="vk share-block">
            <i class="fa fa-vk" aria-hidden="true"></i>
        </div>
    </a>

    <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=[TITLE]&url=[LINK]" target="_blank" onclick="return Share.me(this)">
        <div class="twitter share-block">
            <i class="fa fa-twitter" aria-hidden="true"></i>
        </div>
    </a>
</div>

CSS

Задаем фиксированную ширину и высоту, добавляем обводку и при наводке мышкой, делаем ее синего цвета. Саму анимацию поддергивания я честно спер с глубин интернета. (На данный момент реализовано столько всего и так грамотно, что зачем изобретать велосипед?

Есть готовая пачка анимаций, которой можно бесплатно пользоваться.

a{
  text-decoration: none;
}
.share-buttons{
	max-width: 300px;
  margin:0 auto;
}
.share-block{
  display: inline-block;
	background: #fff;
	width: 30px;
	height: 30px;
	margin-bottom: 16px;
	border: 1px solid #ccc;
	text-align: center;
	transition: 0.5s;
}
.share-block:hover{
	animation: share-animation 0.82s cubic-bezier(.36,.07,.19,.97) both;
	border-color: #0c7fd7;
}


.share-block i{
	font-size: 12px;
	position: relative;
	top: 5px;
}
.share-block span{
	display: block;
	position: relative;
	top: -9px;
	font-size: 10px;
	line-height: 1;
}
.share-buttons .facebook{
	color: #3b5998;
}
.share-buttons .vk{
	color: #5E82A8;
}
.share-buttons  .linkedin{
	color: #0976b4;
}
.share-buttons .pinterest{
	color: #cc2127;
}
.share-buttons .google{
	color: #d73925;
}
.share-buttons .twitter{
	color: #55acee;
}

@keyframes share-animation {
	10%, 90% {
		transform: translate3d(-1px, 0, 0);
	}

	20%, 80% {
		transform: translate3d(2px, 0, 0);
	}

	30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0);
	}

	40%, 60% {
		transform: translate3d(4px, 0, 0);
	}
}

JavaScript

Тут javascript не обязателен, так как все важное у нас в ссылке, яваскриптом мы задаем размеры нашему попапу.

Share = {
            me : function(el){
                Share.popup(el.href);
                return false;
            },

            popup: function(url) {
                window.open(url,'','toolbar=0,status=0,width=626,height=436');
            }
        };

Вот и все дела! Если у вас есть вопросы или можете поделиться вариантом получше, пишите в комментариях! Так же можете почитать «Как скрыть блок при клике за его пределами?»