Скопирован
Хотите узнать точную стоимость вашего сайта?
Заполните бриф и получите скидку
Заполнить брификонка бриф
08.03.2023
Добавляем кнопку "поделиться" на своем сайте
Время чтения: 4 минут
Есть вопросы? Мы в соц сетях

Друзья, данная статья подходит разработчикам, либо новичкам с опытом, которые захотели добавить на сайте кнопку "поделиться". Поделиться можно не только статьей, но и товаром, категорией и любой другой страницей, на которой находится кнопка.

Ниже мы расписали самые популярные социальные сети, без использования сторонних ресурсов, по этому это не будет нести никакой вредной нагрузки на сайт и ни как не повлияет на 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; }


После интеграции данного кода, вам остается лишь загрузить необходимые изображения на свой сервер для выше предложенных социальных сетей.