Кнопки поделиться в соцсетях для сайта: как установить и изменить по своему вкусу

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

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

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

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

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

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

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

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

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

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

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

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

<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 – отступы между кнопками и от кнопочек до элементов снизу. Значения предполагают направления – верх, право, низ, лево. Можно изменить значения своими.

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

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

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

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

Подробнее

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

В чём преимущество собственных социальных кнопок перед сервисами и плагинами

1. Безусловно, неоспоримым фактором является скорость загрузки сайта. Так, к примеру, сервис PLUSO, который я использую на блоге, при лучшем раскладе прибавляет к загрузке 633 миллисекунды.

Скорость загрузки

А в этом блоке используются лишь необходимые изображения социальных кнопок, объединённые в css спрайты. Все стили сведены к минимуму. Плюс простой каркас html.

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

Нет внешних ссылок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как создать фиксированную социальную панель

Шаг 1) добавить HTML:

Пример

<!— Load font awesome icons —><link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»><!— The social media icon bar —><div class=»icon-bar»>  <a href=»#» class=»facebook»><i class=»fa
fa-facebook»></i></a>   <a href=»#» class=»twitter»><i class=»fa fa-twitter»></i></a>
  <a href=»#» class=»google»><i class=»fa fa-google»></i></a>  
<a href=»#» class=»linkedin»><i class=»fa fa-linkedin»></i></a>  <a
href=»#» class=»youtube»><i class=»fa fa-youtube»></i></a> </div>

Шаг 2) добавить CSS:

Пример

/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen)
*/.icon-bar {  position: fixed;  top: 50%;  -webkit-transform:
translateY(-50%);  -ms-transform: translateY(-50%); 
transform: translateY(-50%);}/* Style the icon bar links */
.icon-bar a {  display: block; 
text-align: center;  padding: 16px;  transition: all 0.3s
ease;  color: white;  font-size: 20px;}/* Style
the social media icons with color, if you want */.icon-bar a:hover { 
background-color: #000;}.facebook {  background: #3B5998; 
color: white;}.twitter {  background: #55ACEE; 
color: white;}.google {  background: #dd4b39;  color: white;}.linkedin
{  background: #007bb5;  color: white;}.youtube { 
background: #bb0000;  color: white;}

Совет: Перейдите в наш CSS положение учебник, чтобы узнать больше о позиционировании.

❮ Назад
Дальше ❯

Кнопки социальных сетей от uSocial.pro

Быстро глянул исходный код, погуглил и обнаружил авторский сайт — https://usocial.pro, на котором можно было бесплатно залогиниться через соцсети и сгенерировать кнопки основных соцсетей: Вконтакте, Google+, Твиттер, Одноклассники и т.п.

Интерфейс отличный: все на русском, интуитивный, разберется даже школьник. Приятно, когда все продумали до тебя — нет ничего лишнего, в то же время все что требуется 99% сайтам, присутствует и настраивается в два клика.

Особенно порадовала возможность делать именно «плавающие» кнопки соцсетей и при этом выбирать их положение: слева, справа и т.п.

Размещается код стандартно на сайте перед закрывающим тегом </body>, для этого понадобится доступ по FTP и знать, в каком файле у вас находится «подвал сайта», в WordPress это обычно footer.php в папке с шаблоном, уверен, что никаких проблем с добавлением возникнуть ни у кого не должно.

Добавление кнопки соцсетей на сайт с помощью CSS

Для корректной работы виджетов добавляем код CSS:

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

.social a {

text-align: center;

width: 48px;

height: 48px;

float: left;

background: #fff;

border: 1px solid #ccc;

box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);

border-radius: 24px;

margin: 0 10px 10px 0;

padding: 6px;

color: #000;

}

Подробнее

• .youtube a:hover {background: #c4302b; color: #fff;}
• .twitter a:hover {background: #00acee; color: #fff;}
• .instagram a:hover {background: #3f729b; color: #fff;}
• .facebook a:hover {background: #3b5998; color: #fff;}
• .skype a:hover {background: #00aff0; color: #fff;}
• .vk a:hover {background: #5d84ae; color: #fff;}
• .odnoklassniki a:hover {background: #f93; color: #fff;}
• .pinterest a:hover {background: #c8232c; color: #fff;}
• .telegram a:hover {background: #249bd7; color: #fff;}
• .whatsapp a:hover {background: #50b154; color: #fff;}
• .dropbox a:hover {background: #1087dd; color: #fff;}

Первая строчка — это подключение через @import FontAwesome 4.7.0., который является иконочным шрифтом. Эту строчку можно удалить, если иконочный шрифт уже подключен к веб-ресурсу.

Код CSS для кнопок включается в файл CSS-шаблона интернет-ресурса. При этом строго оговоренного места для добавления CSS-кода нет. Его можно расположить с новой строчки внизу CSS-файла.

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

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

Easy Social Share Buttons

К плагину – (Easy Social Share Buttons)

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

К тому же, система позволяет использовать социальные кнопки во всплывающих окнах, виджетах, интегрировать в различные элементы сайта. Самое интересное – доступно сплит-тестирование, для определения наиболее эффективного оформления блоков. Имеется полноценная статистика по количеству репостов и подписок. Плагин совместим с любыми темами, системами электронной коммерции и позволяет использовать 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 тысяч установок, регулярные обновления и потрясающая производительность. Позволяет устанавливать социальные кнопки всех популярных сервисов. Имеются следующие возможности настроек:

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

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

Итог

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

Как установить кнопку Like (Мне нравится) от Facebook

Прежде, чем установить «Мне нравится» (Like), необходимо ее создать на соответствующей странице Facebook. Для этого переходим на страницу где видим следующее:

В основном все понятно, но некоторые пункты требуют пояснения.

• URL to Like — это первое поле, куда мы что-то можем написать. Здесь следует указывать ссылку, на которую будут вести все Like. Если же кнопка у Вас будет установлена «сквозняком» по всему сайту, то лучше это поле оставить пустым: в этом случае ссылка будет автоматически браться на статью, где была нажата. Так сделано на большинстве сайтов.
• Send Button (XFBML Only) — довольно новая функция, которая позволяет отправить сообщение своему другу или знакомому сразу с посещаемого в данный момент сайта, т.е. Вашего. Насколько она нужна — решать Вам. Скажу, что работать она будет на Вашем сайте, если подключена библиотека JavaScript SDK.

Остальные пункты понятны сразу из пояснений на картинке выше. Сверху сразу смотрим результат выбора кнопки. Как только все настроили — нажимаем Get Code (внизу картинки) и получаем код, который необходимо установить себе на сайт. К примеру код, который получился у меня:

Код из верхнего окошка (цифра 1) необходимо поместить в Ваш файл шаблона в пределах тега body (подчеркнуто красным). Facebook рекомендует это сделать в самом начале, поэтому открываем файл header.php (чаще всего здесь в шаблонах находится открывающий body) и вставляем весь код из первого окошка сразу после него.

Код из второго окошка отвечает непосредственно за отображение кнопки «Мне нравится» (Like). Поэтому подбираем место по своему усмотрению, но его обычно устанавливают перед статьей, либо после нее. Чтобы это сделать, нам нужно будет открыть файл single.php (если такого нет, то смотрите какой отвечает за вывод информации постов) и вставить предложенный код №2 в нужное место (обычно перед или после <?php the_content(); ?>).

Плагины

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

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

AddToAny Share Buttons

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

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

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

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

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

Social Media Share Buttons & Social Sharing Icons

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

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

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

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

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

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

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

WordPress Share Buttons Plugin – AddThis

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

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

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

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

Код JavaScript для шарингов

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

<input value="ВКонтакте" type="button" class="share_btn" data-social="vk"> 
<input value="Facebook" type="button" class="share_btn" data-social="fb"> 
<input value="Одноклассники" type="button" class="share_btn" data-social="ok"> 
<input value="Twitter" type="button" class="share_btn" data-social="tw"> 
<input value="Google+" type="button" class="share_btn" data-social="gp"> 

<hr>

<input value="ВКонтакте c data-url" type="button" class="share_btn" data-social="vk" data-url="https://vk-book.ru/"> 
<input value="Facebook c data-url" type="button" class="share_btn" data-social="fb" data-url="https://vk-book.ru/"> 
<input value="Одноклассники c data-url" type="button" class="share_btn" data-social="ok" data-url="https://vk-book.ru/"> 
<input value="Twitter c data-url" type="button" class="share_btn" data-social="tw" data-url="https://vk-book.ru/"> 
<input value="Google+ c data-url" type="button" class="share_btn" data-social="gp" data-url="https://vk-book.ru/">

В атрибутах data-social хранится название соц.сети, в которую будет сделан репост. А в атрибуте data-url прописана ссылка для репоста. Если data-url отсутствует, то по умолчанию будет использована текущая страница.
И теперь сам js. Для его работы необходима библиотеке jQuery.

$(function(){
	// клик по кнопке шаринга
	$(".share_btn").click(function(){
		var social = $(this).data("social");
		// урл текущей страницы
		var url_share = location.href;
		// если задан атрибут data-url, то берем урл из него
		if (typeof $(this).attr("data-url") !== typeof undefined && $(this).attr("data-url") !== false) {
			url_share = $(this).data("url");		
		}
		// открываем окно для репоста
		share(social, url_share);
	});
});


/**
* Создание нового окна браузера для репоста в соц.сеть
*
* @param string social - социальная сеть, в которую будет сделан репост
* @param string url_share - url страницы, которая будет опубликована в соц.сети
*/
function share(social, url_share){
	// определяем ссылку для нужной соц.сети
	var url_soc = false;
	switch (social) {
		case "vk":
			url_soc = "https://vk.com/share.php?url="+url_share;
			break;
		case "fb":
			url_soc = "https://www.facebook.com/sharer/sharer.php?u="+url_share;
			break;
		case "ok":
			url_soc = "https://connect.ok.ru/offer?url="+url_share;
			break;
		case "tw":
			url_soc = "https://twitter.com/intent/tweet?url="+url_share;
			break;
		case "gp":
			url_soc = "https://plus.google.com/share?url="+url_share;
			break;
	}
	
	// открытие нового окна для шаринга
	if(url_soc){
		// размеры окна
		var width = 800, height = 500;
		// центруем окно
		var left = (window.screen.width - width) / 2;
		var top = (window.screen.height - height) / 2;
		// открываем окно
		social_window = window.open(url_soc, "share_window", "height=" + height + ",width=" + width + ",top=" + top + ",left=" + left);
		// устанавливаем на окно фокус
		social_window.focus();
	}
}

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

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

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

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

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

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

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

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

Альтернативный вариант настройки кнопок «Поделиться»

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

Кнопки «Поделиться» из сервиса pluso.ru

1. Выберем кнопки, который нам нужны, на Facebook, Вконтакте и Google+, прочие кнопки удалим.

2. Ниже можно подобрать параметры отображения кнопок.

3. Ещё ниже есть поля для ввода заголовка и краткого описания страницы. Эти поля мы не будем заполнять, так как эти данные уже введены в настройках страницы, раздел «Социальные сети».

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

5. Кнопки «Поделиться» от сервиса pluso.ru отображаются по левой стороне. Выровнять их можно добавив соответствующее CSS свойство, но если обойтись более простым вариантом, то задать определенное расположение элементу можно используя виджет «Колонки».

Кнопки «Поделиться» из сервиса usocial.pro

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

2. В личном кабинете нажмем на кнопку «Создать набор», выберем «Кнопки «Поделиться»» и настроим параметры отображения кнопок.

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

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

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

Выводы и итоги

Сервис получился неожиданно «взрослым», продуманным, профессиональным. Возникает желание его использовать — а что еще нужно от сервиса.

Что можно было бы пожелать разработчикам? Лично мне не хватило в мобильной версии галочки «показывать кнопки соцсетей» сразу в свернутом виде — а так они прилично места занимают вот так:

А хотелось бы по умолчанию вот так:

Кликаешь на палец — открываются кнопки.

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

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

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