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

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

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

<div class="share-buttons">
    <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>
</div>

Стилизация кнопок:

.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;
}

Скачать спрайт.

Так просто можно добавить кнопки «поделиться» на ваш сайт.

Благодаря тому, что мы писали весь код вручную, без использования сторонних сервисов, стилизовать кнопки можно как это необходимо.

Важно лишь верно заполнить ссылки, которые позволяют делится контентом текущей страницы.

Поделиться в фейсбук

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=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ

Для @Мой мир необходимо так же добавить изображение записи (страницы).

data-media="АДРЕС_ИЗОБРАЖЕНИЯ"

Используя данные ссылки, вы можете создать виджет абсолютно любого вида и размера. Например, вместо спрайта что мы использовали ранее - можете воспользоваться шрифтовыми иконками fontAwesome:

<button
    class="facebook"
    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>
</button>

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

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

Поделиться в Linkedin

Чтобы поделиться в Linkedin используйте следующий код.

<button
    onClick='window.open("https://www.linkedin.com/sharing/share-offsite/?url=ПОЛНЫЙ_АДРЕС_СТРАНИЦЫ","sharer","toolbar=0,status=0,width=620,height=390");'
    title="Поделиться в Linkedin"
></button>

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

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

Валидация input Простой REST API в PHP - Пошаговое руководство