Кнопки «поделиться» для сайта
Рассмотрим, как добавить социальные кнопки «поделиться» для вашего сайта. Для решения данной задачи мы не будем использовать сторонние сервисы, поэтому наши кнопки «поделиться» не будут оказывать отрицательного влияния на загрузку сайта и будут стабильно работать.
HTML-структура кнопок:
<div class="share-btns">
<a
class="facebook"
rel="nofollow"
href="javascript: void(0)"
onClick="window.open('https://www.facebook.com/sharer.php?u=АДРЕС_СТРАНИЦЫ','sharer','status=0,toolbar=0,width=650,height=500');"
title="Поделиться в Facebook"></a>
<a
class="vkontakte"
rel="nofollow"
href="javascript: void(0)"
onClick="window.open('https://vkontakte.ru/share.php?url=АДРЕС_СТРАНИЦЫ','sharer','status=0,toolbar=0,width=650,height=500');"
title="Поделиться Вконтакте"></a>
<a
class="ok"
rel="nofollow"
href="javascript: void(0)"
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="Поделиться в Одноклассниках"></a>
<a
class="telegram"
rel="nofollow"
href="javascript: void(0)"
onClick="window.open('https://telegram.me/share/url?url=АДРЕС_СТРАНИЦЫ','sharer','status=0,toolbar=0,width=650,height=500');"
title="Поделиться в Телеграм"></a>
<a
class="pinterest"
rel="nofollow"
href="javascript: void(0)"
onClick="window.open('https://ru.pinterest.com/pin/create/button/?url=АДРЕС_СТРАНИЦЫ','sharer','status=0,toolbar=0,width=650,height=500');"
data-media="АДРЕС_ИЗОБРАЖЕНИЯ"
title="Запинить"></a>
<a
class="twitter"
rel="nofollow"
href="javascript: void(0)"
onClick="window.open('https://twitter.com/intent/tweet?text=ТАЙТЛ_СТРАНИЦЫ. ОПИСАНИЕ. СССЫЛКА','sharer','status=0,toolbar=0,width=650,height=500');"
title="Твитнуть"></a>
<a
class="mail"
rel="nofollow"
href="javascript: void(0)"
onClick="window.open('https://connect.mail.ru/share?url=АДРЕС_СТРАНИЦЫ','sharer','status=0,toolbar=0,width=650,height=500');"
title="Поделиться в @Мой мир"></a>
</div>
Стилизация кнопок
.share-btns {
display: flex;
flex-wrap: wrap;
}
.share-btns a {
margin-bottom: 5px;
width: 40px;
height: 40px;
}
.share-btns a:not(:last-child) {
margin-right: 5px;
}
.share-btns a.facebook {
background: url("../img/share-btns.png") no-repeat left top;
}
.share-btns a.vkontakte {
background: url("../img/share-btns.png") no-repeat -168px top;
}
.share-btns a.ok {
background: url("../img/share-btns.png") no-repeat -126px top;
}
.share-btns a.twitter {
background: url("../img/share-btns.png") no-repeat -42px top;
}
.share-btns a.pinterest {
background: url("../img/share-btns.png") no-repeat -210px top;
}
.share-btns a.mail {
background: url("../img/share-btns.png") no-repeat -294px top;
}
.share-btns a.telegram {
background: url("../img/share-btns.png") no-repeat -672px top;
}
SASS
.share-btns
display: flex
flex-wrap: wrap
a
margin-bottom: 5px
width: 40px
height: 40px
&:not(:last-child)
margin-right: 5px
&.facebook
background: url("../img/share-btns.png") no-repeat left top
&.vkontakte
background: url("../img/share-btns.png") no-repeat -168px top
&.ok
background: url("../img/share-btns.png") no-repeat -126px top
&.twitter
background: url("../img/share-btns.png") no-repeat -42px top
&.pinterest
background: url("../img/share-btns.png") no-repeat -210px top
&.mail
background: url("../img/share-btns.png") no-repeat -294px top
&.telegram
background: url("../img/share-btns.png") no-repeat -672px top
Так просто можно добавить кнопки «поделиться» на ваш сайт.
Благодаря тому, что мы писали весь код вручную, без использования сторонних сервисов, стилизовать кнопки можно как это необходимо.
Важно лишь верно заполнить ссылки, которые позволяют делится контентом текущей страницы.
Поделиться в фейсбук
https://www.facebook.com/sharer.php?u=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ
Поделиться вконтакте
https://vkontakte.ru/share.php?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ
Поделиться в ok
https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ&st.comments=ОПИСАНИЕ
Поделиться в телеграм
https://telegram.me/share/url?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ
Поделиться в pinterest
https://ru.pinterest.com/pin/create/button/?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ
Для pinterest необходимо так же добавить изображение поста (страницы)
data-media="АДРЕС_ИЗОБРАЖЕНИЯ"
Поделиться в twitter
https://twitter.com/intent/tweet?text=ТАЙТЛ_СТАТЬИ(ЗАГОЛОВОК). Описание. Ссылка
Поделиться в @мой мир mail.ru
https://connect.mail.ru/share?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ
Используя данные ссылки, вы можете создать виджет абсолютно любого вида и размера. Например, вместо спрайта что мы использовали ранее - можете воспользоваться шрифтовыми иконками fontAwesome:
<a
class="facebook"
rel="nofollow"
href="javascript: void(0)"
onClick="window.open('https://www.facebook.com/sharer.php?u=АДРЕС_СТРАНИЦЫ','sharer','status=0,toolbar=0,width=640,height=510');"
title="Поделиться в Facebook">
<span class="fab fa-facebook-f"></span>
</a>
И далее добавлять необходимые стили.
Чтобы подтягивались необходимые изображения ваших статей, используйте Open Graph разметку.
Поделиться в Linkedin
Чтобы поделиться в Linkedin используйте следующий код.
<a
onClick="window.open('https://www.linkedin.com/sharing/share-offsite/?url=ПОЛНЫЙ_АДРЕС_СТРАНИЦЫ','sharer','toolbar=0,status=0,width=620,height=390');"
href="javascript:void(0);"
rel="nofollow noopener noreferrer"
title="Поделиться в Linkedin"
></a>
Мы рассмотрели, как добавить кнопки «поделиться» для наиболее популярных социальных сетей в русскоязычном сегменте.
Если вам понравилась данная статья, то возможно и ссылки на мессенджеры окажется для вас полезной.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Статьи из данной категории:
Комментарии
- Комментариев пока нет.