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

Автор: | 29.01.2018

Как добавить социальные кнопки на сайт? Мы рассмотрим с вами пять подобных сервисов, позволяющих добавить кнопки социальных сетей на блог.

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

И начнем мы со скрипта «Поделиться» от Яндекс. Здесь все очень просто. В меню «Набор сервисов» отмечаете галочками те соцсети, кнопки которых хотите установить. В меню «Внешний вид блока», справа, выбираете один из 4х возможных вариантов оформления. Чуть ниже в окне появляется код для вставки, который надо скопировать.

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

Мне не понравилось.

Сервис социальных кнопок «AddThis»

Далее — гораздо более красивые и настраиваемые кнопки от «AddThis». Начнем с того, что данный сервис предлагает для встраивания в блоги и сайты несколько различных скриптов: это и кнопки «share» и «follow», и стильный Wellcome Bar (обязательно попробую у себя в дальнейшем), и еще пара интересных решений. Нас же сейчас интересуют именно кнопки.

Вот что нужно сделать, перейдя по вышеуказанной ссылке. Для начала — выбрать тип вашего сайта. Это может быть статический сайт, либо же сайт на какой-либо блогплатформе или CMS. Сразу забегу вперед и скажу, что для блогов на WordPress у AddThis есть свой плагин. Далее мы выбираем стиль блока кнопок: вертикальная панель, горизонтальная, размер кнопок, со счетчиками или без. Получаем код для вставки.

Но по умолчанию скрипт отображает только самые крупные англоязычные социальные сети. Как нам добавить другие кнопки? Вконтакте, например? Оказывается, это тоже предусмотрено. AddThis поддерживает совершенно фантастическое количество разных соцсетей, сервисов и закладок. Полный список доступен здесь.

В первом столбце идет название соцсети, во втором — специальный ID для настройки кнопки. К примеру, для нашей любимой ВКонтакте ID выглядит так: vk. Смотрим код, который мы сгенерировали для вставки в блог. Там для каждой кнопки есть похожие строки — теги : — это кнопка Твиттера. Вместо «button_tweet» вставляем «vk». Или ID другой нужной нам службы из списка.

Таким образом можно настроить вывод именно тех кнопок, которые нам нужны. Существует одно «но».

Кнопки этих дополнительных соцсетей, которые мы с вами только что вставили вручную, имеют только один размер 14х14 пикселей.

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

Сервис «Одна Кнопка»

Перейдем теперь к отечественному скрипту социальных кнопок «Одна Кнопка». Подробно описывать установку я не буду — она настолько проста, что на скриншоте видны все моменты, нужные для установки «Одной Кнопки» в блог WordPress. Кстати, сервис также имеет свой плагин для WordPress. Если у вас другой тип сайта, отмечаете соответствующий пункт, копируете код. Точно также — ничего сложного.

Сервис Share42.com

И, наконец, сервис Share42.com, тоже — отечественный. Он понравился мне больше всего, и именно этот блок кнопок вы можете видеть внизу страницы, в блоке подписки. Всего сервисом поддерживается 40 кнопок плюс 5 дополнительных. Как их установить?

Как обычно, вначале выбираем нужные кнопки.

Отмечаем требуемые опции. Скачиваем архив со скриптом. Архив распаковываем и заливаем на наш сайт. В поле ввода на самом сайте Share42.com указываем путь к залитой папке. Выбираем тип сайта. У нас сгенерировался еще один блок кода, который мы и встраиваем в нужное место шаблона. При желании можно в наш файл стилей style. css вписать стили для оформления скрипта и отредактировать их. Код со стилями также можно скопировать.

Добавить комментарий

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