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

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

HTML-структура кнопок:

<div class="share-btns">
    <a
        class="facebook"
        rel="nofollow noopener noreferrer"
        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 noopener noreferrer"
        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 noopener noreferrer"
        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 noopener noreferrer"
        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 noopener noreferrer"
        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 noopener noreferrer"
        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 noopener noreferrer"
        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 noopener noreferrer"
    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>

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

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

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

admin

02/11/2019 12:41