Выбор и установка кнопок соцсетей для сайта

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

Содержание:

Нет никакой тайны в том, что уже много лет существуют особые кнопки социальных сетей, установка которых на сайте позволяет увидеть прирост трафика, а заодно способствует развитию PR-кампании своего ресурса. Расшаривание материалов обеспечивает охват гигантской аудитории, которая состоит из потенциальных клиентов, читателей и подписчиков.

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

Преимущества и недостатки сервисов

Эффективные инструменты для шаринга могут быть добавлены двумя способами:

• Вручную (с помощью скриптов и плагинов, образуемых API самих сетей);
• Посредством популярных сервисов для добавления кнопок «поделиться в социальных сетях».

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

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

К основным преимуществам этих «помощников» можно отнести:

• Простоту интеграции и легкость в освоении;
• Возможность охватить сразу все актуальные соц. сети «одним махом»;
• Вариативность в выборе внешнего вида кнопок и их эстетическая привлекательность;
• Выдерживание общей стилистики и геометрии блока, независимо от выбранных социальных сетей.

Статистика переходов комфортно отслеживается в Яндекс.Метрике и Google Analytics.

И все же ничего идеального не бывает. Сервисы социальных кнопок, в отличие от официальных решений, имеют ряд недостатков:

• Снижение скорости загрузки страницы, что может отрицательно сказаться и на позициях сайта при его ранжировании в поисковой выдаче, и на объеме продаж;
• Сбои и ошибки в работе серверов, ведущие к длительной загрузке кнопок или их временной недоступности;
• Периодическое появление рекламы;
• Отсутствие стабильного алгоритма работы через AJAX;
• Возможное использование памяти браузеров;
• Наличие сомнительного трафика;
• Непредставление гарантий безопасности данных пользователей.

При добавлении кнопок соцсетей «вручную» таких проблем можно избежать, но это не абсолютная панацея:

• Плагины разных платформ могут отличаться по дизайну и размерам, что усложняет их гармоничное сосуществование на одной странице;
• Процесс занимает больше времени, требует некоторых подготовительных действий и начальных знаний html.

И все же эти способы – самые востребованные и удобные варианты для быстрой установки скриптов кнопок «поделиться в социальных сетях».

Обзор сервисов кнопок социальных сетей

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

Отечественный поисковый гигант предлагает удобный сервис установки кнопок социальных сетей от Яндекса – блок «Поделиться». Представленный инструментарий позволяет в считанные минуты создать «панель» из нужных элементов и произвести ее базовую настройку.

Варианты внешнего вида:

1. Со счетчиком расшариваний;
2. С выпадающим меню;
3. Мелкие иконки в стиле минимализма.

Список доступных для шаринга сетей:

Первичная настройка отображения кнопок соц сетей от Яндекса и готовый код:

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

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

Доступные стили и социальные сети:

Окно предварительного просмотра и дополнительных опций:

Произведя нехитрые манипуляции по выбору нужных соц. сетей, иконок и их настроек, можно увидеть код:

Для корректного отображения сервиса полученный скрипт с прилагающимися данными достаточно скопировать и установить в верстку сайта в выбранном месте.

Качественный конструктор, имеющий удобные опции для моментальной генерации кода, обширные настройки (со статистикой) и даже «спецэффекты».

Готовые иконки могут иметь такой вид:

Можно выбрать все значимые современные сети:

Для индивидуализации используются различные настройки, среди которых важная адаптация для мобильных платформ:

После выполнения всех процедур по выбору и регулировке параметров следует нажать «Сгенерировать код», после чего будет предложено ввести свой e-mail для последующей отправки на него кода для установки.

Полученный скрипт и все остальные данные размещаются в html-коде сайта.

Share42 – понятный пошаговый генератор создания красивых кнопок социальных сетей.

Сервис предлагает быстрое формирование блоков, которое включает:

1. Выбор необходимых соцсетей и размера иконок;
2. Первичную настройку панели и другие опции;

Англоязычная платформа с приятным оформлением и всеми необходимыми опциями для внедрения кнопок соц. сетей на веб-сайт. Сервис позволяет создать «фиксированные» или «скользящие» блоки, состоящие из множества иконок популярных сетей («Вконтакте» присутствует).

Функционал конструктора – все, что нужно для быстрого создания панелей. Принцип работы:

После определения типа блоков («inline» или «sticky») осуществляется переход к выбору самих иконок (методом клика);

Самый известный иностранный сервис с услугами для размещения кнопок социальных сетей на сайте. Для доступа к полному функционалу необходимо пройти процедуру быстрой регистрации. И оно того стоит!

Addthis превращается в мощный и полный полезных «фишек» наглядный конструктор с превью в режиме онлайн.

Кнопки соц. сетей на сайте могут быть:

1. Скользящими (floating);
2. Зафиксированными на странице (inline);
3. Раскрывающимися при наведении (expanding);
4. Баннерами и слайдерами.

Все вариации полностью адаптированы для мобильных устройств.

После выбора типа блока и нажатия «Continue» левая панель окна принимает следующий вид:

Здесь можно выбрать счетчик (share counters), посмотреть список всех доступных кнопок шаринга социальных сетей (select your own + add more services), настроить дизайн (design) и дополнительные функции (скрытие блоков и т.д.)

Для получения кода достаточно нажать «Save & Continue». На следующей странице появится скрипт вида

код самого блока

и подробная инструкция по установке скрипта для разных шаблонов (включая доступные плагины).

Social-likes – компактный и простой скрипт социальных кнопок «лайк» со счетчиком. На странице можно выбрать нужные сети, тип и расположение иконок, их скин и внешний вид.

Дальнейшие действия для установки:

1. Нажать «скачать кнопки»;
2. Сохранить архив на ПК;
3. В шаблоне сайта создать папку «social» и вложить в нее распакованные файлы архива;
4. Перед </head> прописать:

Название файла .css может иметь другое значение (зависит от выбора, сделанного на сайте).

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

К недочетам можно отнести скудный функционал, но он компенсируется высокой скоростью работы скрипта «Одна Кнопка».

Посетители могут выбрать 4 вида кнопки, один из которых – виджет (с разным положением относительно страницы).

Скрипт социальных кнопок выглядит так:

Для работы с виджетом код сложнее:

Для установки достаточно поместить данные в шаблон.

Представитель «моментальных» сервисов генерации кодов для установки социальных кнопок - Pip.Qip. Простота здесь лишь подчеркивает комфорт.

Для получения заветного кода нужно:

1. Указать тип площадки для размещения;
2. Выбрать стиль из списка;
3. Нажать «Уже хочу!» – и лицезреть готовый код внизу страницы.

Останется лишь поместить его в код сайта.

Добавление кнопок соц сетей вручную

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

Знаменитый «Вконтакте» генерирует коды кнопок расшаривания по этому адресу.

С помощью виджета можно выбрать вид будущей кнопки и «прикрутить» счетчик (пункт «стиль»), придумать оригинальное название («текст») и получить заветный код.

Первую часть кода следует поместить внутри тега <head>:

Вторую – в место непосредственного расположения кнопки:

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

Выбор функций ограничивается размером самой кнопки и тремя вариантами ее «композиции» (дизайна).

После нажатия кнопки «Получить код» на экране появится окно с двумя «шагами»:

Шаг 2 – Добавляем Javascript.

Встраивается в html-код страницы единожды. Лучшее место – сразу после тега <body>.

Шаг 3 – сам код кнопки и его размещение.

Разработчики сайта «Одноклассники» представили обновленную кнопку «Класс/Поделиться», которая работает значительно быстрее прошлого образца.

Здесь находится страница конструктора.

С помощью интуитивно понятного интерфейса параметры подгоняются быстро и легко. Когда настройка завершена и вид элемента в блоке «Результат» устраивает, можно «пролистнуть экран» вниз и заметить код, который нужно встроить в html страницы в выбранном месте.

Такой гигант, как Google, не мог остаться в стороне, поэтому для соц. сети googleplus тоже есть своя кнопка расшаривания. В отличие от виджета того же «ВКонтакте», кнопка «+1» не ведет к публикации материалов на страницах нажавшего на нее человека и не имеет влияния на ранжирование. «Тогда зачем она нужна?» – спросите вы. «+1» является частью эффективной PR-кампании вашего ресурса, в ходе которой материалы рекламируются друзьями друзей через профили Гугл, а рекомендации можно увидеть прямо в выдаче поисковой системы!

Официальная страница открывает простой способ установки «+1» с помощью кода:

«Твитнуть или не твитнуть?». Чтобы у посетителей появились такие муки выбора, необходимо создать элемент для расшаривания от Twitter в официальном конструкторе.

С решением этой задачи справится даже начинающий. Интерфейс включает в себя выбор самой кнопки, настройку упоминаний и #хэштега, возможность прописать собственный текст вместо стандартного заголовка страницы.

Код для размещения будет находиться в правом окне.

Плагин для шаринга от социальной сети . – кнопка «Нравится». Комфортное и быстрое создание доступно по ссылке.

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

Настройка сопровождается наглядным отображением внесенных изменений и автоматической генерацией кода.

Добавление иконок на профили и группы в социальных сетях на сайт

Иногда возникает необходимость оформить на сайте ссылку с красивой иконкой соц. сети. В интернете ждут своего часа сотни и тысячи значков разного стиля. Берите и пользуйтесь.

Используя тег <img>, можно вывести изображение понравившейся иконки в html.

Совместив его с тегом ссылки <a>, мы получим иконку, которая будет являться кликабельной ссылкой

html-код в таком случае будет:

Легкие и кастомные кнопки расшаривания

Некоторые энтузиасты и просто талантливые люди полностью отказываются от сервисов, плагинов и других доступных решений. Их цель – использование самостоятельно написанного&кода&для расшаривания. Весомое преимущество таких «кастомных» кнопок – чистый код, предполагающий загрузку лишь CSS, скрипта и шрифтов (картинок).

Плюсы такого подхода:

1. Нет лишнего трафика;
2. Нет рекламы;
3. Корректная работа;
4. Нет проблем с зависимостью от сервиса (который может часто тупить и не загружаться);
5. Нет проблем с поеданием памяти браузера.

Список ссылок на шаширнг в популярных социальных сетях:

Twitter Facebook Google plus LinkedIn Pinterest VK Tumblr Reddit Odnoklassniki

Далее нужно придать им нужный вид с помощью CSS. В нашем случае html-код кнопки расшаривания в ВК выглядит так:

Ну и стилизация кнопки в CSS:

Вам останется только добавить всё это дело в модальное окно и реализовать корректный парсинг тегов с вашей разметки OpenGraph и подставноку в url'ы для шаринга, которые приведены выше.