Хотите узнать точную стоимость вашего сайта?
Заполните бриф и получите скидку
Заполнить бриф
Друзья, данная статья подходит разработчикам, либо новичкам с опытом, которые захотели добавить на сайте кнопку "поделиться". Поделиться можно не только статьей, но и товаром, категорией и любой другой страницей, на которой находится кнопка.
Ниже мы расписали самые популярные социальные сети, без использования сторонних ресурсов, по этому это не будет нести никакой вредной нагрузки на сайт и ни как не повлияет на SEO.
HTML-код:
<button class="facebook" onclick="window.open("https://www.facebook.com/sharer.php?u=АДРЕС_СТРАНИЦЫ","sharer","status=0,toolbar=0,width=650,height=500");" title="Поделиться в Facebook">
</button>
<button class="vkontakte" onclick="window.open("https://vk.com/share.php?url=АДРЕС_СТРАНИЦЫ","sharer","status=0,toolbar=0,width=650,height=500");" title="Поделиться Вконтакте">
</button>
<button class="ok" onclick="window.open("https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=АДРЕС_СТРАНИЦЫ&st.comments=ОПИСАНИЕ","sharer","status=0,toolbar=0,width=650,height=500");" title="Поделиться в Одноклассниках">
</button>
<button class="telegram" onclick="window.open("https://telegram.me/share/url?url=АДРЕС_СТРАНИЦЫ","sharer","status=0,toolbar=0,width=650,height=500");" title="Поделиться в Телеграм">
</button>
<button class="pinterest" onclick="window.open("https://ru.pinterest.com/pin/create/button/?url=АДРЕС_СТРАНИЦЫ","sharer","status=0,toolbar=0,width=650,height=500");" data-media="АДРЕС_ИЗОБРАЖЕНИЯ" title="Запинить">
</button>
<button class="twitter" onclick="window.open("https://twitter.com/intent/tweet?text=ТАЙТЛ_СТРАНИЦЫ. ОПИСАНИЕ. СССЫЛКА","sharer","status=0,toolbar=0,width=650,height=500");" title="Твитнуть">
</button>
<button class="mail" onclick="window.open("https://connect.mail.ru/share?url=АДРЕС_СТРАНИЦЫ","sharer","status=0,toolbar=0,width=650,height=500");" title="Поделиться в @Мой мир">
</button>
CSS-стили для стилизации кнопок:
.share-buttons {
display: flex;
flex-wrap: wrap;
}
.share-buttons a {
margin-bottom: 5px;
width: 40px;
height: 40px;
}
.share-buttons a:not(:last-child) {
margin-right: 5px;
}
.share-buttons .facebook {
background: url("../img/share-btns.png") no-repeat left top;
}
.share-buttons .vkontakte {
background: url("../img/share-btns.png") no-repeat -168px top;
}
.share-buttons .ok {
background: url("../img/share-btns.png") no-repeat -126px top;
}
.share-buttons .twitter {
background: url("../img/share-btns.png") no-repeat -42px top;
}
.share-buttons .pinterest {
background: url("../img/share-btns.png") no-repeat -210px top;
}
.share-buttons .mail {
background: url("../img/share-btns.png") no-repeat -294px top;
}
.share-buttons .telegram {
background: url("../img/share-btns.png") no-repeat -672px top;
}
После интеграции данного кода, вам остается лишь загрузить необходимые изображения на свой сервер для выше предложенных социальных сетей.
