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

Добавление каждой кнопки соц сети по отдельности

Кнопка поделиться Вконтакте

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

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

Кнопка поделиться Facebook

По аналогии с предыдущим примером даю ссылку для получения кнопки и привожу скриншот настроек:

Настройки не сложные, но написано на более профессиональном уровне. Главное подберите стиль и скопируйте код для вставки на сайт.

Все аналогично, переходим на сайт, подбираем кнопку, копируем код.

Кнопка поделиться Google+

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

Твиттер так же предоставляет широкие настройки для кнопок. Ссылка тут, скрин ниже:

Кнопки социальных сервисов

Половина дела сделана — иконочный шрифт подключен к сайту, осталось создать кнопки и вывести через них иконки социальных сервисов.

HTML разметка кнопок социальных сервисов

/*Кнопка Яндекс*/
<a href="#" class="social-button ico-yandex"></a>
/*Кнопка Google+*/
<a href="#" class="social-button ico-googleplus"></a>
/*Кнопка "Одноклассники"*/
<a href="#" class="social-button ico-ok"></a>
/*Кнопка Мейл.ру*/
<a href="#" class="social-button ico-mail"></a>
/*Кнопка Вконтакте (малый логотип)*/
<a href="#" class="social-button ico-vk-B"></a>
/*Кнопка Вконтакте (международный логотип)*/
<a href="#" class="social-button ico-vk-vk"></a>
/*Кнопка Facebook*/
<a href="#" class="social-button ico-facebook"></a>
/*Кнопка Twitter*/
<a href="#" class="social-button ico-twitter"></a>
/*Кнопка Instagram*/
<a href="#" class="social-button ico-instagram"></a>
/*Кнопка Youtube*/
<a href="#" class="social-button ico-youtube-3"></a>
/*Кнопка Youtube (значок)*/
<a href="#" class="social-button ico-youtube"></a>
/*Кнопка Vimeo*/
<a href="#" class="social-button ico-vimeo"></a>
/*Кнопка Twich*/
<a href="#" class="social-button ico-twitch"></a>
/*Кнопка Whatsapp*/
<a href="#" class="social-button ico-whatsapp"></a>
/*Кнопка Skype*/
<a href="#" class="social-button ico-skype"></a>

CSS стили кнопок социальных сервисов

.social-button {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	border-radius: 50%; //скругление углов кнопки
	width: 54px; //размер кнопки по ширине
	height: 54px; //размер кнопки по высоте
	background: #118EC7; //цвет кнопки в статичном виде
	border: none;
	line-height: 54px;
	color: #fff; //цвет иконки в статичном виде
	font-size: 27px; //размер иконки
	text-align: center;
	/* Скорость анимации */
	-webkit-transition: box-shadow .2s ease-out, background-color .2s ease-out;
	-moz-transition: box-shadow .2s ease-out, background-color .2s ease-out;
	transition: box-shadow .2s ease-out, background-color .2s ease-out;
	margin-bottom: 10px;
	-webkit-user-select: none;
	}
	
.social-button:hover,
.social-button:focus {
	text-decoration: none!important;
	background-color: rgba(255, 255, 255, 0); //фон кнопки при наведении курсора
	color: #118EC7; //цвет иконки при наведении курсора
	text-decoration: none;
	outline: none;
	box-shadow: 0 0 0 3px #118EC7; //цвет рамки при наведении курсора
	border: none
	}

Зачем добавлять кнопки соцсетей для сайта?

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

Преимущества таких кнопок:

1. Бесплатная реклама вашей статьи.
2. Привлечение дополнительного трафика на сайт.
3. Удобство для пользователя. Так он сможет сделать закладку у себя в соцсети на понравившийся материал и, например, прочитать позже.
4. Увеличение ссылок на сайт и поведенческие факторы. (Для SEO)

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

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

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

С полезностью и преимуществом этих кнопок разобрались. Перейдём к способам их установки. Их, этих способов, скажем, не мало, но ориентируюсь на новичков, а значит, скрипты и уж тем более редактирование кодов задевать не будем. Максимум простоты.

Репосты в социальные сети с помощью api

Каждая популярная соц.сеть имеет свои апи, используя которые, можно самостоятельно реализовать функционал репостов, без применения готовых решений – виджетов. В этой статье будет описано только пять кнопок репостов для самых распространенных социальных сетей.
Api очень простые и использовать их можно без каких-либо предварительных регистраций или запросов в поддержку. Все, что из себя представляют апи, это обычные ссылки с get-параметрами, в которых можно передавать адрес страницы сайта и дополнительную информацию для репоста(заголовок, описание и тд). Но в данном случае будет достаточно только одного параметра – ссылка на страницу. Остальные данные будут передаваться немного другим образом, об этом чуток позже.
Ниже приведены пять ссылок на api каждой их соц.сети:

 https://vk.com/share.php?url=адрес_страницы
 https://www.facebook.com/sharer/sharer.php?u=адрес_страницы
 https://connect.ok.ru/offer?url=адрес_страницы
 https://twitter.com/intent/tweet?url=адрес_страницы
Google plus: https://plus.google.com/share?url=адрес_страницы

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

HTML-код

Добавить кнопки можно и при помощи html-кода. Здесь мы не будем рассматривать самостоятельную разработку скриптов, добавляющих иконки. Лучше мы обратимся к уже готовым конструкторам, которые помогут нам легко сделать свой собственный вариант панели “Поделиться”.

Блок “Поделиться” от Яндекса

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

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

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

После завершения настройки необходимо скопировать содержимое поля “Код” и далее вставить его в нужном месте сайта.

AddThis

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

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

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

Share42.com

После выбора иконок и их размера вы можете выбрать тип кода. Для WordPress и Joomla там есть особые варианты. Для всех остальных CMS – стандартный. Но он, тем не менее, будет работать.

Код также придется вставлять в шаблон страницы.

Кнопки поделится в соц. сетях от самых популярных сервисов

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

Внешний вид блока можно настроить как угодно – просто иконки, иконки со счетчиком репостов или просто иконки уменьшенного размера.

share42.com – тоже мощнейший конструктор, позволяющий выбрать интересующие кнопки и настроить внешний вид блока «Поделиться». Если к сайту подключить библиотеку jQuery, то к кнопкам можно добавить счетчик, который будет подсчитывать количtство поделившихся.

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

share.pluso.ru – я довольно долгое время пользовался именно этими кнопками. Кнопки «Поделиться» от Pluso отлично настраиваются под дизайн сайта. Можно выбрать любые интересующие соц. сети и понравившийся дизайн кнопок.

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

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

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

И вовсе не стоит пугаться этого страшного слова. Добавить кнопку «Поделиться» при помощи API сможет любой, просто повторяйте действия, которые я опишу.

Кнопка «Поделиться» ВКонтакте

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

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

Facebook кнопка «Поделиться»

Кнопка «Поделиться» на фейсбук делается аналогичным образом. Для этого перейдите на , в списке различных кнопок найдите кнопку «Поделиться» и выберете значение «Веб-платформа».

В появившимся конструкторе можете настроить внешний вид кнопки и получить код.

Код будет состоять из двух частей. Первую часть необходимо вставить после открывающего тега <body>. Этим кодом вы включаете SDK для JavaScript.

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

Делаем кнопку «Поделиться» в одноклассниках

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

После этого скопируйте предоставленный код, и вставьте в необходимое место на сайте.

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

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

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

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

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

Нравится + иконка соцсети – позволяет посетителям осуществлять оценку статьи. На иконке отображается социальная сеть, через которую пользователь голосует. Основные ресурсы: VK, и Одноклассники – в них имеется возможность поставить «Лайк» или «Нравится». Данный тип кнопок не влияет на поисковое продвижение и носит исключительно рейтинговый характер. Если навести указатель на одну из иконок, появится окошко с изображениями аватарок проголосовавших людей

Обращаем внимание, что для отметки «Мне нравится» пользователь должен быть авторизирован в советующей социальной сети.
Поделиться (Репост) – позволяет опубликовать конкретный материал сайта на своей странице в социальной сети. Кликнув по нужной иконке, подтверждается действие размещения ссылки в аккаунте пользователя, которую также можно отправить в личном сообщении

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

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

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

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

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

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

<!– SocialButtons –> <span style=”display:scroll;position:fixed;bottom:280px;left:50px;”> <noindex> <a target=“blank” rel=“nofollow” <?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, который находится в директории с активной темой.

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

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

Pluso

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

Share42

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

Блок «Поделиться» от Yandex

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

Избранные результаты

В WhatsApp охотней делятся. Кнопки для WhatsApp и Viber владельцы сайтов устанавливают практически в одинаковой пропорции (43,7% и 43,5% случаев), а вот читатели шарят контент в WhatsApp вдвое чаще, чем в Viber.

За один год Uber потерял из-за мобильного фрода 100 млн $

Рассказываем, как мошенники убивают рекламные бюджеты и как защитить ваше приложение.

Спецпроект

4 кнопки — самая популярная длина набора кнопок у владельцев сайтов. Помимо «ВКонтакте», Facebook и «Одноклассников», чаще других в набор попадает кнопка соцсети Google+. Интересно, что при этом Google+ входит и в топ-4 по числу репостов, слегка опережая Twitter.

«Одноклассники» vs Facebook. Кнопки «Одноклассников» ставят на сайты реже, чем кнопки Facebook, а вот по числу нажатий на «поделиться» пользователи «Одноклассники» впереди.

Ядро «Одноклассников» активнее публикует ссылки на небольшие внешние ресурсы, тогда как на других популярных площадках больше распространена культура репоста внутри самой соцсети. Этот тренд легко заметить, просто заглянув в ленты пользователей.

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

<div>
<a rel="nofollow" target="_blank" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>"><img src="https://foxyforex.ru/wp-content/uploads/2015/10/VKcrystal.png" width="80" height="80" title="Поделиться В Контакте"></a>
<a rel="nofollow" target="_blank" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><img src="https://foxyforex.ru/wp-content/uploads/2015/10/ODcrystal.png" width="80" height="80" title="В Одноклассники"></a>
<a rel="nofollow" target="_blank" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="https://foxyforex.ru/wp-content/uploads/2015/10/MRcrystal.png" width="80" height="80" title="Поделиться в Mail.ru"></a>
<a rel="nofollow" target="_blank" href="https://twitter.com/intent/tweet?text=RT <?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter"><img src="https://foxyforex.ru/wp-content/uploads/2015/10/TWcrystal.png" alt="Опубликовать в.twitter.com" width="80" height="80"></a> 
<a rel="nofollow" target="_blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="https://foxyforex.ru/wp-content/uploads/2015/10/FBcrystal.png" width="80" height="80" title="Поделиться в Facebook"></a>
<a rel="nofollow" target="_blank" href="http://feeds.feedburner.com/foxyforexru"> <img src="https://foxyforex.ru/wp-content/uploads/2015/10/RSScrystal.png" width="80" height="80" title="Подписаться!"></a></div>

Кнопки можно менять местами. Достаточно поменять местами их коды.

Что формирует код кнопки?

<a rel= «nofollow» target=«_blank» href=«http://…»> — ссылка на соцсеть. Свойство target=«blank» открывает ссылку в новом окне, чтобы посетители не уходили с сайта.

<img src=«http://…» width=«80» height=«80» title=«Поделиться в …»> — ссылка на иконку соцсети.

Получить адрес ссылок на иконки можно, загрузив картинки по одной на сайт. Ссылка должна иметь примерно такой вид http://название сайта/wp-content/uploads/…/…/iconka.png (или jpeg).

width=«80» height=«80» – ширина и высота картинки. Картинки квадратные, поэтому пропорцию лучше не менять, но можно вместо 80 поставить, скажем, 30.

Title=«Поделиться в …» – отвечает за всплывающую подсказку.

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

Код вертикально расположенных кнопок:

<div class="sharebuttons"> Код кнопки 1 </div>
<div class="sharebuttons"> Код кнопки 2 </div>
<div class="sharebuttons"> Код кнопки 3 </div>

Код для таблицы стиля style.css:

.sharebuttons {
        float: left;
        margin: 0px 20px 20px 0px;
}

Что означают отдельные элементы этого кода?

<div class=»sharebuttons»> — отсылает к правилам форматирования в файле style.css.

float: left – расположение слева. Чтобы было справа напишите float: right

margin: 0px 20px 20px 0px – отступы между кнопками и от кнопочек до элементов снизу. Значения предполагают направления – верх, право, низ, лево. Можно изменить значения своими.

Добавление кнопки соцсетей на сайт с помощью «Яндекса»

Здесь виджеты соцсетей добавляются на интернет-ресурс по следующему алгоритму:

1. Заходим в блок «Поделиться» и добавляем блок иконок без всяких дополнений.
2. Отбираем иконки нужных соцсетей. Например, Twitter предлагается без счетчика, только как иконка. Определяемся с видом блоков и берем снизу от него код для вставки. Результат будет лаконичным и без излишеств.

Подробнее

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

Плагины

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

Также я советую перед любыми изменениями делать резервную копию всех файлов сайта. Потом вы сможете легко восстановить его в прежнее состояние.

AddToAny Share Buttons

Один из самых популярных плагинов для размещения кнопок “Поделиться” на страницах сайта с ВП. Расширение имеет интуитивно понятный интерфейс и множество вариантов этих самых кнопок. Базовую версию можно установить прямо из каталога, за расширенную придется заплатить.

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

Все иконки можно настраивать, выбирать их размер и порядок размещения. Также можно выбрать места, где эти самые иконки будут отображаться. Как правило, их размещают внутри статей и страниц после материала. Но вы можете поставить их в любое другое место, нужно просто изменить параметр “Placement” в настройках.

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

Установить это расширение можно прямо из каталога WordPress. Просто перейдите в “Плагины” – “Добавить новый”, введите название в поле поиска и кликните на кнопку “Установить”, а после на “Активировать”. Параметры плагина можно найти в меню “Настройки” – “СоцЗакладки”.

Social Media Share Buttons & Social Sharing Icons

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

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

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

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

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

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

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

WordPress Share Buttons Plugin – AddThis

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

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

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

Также вы можете пользоваться шорткодами, настраивая отображение того или иного набора иконок для каждой статьи или страницы. То же самое можно делать при помощи специального окна “AddThis Tools”, которое появится в каждой таксономии.