Наверно одно из не мало важных вещей на сайте, это кнопки поделиться в социальных сетях. Почему это важно? Потому что с каждым днем количество сайтов увеличивается и с каждым днем пробиться в топ в поисковиках все сложнее. Если вашими страницами будут делиться в социальных сетях, то поисковики воспринят, что сайт полезный и позиции в выдаче улучшиться!
Кнопки share
Пример:
See the Pen Share buttons by Aleksandrs (@CoolS2) on CodePen.
И так, 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');
}
};
Вот и все дела! Если у вас есть вопросы или можете поделиться вариантом получше, пишите в комментариях! Так же можете почитать «Как скрыть блок при клике за его пределами?»