Нужны ли кнопки «поделиться» социальных сетей

Плагины

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

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

AddToAny Share Buttons

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

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

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

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

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

Social Media Share Buttons & Social Sharing Icons

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

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

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

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

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

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

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

WordPress Share Buttons Plugin – AddThis

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

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

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

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

А как, чтобы все и сразу?

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

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

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

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

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

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

Установка так же проста: выбираем в интерфейсе нужные сервисы и размещаем представленный код в нужное место на сайте.

Переходим по и видим:

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

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

Ближе к концу 2012 года Яндекс предложил пользователям установку кнопок социальных сетей другого формата. Смотрите сами:

Это стандартные кнопки «расшаривания» страницы, только они получили счетчик. Выглядит весьма красиво.

Чтобы поставить на сайт подобные соц. кнопки от Яндекса, необходимо поместить следующий код в пределах тега

CSS

<head></head>

1	<head></head>

В зависимости от движка сайта, найти теги можно: для WordPress файл header.php, для других движков это может быть index.php. А вот и код:

XHTML

<script src=»https://yandex.st/share/cnt.share.js»></script>

1	<script src=»//yandex.st/share/cnt.share.js»></script>

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

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

XHTML

<div class=»yashare-auto-init» data-yashareLink=»» data-yashareTitle=»» data-yashareDescription=»» data-yashareImage=»» data-yashareQuickServices=»yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus» data-yashareTheme=»counter» data-yashareType=»small»></div>

1	<div class=»yashare-auto-init»data-yashareLink=»»data-yashareTitle=»»data-yashareDescription=»»data-yashareImage=»»data-yashareQuickServices=data-yashareTheme=»counter»data-yashareType=»small»></div>

Обратите внимание: в данном коде есть перечисление кнопок социальных сетей (yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus). Вы можете поменять их порядок

Так же можете увеличить размер самих иконок, заменив data-yashareType=»small» на data-yashareType=»big».

Мета-теги Open Graph для сайта

Немного раньше, я упоминал, что помимо ссылки на страницу, для качественного репоста потребуется еще заголовок, описание и картинка. Чтобы не передавать эти данные в ссылках и иметь возможность более удобного управления, стоит воспользоваться специальными мета-тегами. Существуют протокол Open Graph, который позволяет легко и просто указывать для каждой страницы свои параметры репоста. Практически все соц.сети придерживаются этого протокола. До недавнего времени только twitter по своему использовал мета-теги Open Graph, но в последнее время также стал придерживаться общего стандарта.
Для передачи необходимых данных о странице достаточно только нескольких тегов, они должны быть прописаны в самом начале – внутри блока head. Выглядеть это будет вот так:

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<!-- Для twitter -->
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:title" content="Заголовок для репоста в twitter">
	<meta name="twitter:description" content="Подпись для репоста в twitter">
	<meta name="twitter:image:src" content="https://vk-book.ru/folder-test/share/share_img.jpg">
	<meta name="twitter:url" content="https://vk-book.ru/folder-test/share/">
	<meta name="twitter:domain" content="vk-book.ru">
	
	<!-- Для всех остальных -->
    <meta property="og:title" content="Заголовок для репоста"/>
    <meta property="og:description" content="Подпись для репоста" />
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="https://vk-book.ru/folder-test/share/"/>
    <meta property="og:image" content="https://vk-book.ru/folder-test/share/share_img.jpg"/>
	<meta property="og:image:type" content="image/jpg">
	<meta property="og:image:width" content="1200" /> 
	<meta property="og:image:height" content="628" />	
	
    <title>Пример кнопок репостов для соц.сетей</title>    
</head>

ЕЩЁ

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

Липкий социальный бар

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

Пример

<!— Загрузить шрифт потрясающие иконки —><link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»><!— Панель значков социальных сетей —><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:

Пример

/* Фиксированная/липкая панель значков (выравнивается по вертикали на 50% от верхней части экрана) */.icon-bar {  position: fixed;  top: 50%;  -webkit-transform: translateY(-50%);  -ms-transform: translateY(-50%);  transform: translateY(-50%);}/* Стиль ссылок на панели значков */ .icon-bar a {  display: block;  text-align: center;  padding: 16px;  transition: all 0.3s ease;  color: white;  font-size: 20px;}/* Стиль иконки социальных медиа с цветом, если вы хотите */.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 Позиция, чтобы узнать больше о позиционировании.

Добавление кнопки соцсетей на сайт с помощью 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-файла.

ФОРМЫ

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

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

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

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

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

4.Нажимаем кнопку «Скачать готовый скрипт», после чего, следуя инструкциям, устанавливаем скрипт себе на страницу:

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

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

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

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

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

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

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

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

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

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

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

Как установить кнопку «Твитнуть» от Twitter

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

Если честно, то настройки у Twitter самые простые и не вызовут сложностей у любого человека (я надеюсь). В красной панели выбираем тип кнопки, в зависимости от которой откроются свои поля на выбор.

Если оставите URL пустым, то он возьмет страницу. на которой произошел клик по кнопке (как у Facebook и Google +1). Аналогично чуть ниже с текстом: можете прописать свой, либо будет брать заголовок статьи. Далее настраиваем упоминания и #хэштег.

Справа мы видим результат настройки, а чуть ниже код. Копируем весь и вставляем в нужное место на сайте в одно место. Настроек проводить не нужно. Единственное — это можно добавить атрибут rel=»nofollow», чтобы ссылка была закрыта от индексации.

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

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

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

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

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

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

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

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

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

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

Как же сделать так, чтобы скрывать часть статьи от читателей, открываемую за плату социальной активностью?

В WordPress есть замечательный плагин, который называется OnePress Social Locker, он то и будет выполнять на сайте эту функцию.

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

После установки плагина, его настройки появятся в левой части меню в админ-панели блога. Выберете «New Locker», которое находится вверху меню Social Locker.

На картинке ниже, я выбрал первый вариант, то есть Social Locker и дал ему название Тест. После этого можно настроить стиль и текстовую надпись над кнопками соц сетей. Бесплатная версия плагина позволяет выбрать из двух тем, при том, что в платной версии таких тем целых пять. Существует возможность в течении 7 дней воспользоваться возможностями платной версии плагина, а затем решить платить или нет. Повышение версии до премиум стоит $24.

На каждой из двух версий появляется окошко следующего содержания:

Заполнив необходимые поля, с призывом пользователей к действиям, спускаемся ниже, в раздел «Social Options» и нажимаем по каждому из представленных видов соц сетей, а при помощи кнопок On/Off оставляем те, которые нам понадобятся. Например, если вы хотите оставить кнопку «Нравится» от Facebook, вам нужно будет ввести свой URL адрес вашей страницы в Фейсбуке.

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

После того, как вы произвели все установки, нажимаете «Опубликовать».

Чтобы воспользоваться «замком» для определенной части текста, найдите «Manual Locking» под кнопкой Опубликовать и вы увидите автоматически сформировавшийся код.

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

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

Больше опций можно найти в правой части панели, если воспользоваться функцией Visibily options, но данная опция открывается только в платной версии плагина. В ней есть несколько дополнительных возможностей, которые позволяют не показывать кнопки соц сетей для зарегистрировавшихся на сайте пользователей. Вы также можете установить возможность поставить «замок» к статье, которая старше определенного числа дней.

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

• 5 дополнительных тем
• 8 кнопок социальных сетей
• Facebook Поделиться
• Twitter Follow
• LinkedIn Поделиться
• Google Поделиться
• Подписка канала YouTube
• Не показывать замок для зарегистрировавшихся на сайте
• Показ отсчета времени

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

Какой тип контента нужно скрывать?

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

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

Если вы хотите чтобы эти кнопку выводились под текстом статей, то данный код вам нужно будет вставить в шаблон single.php где то в самом конце.
Если нужно вывести эти кнопки на всех страницах сайта, то кроме single.php нужно вставить код и в шаблон page.php
Внимание! Возможно при добавлении в эти файлы кнопки соцсетей могут высветиться не в том месте, где вам нужно или не высветиться вообще. Здесь всё зависит от особенностей вашей темы и её структуры

В таком случае нужно будет поэкспериментировать с добавлением кода в другие части шаблона single.php и page.php.

Для вывода социальных кнопок в подвале сайта или как плавающую вертикальную панель – вставляем предложенный код в файл footer.php вашей темы.
Для того чтобы открыть эти файлы подключаемся к сайту по ftp и заходим в папку:
wp-content – thems – папка с названием вашей темы.

Для того чтобы выровнять эти кнопки по центру страницы нужно в файл style.css вашей темы прописать:

XHTML

.share42init{
text-align:center;
margin-top:20px;
}

1
2
3
4
5

.share42init{

text-aligncenter;

margin-top20px;

}

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

КНОПКИ НА СОЦИАЛЬНЫЕ СЕТИ

Вариант 1

1. Для создания меню сайта используйте инструкцию «Сделать меню с нуля или воспользоваться готовыми вариантами».

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

3. Загрузим в кнопки картинки и немного изменим параметры отображения кнопок.

4. Укажем в настройках кнопок ссылки на соц. сети. Для этого откроем настойки в гаечном ключе и на вкладке «Действие» выберем действие «Открыть страницу в новой вкладке», а ниже добавим ссылку на соц. сеть.

Вариант 2

1. Выполняем аналогичные действия из первого и второго шага предыдущего варианта, но вместо колонков и кнопок добавим виджет «Кнопки на социальные сети»;

2. Удалим социальную сеть «Twitter» из виджета, вместо него добавим Instagram, укажем ссылки на соц. сети, поменял кнопки местами и укажем выравнивание с правой стороны.