Как добавить кнопки социальных сетей на сайт

Самый простой и быстрый способ поставить кнопки нескольких социальных сетей на страницу — воспользоваться одним из бесплатных сервисов. Ниже будет рассмотрено несколько таких сервисов, интуитивно понятных и доступных даже совсем начинающим сайтостроителям.


1. Сервис социальной активности UpToLike

Ссылка на сервис. Жмем на кнопочку «Настроить кнопки соцсетей» и попадаем на раздел с настройками.

Сервис социальной активности UpToLike

Здесь все просто: справа показывается превью, как это будет выглядеть, слева настройки. Можно выбрать, какие кнопки ставить (по ссылке «Еще социальные сети» раскрывается внушительный список соцсетей), расположение, внешний вид и еще некоторые настройки. Для каждой из них появляется пояснение, если навести на значок вопроса рядом. Мне особо понравились здесь лаконичный дизайн вывода кнопочек и адаптация под мобильные устройства, а вариант «Боковая панель» создает скользящую панельку слева/справа экрана.
После выбора правильных настроек жмем на большую зеленую кнопку «Сгенерировать код», появляется всплывающее окно, просящее email и адрес сайта, заполняем поля и после этого сразу появляется код для вставки:

Сервис социальной активности UpToLike

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

Сервис социальной активности UpToLike

Сервис сразу создает аккаунт по введенному email, в котором можно посмотреть статистику кликов и отредактировать вывод кнопок.

Сервис социальной активности UpToLike
На самом деле сервис содержит много виджетов: Поделиться, Подписаться, Рейтинг статей, Опросы, Авторизация через соцсети, а также имеет плагины под некоторые популярные CMS, узнать о всех возможностях использования можно здесь.

2. Pluso



Еще один удобный сервис. По ссылке открывается страничка с настройками, также можно выбрать нужные соцсети, внешний вид, мне понравилось, что дополнительно можно добавить кнопочки «Печатать», «Отправить на email» и «Добавить в закладки». Единственное, не получилось найти, где убрать кнопку с дополнительными соцсетями. Настойка «Вертикальное расположение» лишь выстраивает кнопочки друг под другом — скользящая панелька автоматом не получится.
Сервис Pluso
Сервис Pluso
После выбора дизайна кнопок проматываем страничку вниз и видим поле «Предпросмотр», ниже код для вставки и справа 3 поля для заполнения (на какой сайт будут ссылки, там тоже вылезают подсказки, как и что заполнять). Нужно заполнить поля, скопировать код и также как и в предыдущем примере вставить в то место страницы, где будут вылезать кнопочки.
Сервис Pluso

3. Блок «Поделиться» от Яндекс.

По ссылке прокручиваем страничку и появляется конструктор блока.
Блок поделиться от Яндекс
Здесь тоже все предельно просто, слева выбор соцсетей, справа вариантов оформления. Нужно скопировать получившийся код в нужное место на сайте. Просто и удобно.

3 thoughts on “Как добавить кнопки социальных сетей на сайт

  • 05.04.2016 в 16:56
    Permalink

    Спасибо! Кнопки появились. Правда вверху статей, а как бы их перенести в конец страницы вниз? И правда с браузером что то.

    Ответить
  • 14.12.2016 в 16:47
    Permalink

    Вторая часть кода помещается там, где вы хотите видеть кнопки социальных сетей, подобранные для сайта. Если код состоит всего из одной части, то достаточно проделать только эту операцию.

    Ответить

Добавить комментарий для Валентина Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *