Социальные кнопки на сайте WordPress

Социальные кнопки на сайте WordPress

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

Зачем нужны социальные кнопки

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

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

Разновидности кнопок:

  • Нравится + иконка соцсети – позволяет посетителям осуществлять оценку статьи. На иконке отображается социальная сеть, через которую пользователь голосует. Основные ресурсы: ВКонтакте, Facebook и Одноклассники – в них имеется возможность поставить «Лайк» или «Нравится». Данный тип кнопок не влияет на поисковое продвижение и носит исключительно рейтинговый характер. Если навести указатель на одну из иконок, появится окошко с изображениями аватаров проголосовавших людей. Обращаем внимание, что для отметки «Мне нравится» пользователь должен быть авторизирован в советующей социальной сети.
  • Поделиться (Репост) – позволяет опубликовать конкретный материал сайта на своей странице в социальной сети. Кликнув по нужной иконке, подтверждается действие размещения ссылки в аккаунте пользователя, которую также можно отправить в личном сообщении. Эти действия влияют на продвижение ресурса и привлечение новых посетителей.
  • Следовать (Подписаться) – содержит ссылки на социальные страницы вашего ресурса. Позволяет посетителям подписаться на них и быть в курсе последних событий сайта. После этих действий, в новостной ленте, для подписчиков будут показываться паблике.

Установка кнопок без плагинов

Установка кнопок без плагинов

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

Вертикальный блок

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

Вот пример кода, рассмотренный для Facebook:

<!– SocialButtons –>
<span style=”display:scroll;position:fixed;bottom:280px;left:50px;”>
<noindex>
<a target=“blank” rel=“nofollow” href=”http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>“>
<img src=” http://site.ru/f.png” width=“50” height=“50” title=“Рассказать на Фейсбук” alt=“Опубликовать в Фейсбук”>
</a>
</noindex>
</span>
<!– SocialButtons –>

<!– SocialButtons –> – определяет место размещения блока. Не несет никакой функции, позволяет находить блоки в коде сайта. Тег содержит запись, которая является следующей функцией: блок прилипнет к текущей позиции посетителя и не будет исчезать во время скроллинга страницы. Свойства bottom и left устанавливают положение кнопок по нижнему левому краю. Для изменения их расположения, следует изменить значения.

Чтобы разместить несколько кнопок социальных сетей, необходимо изменить значение bottom, отнимать от него высоту иконки – 50px. Так как они могут налаживаться одна на вторую. Для каждой последующей значение следует изменять. Обязательно нужно скрывать тегом и атрибутом rel=“nofollow” ссылки кнопок от индексации. Для того, чтобы разместить другую социальную сеть или добавить еще несколько, следует изменить ссылку в href. Получаем образец, который после заполнения параметров установит кнопки на сайте.

<!– SocialButtons –>
<span style=”display:scroll;position:fixed;bottom:{значение};left:{значение};”>
<noindex>
<a target=“blank” rel=“nofollow” href=”{ссылка на соцсеть}<?php the_permalink(); ?>“>
<img src=“{ссылка на картинку кнопки}” width=“{значение}” height=“{значение}” title=“{Поделиться, рассказать на …}” alt=“{Поделиться, рассказать на …}”>
</a>
</noindex>
</span>
<!– SocialButtons –>

Чтобы разместить социальные кнопки в WordPress в конце контента, следует зайти в single.php, который находится в директории с активной темой.

Добавляется следующий код:

<?php the_content(); ?>
  <div class=“sociallinks”>
    <p>Поделитесь статьей </br>
      <a title=“Добавить в Twitter” class=“ang_tw” href=“http://twitter.com/intent/tweet?text=RT @AlexeyVLFF <?php the_title(); ?>: <?php the_permalink(); ?> target=“_blank” rel=”nofollow”></a>
      <a title=“Поделиться в Facebook” class=“ang_fb” href=“http://facebook.com/sharer.php?url=<?php the_permalink(); ?> target=“_blank” rel=“nofollow”></a>
      <a title=“Поделиться в Google +” class=“ang_gp” href=“http://plus.google.com/share?url=<?php the_permalink(); ?> target=“_blank” rel=“nofollow”></a>
      <a title=“Поделиться ВКонтакте” class=“ang_vk” href=“http://vkontakte.ru/share.php?url=<?php the_permalink(); ?> target=“_blank” rel=“nofollow”></a>
      <a title=“Опубликовать в LiveJournal” class=“ang_lj” href=“http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?> target=“_blank” rel=“nofollow”></a>
  </p>
</div>
<div class=“socialbutton”>
  <p>Приглашаю присоединиться ко мне в социальных сетях</br>
    <a title=“Twitter” class=“ang_tw” href=“ссылка” target=“_blank” rel=“nofollow”></a>
    <a title=“Facebook” class=“ang_fb” href=“ссылка” target=“_blank” rel=“nofollow”></a>
    <a title=“ВКонтакте” class=“ang_vk” href=“ссылка” target=“_blank” rel=“nofollow”></a>
    <a title=“Одноклассники” class=“ang_ok” href=“ссылка” target=“_blank” rel=“nofollow”></a>
    <a title=“Мой мир” class=“ang_mm” href=“ссылка” target=“_blank” rel=“nofollow”></a>
    <a title=“Google +” class=“ang_gp” href=“ссылка” target=“_blank” rel=“nofollow”></a>
    <a title=“Live Journal” class=“ang_lj” href=“ссылка” target=“_blank” rel=“nofollow”></a>
   </p>
</div>

Также, необходимо прописать стили, позволяющие оформить внешний вид кнопки их местоположение. Для это в конце файла style.css (расположен в директории темы) добавьте свои правила.

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

Pluso

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

Share42

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

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

Технология, разработанная в Яндексе для создания блоков соцсетей – доступно более 20. Из параметров: возможность выбрать размер кнопок, детали отображения и наличие счетчика. После все необходимых настроек нужно скопировать код и добавить в шаблон темы.

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

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

Easy Social Share Buttons

Один из лучших плагинов для быстрой интеграции кнопок социальных сервисов. Предоставляет более 28 мест размещений (определяет автоматически), хорошо оптимизирован, что значительно снижает нагрузку на сервер. Имеет более 55 различных тем оформления, что позволит подобрать внешний вид кнопок к любому дизайну. Для замены традиционных статичных кнопок имеется более 30 видов анимаций.

Easy Social Share Buttons

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

Стоимость продукта – $19. Более 22000 продаж и средний рейтинг 4,66 показывают, что заявленная стоимость оправдана.

Social Warfare

Social Warfare

Плагин является не таким функциональным и универсальным, как предыдущий. Его ценность – предоставление доступа к различным настройкам по оформлению иконок (более 5000 стилей). Также отмечается высокая производительность расширения, поскольку оно не использует излишних функций и эффектов. Максимально эффективный при минимальном функционале. При этом имеет необходимую для аналитики статистику, возможность защиты контента и использование шорткодов. Благодаря открытому коду, разработчики могут вносить все необходимые изменения и модернизации.

На основе отметок «Нравится» можно добавить виждет с самыми популярными постами на основе голосов посетителей. Стоимость продукта – $29. Он попал в список благодаря своей производительности и стилистическому минимализму.

Up To Like Share Buttons

Up To Like Share Buttons

Популярный бесплатный плагин, который может посостязаться с некоторыми платными по функциональности и оформлению. Вебмастерам доступна полная настройка социальных кнопок на сайте WordPress – их внешний вид, анимации, наличие счетчиков и размер блоков. Любое место для размещения (автоматическая установка или посредством вставки кода в требуемую часть сайта). Панель управления содержит все необходимое: основное окно настроек, внешний вид, статистика и инструкции.

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

AddToAny Share Buttons

AddToAny Share Buttons

Более 400 тысяч установок, регулярные обновления и потрясающая производительность. Позволяет устанавливать социальные кнопки всех популярных сервисов. Имеются следующие возможности настроек:

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

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

P/S

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