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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

Закрыть

Сообщить об ошибке

Отменить
2885
How-to Читать 8 минут 12 ноября 2018

Как добавить на сайт кнопки «Поделиться в соцсетях»

Как добавить кнопки соцсетей на сайт
ЧЕК-ЛИСТ: СОЦИАЛЬНЫЕ ФАКТОРЫ
Инструкцию одобрил SEO Classifieds Specialist в Inweb
Лайки и шейры позволяют рекламировать себя в социальных сетях при помощи пользователей и сотрудников компании, которые делятся вашим контентом на личных страницах. Разберемся, как добавить удобные кнопки на сайт и увеличить свое присутствие в соцсетях.

Зачем нужны лайки и шеры на сайте

В эру социальных сетей существует необходимость создать взаимодействие сайта с социальными сетями, чтобы максимально охватить свою аудиторию. Для ряда тематик, особенно новостных, кнопки «Поделиться в соцсетях» — must have. Если вы добавите кнопки шейра, пользователи прорекламируют ваш сайт в один клик или выразят свою лояльность к контенту лайком, что также увидят их друзья, например, в Facebook.

Благодаря счетчикам посетители видят, что ваша аудитория лояльна, а платформа популярна. Это повлияет на поведенческие факторы. А поведенческие факторы улучшат позиции в SERP. Технически, когда вы нажимаете «Share», копируются заголовок, картинка, часть контента и ссылка на статью. В личном аккаунте посетителя автоматически создается публикация, с которой ознакомятся все его подписчики.
Кнопки соцсетей в статье
Кнопки лайков внизу статьи
Кнопки позволяют размещать ссылку на сайт в социальной сети, что значительно разбавляет ссылочный вес. Наличие данных кнопок улучшает юзабилити сайта, помогая пользователю совершить быстрый обмен информации.

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

Перейдем к установке.

Установка кнопок Like и Share на сайт

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

Формирование кода для кнопок

Рассмотрим генерацию кода кнопок на примере Facebook. Перейдите по ссылке на конфигуратор кнопки. Конфигуратор позволяет настроить вид кнопок, размер и включить опцию шейра.
Конфигуратор кнопки Нравится
Выберите тип кнопки для сайта в «Композиции». В нижнем поле изменится картинка согласно выбранному вам типу. Посмотрите несколько вариантов и определите подходящий к общему стилю вашего веб-ресурса.
Композиция кнопки Нравится в Facebook
Настройте «Тип действия» — лайк или репост. Если вы хотите добавить только одну кнопку на сайт, выберите ее в этом поле. Если хотите обе — выберите кнопку like, так как share (recommend) присоединится далее:
Тип действия кнопки Facebook для сайта
Выберите размер кнопок. Отталкивайтесь от того, насколько гармонично кнопки смотрятся на сайте. В нижнем поле есть примеры:
Размер кнопки лайка Facebook
Чтобы к кнопке лайка добавить кнопку шейра, поставьте галочку под блоком настроек:
Кнопка поделиться в Facebook для сайта
Завершающий шаг — нажмите «Получить код». Элемент кода нужно перенести в основной код страницы, где должны появиться кнопки. Если это статьи, то кнопки обычно размещают после текста.
Пример кода, который добавляет лайки и шейры на сайт:
Код кнопки оценить в Facebook для сайта
Чтобы не повторять данную процедуру с каждой социальной сетью, а одним массивом добавить в код веб-сайта кнопки нескольких соцсетей, воспользуйтесь разработкой Яндекса, блоком «Поделиться».
Это конструктор, который позволяет быстро создать код кнопок нескольких социальных сетей за один раз.
Блок Поделиться в Яндексе
Конструктор имеет в наборе все основные соцсети и сервисы, которые можно подключить с его помощью:

  • Яндекс.Коллекции.
  • Вконтакте.
  • Facebook.
  • Одноклассники.
  • МойМир.
  • Google+.
  • Pinterest.
  • Twitter.
  • Blogger.
  • Delicious.
  • Digg.
  • Reddit.
  • Evernote.
  • LinkedIn.
  • Livejournal.
  • Pocket.
  • Qzone.
  • Renren.
  • Sina Weibo.
  • Surfingbird.
  • Tencent Weibo.
  • Tumblr.
  • Viber.
  • WhatsApp.
  • Skype.
  • Telegram.

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

Автоматическое размещение кнопок

Если вы не готовы самостоятельно редактировать код сайта и разбираться в его нюансах, настройте кнопки автоматически через плагины. Готовые решения разработаны практически для всех CMS и их легко найти в магазинах платформ. Чтобы добавить плагин для WordPress, перейдите в административной панели в раздел «Плагины» и нажмите кнопку «Добавить новый». В поле поиска введите запрос shares likes.
Плагины лайков для WordPress
Рассмотрим несколько плагинов для примера.
#1

Easy Social Share Buttons

Плагин Easy Social Share Buttons​ для WordPress
Easy Social Share Buttons — это платный плагин, который поддерживает более 40 социальных сетей. Его преимущество в функциональности. Он позволяет разместить бар кнопок в любом месте, использовать счетчик подписчиков, отслеживать метрики эффективности и прочее. Плагин предлагает более 25 различных шаблонов для своих иконок.

Активация плагина стоит $12. После нее можно перейти к настройкам кнопок.
Плагин Social Sharing для WordPress
Выберите первый конфигуратор «Social Networks», чтобы отметить необходимые социальные сети:
Кнопки соцсетей для WordPress
В меню настроек «Templates & Style» определите внешний вид иконок, то есть шаблон, который лучше всего будет смотреться на веб-сайте:
Настройка кнопки лайка для WordPress
С помощью раздела «Share Counters» установите счетчик, который будет фиксировать количество пользователей, сделавших репост, если вам это необходимо:
Счетчик лайков в соцсетях для WordPress
В меню «Analytics» при необходимости можно установить отслеживание лайков и шейров. Отрегулируйте позицию иконок на сайте в разделе «Where to Display»:
Позиция счетчика лайков и шейров для WordPress
#2

Proven Strategies To Automate Your Ecommerce Growth

Proven Strategies To Automate Your Ecommerce Growth или SUMO — бесплатный плагин, который содержит плавающий или статический бар с кнопками социальных сетей.
Плагин SUMO для WordPress
После установки зарегистрируйтесь, чтобы активировать плагин. Введите
e-mail и пароль:
Регистрация в SumoMe
Пройдя регистрацию, авторизуйтесь и зайдите в личный кабинет плагина. Настройте кнопки в меню «Smart Bar».
Smart Bar в плагине SUMO для WordPress
Плагин дает возможность показать кнопки пятью способами. Полистайте варианты шаблонов, выберите подходящие конфигурации и сохраните настройки.
Кнопки поделиться в соцсетях для сайта на WordPress
#3

AddToAny Share Buttons

Плагин AddToAny Share Buttons для WordPress
AddToAny Share Buttons имеет подобный функционал, что и предыдущие плагины. Отличие в том, что он поддерживает более 90 социальных сетей, сообществ и услуг. Установите плагин по стандартной схеме. Перейдите к настройкам:
Настройка плагина AddToAny Share для WordPress
Настройка лайков в плагине AddToAny Share
Настройте по своему вкусу размеры иконок, их расположение на сайте, стиль. Сохраните изменения.

Заключение

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

Упоминания в социальной сети — это выход на свою целевую аудиторию непрямым способом. Ссылки в соцсетях подсказывают поисковому роботу, что публикация сайта «Х» отмечена пользователями, а значит его контент полезен. Устанавливают кнопки:

  • вручную, встраивая фрагмент кода в страницы;
  • автоматически, используя плагины.

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

Автоматическое внедрение кнопок реализуется с помощью плагинов, например, для WordPress. Разработок существует множество, мы рассмотрели следующие:

  • Easy Social Share Buttons — это платный плагин стоимостью $12. Он работает с разными соцсетями и прост в настройке. Основное преимущество — 25 готовых шаблонов like and share button;

  • Proven Strategies To Automate Your Ecommerce Growth или SUMO — это бесплатный плагин, который устанавливается через магазин. В функционале предусмотрена установка иконок для лайков и шейров, шаблон регулируется в настройках;

  • AddToAny Share Buttons работает с более чем 90 соцсетей, услуг и сообществ. Задайте размеры и стили в меню и сохраните результат.
Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

3.5 из 5 на основе 2 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов