Кнопки «поделиться» для сайта

Рассмотрим, как добавить социальные кнопки «поделиться» для вашего сайта. Для решения данной задачи мы не будем использовать сторонние сервисы, поэтому наши кнопки «поделиться» не будут оказывать отрицательного влияния на загрузку сайта и будут стабильно работать.

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">
    <i class="fab fa-facebook-f"></i>
</a>

И далее добавлять необходимые стили.

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

Мы рассмотрели, как добавить кнопки «поделиться» для наиболее популярных социальных сетей в русскоязычном сегменте.

Если вам понравилась данная статья, то возможно и ссылки на мессенджеры окажется полезной.

admin
03/12/2019 10:36