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

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

Приветствую вас, уважаемы посетители!

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

Если у вас ещё нет социальных кнопок на сайте, то обязательно дочитайте статью до конца!

Для чего нужны кнопки социальных сетей?

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

Социальные сети играют немаловажную роль в поисковом продвижении:

  • Во-первых, соцсети очень активно индексируются поисковыми системами и если ссылки на ваш сайт будут в социальных сетях, то они быстрее проиндексируются.
  • Во-вторых, сегодня поисковые системы уделяют большое значение поведенчискому фактору, то есть тому как ведёт себя посетитель у вас на сайте (сколько времени он там провёл, на какие кнопки нажал, сколько страниц просмотрел, куда перешёл с вашего сайта и т.д.) поэтому когда поисковый робот видит что люди делятся вашей статьеёй в соцсетях то он делает для себя вывод что данная статья является полезной. И ваш сайт становится более значимым в глазах поискового робота.
  • В-третьих, когда человек нажимает на кнопку «поделиться» то ссылка на ваш сайт сразу появляется на его странице в соцсети и её видет все его друзья и могут перейти по ней.

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

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

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

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

  • Поделиться (share buttons).С их помощью пользователи могут сообщить своим друзьям о вашем блоге либо о какой-то отдельной статье, разместив запись у себя на странице соцсети, что позволяет привлечь новых посетителей, что по своей сути, является, бесплатной рекламой вашего интернет-проекта.
  • Подписаться (follow buttons). Они позволяют пользователям перейти к нам в группу или на страницу в одной из социальных сетей, где они могут, при желании, подписаться на новости нашего проекта. Это дает возможность информировать своих пользователей, через соц. сети, о появлении нового контента.

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

Сегодня мы рассмотрим способы добавления панели соц. сетей для сайта на WordPress с русскими социальными сетями.

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

  • Первый способ — с помощью онлайн-сервисов, таких как: Share42, AddThis, ShareThis, Pluso.

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

  • Второй способ — использовать специальные плагины. Их, конечно же, большое множество. Вот одни из наиболее распространенных: Fixed Social buttons, Simple Social Buttons, Social Share Buttons for WordPress, UpToLike, Socialize It!

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

Добавление соц. панели с помощью Share42

Настройка панели выполняется всего за несколько шагов:

  1. 1.Для установки панели нам необходимо перейти на сайт Share42.
  2. 2.Выбираем нужные нам социальные сети, а так же указываем размер иконок:
  3. добавление кнопок социальных сетей
  4. 3.Далее, настраиваем свою панель:
    1. 1)Выбираем тип нашей панели (вертикальная или горизонтальная).
    2. 2)Выбираем кодировку UTF-8.
    3. 3)Соглашаемся или нет на размещение иконки Share42
    4. 4)В случае если у вас сайт сделан на WordPress, ставим галочку в пункте «К вашему сайту подключен JQuery»
  5. Настройка панели share42

    Так же, можно посмотреть, что у нас получается нажав на «Посмотрите, как это будет выглядеть».

  6. 4.Нажимаем кнопку «Скачать готовый скрипт», после чего, следуя инструкциям, устанавливаем скрипт себе на страницу:
    1. 1)Разархивируем архив.
    2. 2)При помощи FTP-клиента загружаем папку Share42 в корневой каталог вашего сайта на хостинге.
    3. 3)Указываем путь к папке.
    4. 4)Ставим галочку напротив CMS на базе которой сделан сайт. В нашем случае WordPress.
    5. 5)Вставляем в шаблон страницы сгенерированный код.
    6. 3

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

дополнительные параметры панели share42

Куда вставлять код?

  • Если вы хотите чтобы эти кнопку выводились под текстом статей, то данный код вам нужно будет вставить в шаблон single.php где то в самом конце.
  • Если нужно вывести эти кнопки на всех страницах сайта, то кроме single.php нужно вставить код и в шаблон page.php
  • Внимание! Возможно при добавлении в эти файлы кнопки соцсетей могут высветиться не в том месте, где вам нужно или не высветиться вообще. Здесь всё зависит от особенностей вашей темы и её структуры. В таком случае нужно будет поэкспериментировать с добавлением кода в другие части шаблона single.php и page.php.
  • Для вывода социальных кнопок в подвале сайта или как плавающую вертикальную панель – вставляем предложенный код в файл footer.php вашей темы.
  • Для того чтобы открыть эти файлы подключаемся к сайту по ftp и заходим в папку:
    wp-content – thems – папка с названием вашей темы.
  • Для того чтобы выровнять эти кнопки по центру страницы нужно в файл style.css вашей темы прописать:

Все готово! Что получиться, вы можете увидеть в конце статьи :-)

Установка плагина Social Share Buttons for WordPress

Этот плагин для социальных кнопок на WordPress переведен на русский язык и, я думаю, у вас не возникнет трудностей с его установкой. Все достаточно просто и понятно.
Для его установки и настройки нам понядобится проделать несколько шагов:

  1. 1.Для начала необходимо в административной панели сайта WP выбрать пункт Плагины => Добавить новый. Далее, при помощи поиска найти, установить, и активировать плагин Social Share Buttons for WordPress.
  2. 2.В боковом меню админпанели появиться пункт «Share Buttons», при нажатии по нему нам доступно три пункта меню:
    1. 1)Главные настройки
    2. 2)Share настройки
    3. 3)Like настройки
  3. 3.Выбрав «Главные настройки» обязательно настраиваем:
    1. 1)Текст, который будет отображаться перед нашей панелькой
    2. 2)Позицию кнопок соц. сетей. Где выбираем положение панели по вертикали и горизонтали, а так же есть возможность исключить типы страниц, где не нужно размещать панель.
    3. настройка плагина ocial Share Buttons
  4. 4.Переходим в «Share настройки». Здесь делаем следующее:
    1. 1)В разделе «Включение/Отключение социальных кнопок» снимаем галочки с ненужных нам иконок.
    2. 2)Выбираем стиль оформления иконок.
    3. 3)В разделе «Сортировка кнопок», путем перетаскивания, располагаем кнопки в нужной нам последовательности.
    4. 4)Задаем отступы сверху и снизу панели.
    5. настройка ocial Share Buttons
  5. 5.Выбираем «Like настройки», включаем и настраиваем нужные нам счетчики «лайков»
  6. настройка кнопок лайков

    Обратите внимание! Для того, чтобы работали кнопки «лайков» Facebook и Вконтакте вам необходимо указать свой API ID. Для этого вам необходимо перейти по ссылкам приведенным над полями вода API ID. После прохождения регистрации вам будут выданы уникальные номера.

    настройка счетчиков лайков

У нас должно получиться как то так:

кнопки социальных сетей ocial Share Buttons

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

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

Кстати, не забудьте испытать кнопки социальных стей в действии и нажать на несколько из них! Блок с этими кнопками вы сможете найти прямо под этой статьёй :)

Так же вы можете подписаться на новости блога и получать статьи себе на почту.
Спасибо за то что наведались ко мне в гости и до встречи в следующих статьях!

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

13 комментариев

  1. Спасибо, Артем! Все получилось, кнопки отобразились. Единственное, что они еще отображаются под каждым анонсом статьи на главной. Как бы их оттуда убрать, чтобы они выводились только при открытии всей записи?

    • Здравствуйте!

      Какой способ вывода кнопок Вы использовали: с плагином или без?

      И ещё вопрос: а почему Артём?

  2. Юля, здравствуйте. А возможно ли при установки кнопок первым способом добавить счетчики лайков?

    • Здравствуйте, Людмила!
      В настоящий момент этот сервис не даёт такой возможности. Возможно в будущем это изменится :)
      Это можно реализовать при помощи второго способа добавления социальных кнопок.
      Если по этому способу будут возникать вопросы — пишите комментарии, я на них отвечу.

  3. Артём, подскажите пожалуйста какой плагин можно использовать или как сделать кнопки я в социальных сетях ?? Мне нужно не то что описывается в статье, то есть чтобы пользователь не делился статьёй в своей сети а мог быстро по красивой кнопочке перейти на мой профиль в фейсбуке, твиттере, инстаграмме.. Спасибо! Спасибо за отличный блог, читаю с удовольствием!

    • Здравствуйте! А почему Артём? Для Вашей цели можно просто добавить несколько иконок соцсетей в виде картинок и к каждой из картинок прикрепить соответствующие ссылки на Ваши страницы в соцсетях.

  4. Здравствуйте, уважаемый Администратор сайта impuls-web.ru

    Меня зовут Николай, я периодически посещаю Ваш сайт и являюсь участником партнерской программы – ProfLinks.ru

    Пользуясь моментом, хотел бы предложить Вам воспользоваться продвижением Вашего сайта impuls-web.ru при помощи размещения 1050 вечных ссылок за 550 руб. В данной услуге проводится размещение ссылок в тематических статьях с тИЦ от 150. Услуга включает подробный отчет.

    • Здравствуйте! Извините, но подобные предложения меня не интересуют!

  5. I appreciate you sharing this article.Much thanks again. Really Great.

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

  7. Здравствуйте, Юлия.

    Очень интересный и познавательный блог Вы ведете!

    С Вашей помощью много сделал для своего блога, но вот с кнопками соцсетей бьюсь, ничего не получается. установил плагин Social Share Buttons for WordPress, сначала все было отлично, но потом пропала кнопка ВК, и никакими судьбами не возвращается, делаю кнопки share42, сервис не видит содержимого папки в корне сайта. Может что-то подскажете дельное? Кака проблему решить, или где искать причину? Сейчас плагин стоит. кнопки выведены в конце записей. И еще маленькая проблемка, при наведении курсора на кнопки показана лупа, а раньше была рука с указательным пальцем) как исправить?

    Заранее благодарен за ответ и за помощь.

    С уважением. Евгений.

    • Здравствуйте, Евгений!
      Интересная у Вас проблема! Сходу не скажу, нужно более детально смотреть и анализировать Ваш сайт.

  8. Здравствуйте Юлия! Прочитал вашу статью — насколько все просто и понятно! Чувствуется, что преподавательская работа не прошла бесследно. К сожалению информатику в школе я не учил. Не было тогда такого предмета (мне скоро исполнится 67). Несмотря на возраст и отсутствие знаний все-таки решился создать свой сайт. Но возникла масса проблем. Про кнопки соц. сетей: на сайте они есть, но по всей вероятности не активированы. Если я попытаюсь установить плагин Social Share Buttons for WordPress, то у меня не возникнет 2-й ряд таких же кнопок на странице? И еще. В случае удачной установки эти кнопки будут уже в рабочем состоянии? Т.е. никаких кодов никуда вставлять не надо? (Я их просто не смогу вставить). Сайт — http://sedmoydesjatok.ru/. Пожалуйста ответьте на мою почту.

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

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

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif