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

Приветствую вас на страницах моего блога!

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

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

Для чего нужны кнопки социальных сетей разобрались. Теперь разберемся со способами реализации данного «инструмента раскрутки» на страницах вашего блога. В данной статье рассмотрим два способа создания панели кнопок социальных сетей: с использованием плагина Social Share Buttons и с использованием специального сервиса Share 42.

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

Плагин социальных кнопок для WordPress

Данный способ заключается в том, что вы просто устанавливаете на ваш движок WordPress специальный плагин, настраиваете его под себя и радуетесь результату. Как говориться: «пришел, увидел, победил», в нашем случае скорее «нашел, установил, настроил». Я сам сначала установил плагин, но затем решил, что буду стараться больше вникать во все азы и стал избегать утяжеления моего движка дополнительными плагинами, использование которых легко избежать. Так что для этой статьи специально проделаю всю процедуру заново.

Так вот, установив и активировав плагин Social Share Buttons, заходим в его настройки (в админ-панели пункт Share Buttons):

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

Здесь интерес для нас представляют следующие настройки:

Главные настройки:

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

  • Текст перед социальными кнопками — можно указать текст, который будет отображаться перед блоком кнопок социальных сетей;
  • Позиция кнопок соц. сетей — укажите желаемое положение блока кнопок: слева, по центру или справа;
  • Где показывать кнопки — задайте где будет отображаться блок кнопок;
  • Исключить страницы и посты по ID — можно указать ID страниц, на которых не нужно отображать кнопки социальных сетей.

Share настройки:

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

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

Like настройки:

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

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

  • Сортировка кнопок Like — задаем порядок отображения кнопок Like;
  • Включение/Отключение социальных кнопок — поставьте галочки напротив тех социальных сетей, кнопки которых хотите видеть в панели;
  • Также в данном пункте можно настроить внешний вид и некоторые функции кнопок Like социальных сетей Mail.ru, Facebook, ВКонтакте.

Далее сохраняем все внесенные изменения, смотрим результат:

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

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

Кнопки социальных сетей для WordPress без плагина

Разберем необходимые действия по порядку:

Для начала переходим на сайт Share 42:

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

На вкладке генератор мы и будем производить основные действия, а именно:

  • выбираем размер иконок сервисов (16×16, 24×24, 32×32):

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

  • выбираем социальные сервисы, которые будут отображаться в вашей панели, а также кое-какие дополнительные кнопки (RSS, Избранное, Напечатать и т.д.):

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

  • выбираем тип панели с кнопками (горизонтальная или вертикальная);
  • можно ограничить количество показываемых иконок, остальные будут видны при прокрутке;
  • выбираем тип кодировки: UTF-8;
  • если на вашем сайте не подключен скрипт jQuery, то нужно снять галочку с соответствующего пункта;
  • далее скачиваем каталог со скриптом:

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

  • размещаем его в корне сайта на хостинге, после чего в соответствующем поле прописываем путь к нему:

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

  • выбераем тип CMS (в нашем случае WordPress);
  • копируем полученный сгенерированный код панели кнопок социальных сетей:

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

  • вставляем его с помощью текстового редактора (рекомендую использовать notepad++) в файл single.php. Это означает, что наша панель будет отображаться на страницах ваших записей, на главной странице ее не будет;
  • делаем настройки CSS стилей, для чего копируем соответствующий код и вставляем его в конец файла style.css.

Все готово!

У меня получившаяся панель выглядит следующим образом:

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

Если что-то отображается не так, как хотелось, то просто нужно подобрать правильные стили CSS для панели кнопок социальных сетей в файле style.css.

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

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

До скорых встреч. С уважением, Владимир Денисов!

Комментарии 3

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

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