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

Instagram

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

За последние пару лет в Instagram появилась масса обновлений: IGTV, Reels, маски, гайды и прочее. Разумеется, те же видео в IGTV или Reels — это прекрасно, но едва ли они сравнятся с видеоконтентом на YouTube или TikTok. Если загружаете контент с телефона в IGTV, то 15 минут — это предел. Зато при использовании десктопа можно спокойно загружать видео длиной до 60 минут. А с недавних пор Instagram решил сократить охваты Reels, в которых есть водяные знаки, например, TikTok. Так соцсеть ясно дает понять всем креаторам, что нужно заниматься именно созданием уникального контента, а не копипастом.

Если говорить о stories, то туда загружается контент на 24 часа (потом его можно сохранить в highlights) и длится одна stories 15 секунд. Можно загрузить длинное видео и тогда соцсеть автоматически его порежет на соответствующие отрезки.

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

Количество текста в посте ограничено 2 200 символами. Если описание длиннее, то можно добавить вторую часть в комментарии или изображением в карусель. Учитывайте, что в карусели дочитываемость выше, а если под постом много комментариев, то продолжение текста быстро потеряется

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

Также по последним исследованиям Popsters, наибольшую активность набирают посты средней длины (160 — 1000 символов), число реакций у них на 56% выше, чем у постов с длинным текстом, и на 18% больше чем у коротких.

Для правильного отображения квадратных фотографий в ленте нужен размер 1080×1080 пикселей. Если хотите загрузить видео именно в ленту, а не IGTV, то длительность не должна превышать 1 минуту. Минимальное разрешение: 600×600 пикселей для квадратного видео в и 600×315 пикселей для пейзажного. Для вертикальных изображений и видео для stories или IGTV оптимальный размер — 1080×1350 пикселей, а для горизонтальных — 1080×566 пикселей. 

Сейчас Россия (56 млн) — пятая странапо активностив Instagram. Ее опережают США (140 млн), Индия (140 млн), за ними следуют Бразилия (99 млн) и Индонезия (85 млн). Есть ли еще причины после такой статистики не вести страницу бренда в Instagram — думаю, что нет.

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

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

Итог

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

ЕЩЁ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плагины

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

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

AddToAny Share Buttons

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

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

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

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

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

Social Media Share Buttons & Social Sharing Icons

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

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

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

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

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

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

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

WordPress Share Buttons Plugin – AddThis

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

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

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

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

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

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

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

Подробнее

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

ИЗОБРАЖЕНИЯ

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

Код 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();
	}
}

Facebook

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

Количество текста в посте в Facebook ограничено 63 206 символами, но бытует мнение, что чем меньше текста, тем выше охват: по одному из последних исследований Popsters в Facebook больше вовлечений получают публикации с коротким текстом.

Если загружаете изображение в Facebook, то его оптимальный размер — 1200×630 пикселей. Если расшариваете ссылку, то размер картинки должен быть 1200×627 пикселей. В соцсети есть требования и к видео: длительность должна быть не более 120 минут, а размер файла не более 4 ГБ. Но интересно то, что статистика популярности видео формата в Facebook упала: ранее это был лидер по активности, теперь проигрывает текстовым и публикациям с изображением более чем в 2 раза.

В Facebook тоже есть stories, но они мало чем отличаются от stories в Instagram. Поэтому особенности те же.

UpToLike Social Share Buttons — настройка плагина

Найти его можно как в списке плагинов, так и в консоле в качестве отдельного раздела под названием UpToLike. Открываем и видим 3 вкладки. Пройдёмся по ним.

Конструктор

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

А слева идут сами настройки. И первым делом отметим социальные сети, в которых мы желаем делиться контентом своего сайта. Ещё социальные сети — для открытия полного списка.

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

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

Настроить социальные сети — открываем и также выбираем самые популярные сети.

Дополнительные настройки:

• Цитирование — при выделении части текста появляется кнопка «поделиться».
• Кнопка «Наверх» — позволяет подняться наверх страницы.
• Отключить кнопку «…» — это как раз то, о чём говорилось выше. Я не стала отключать кнопку дополнительного выбора соцсетей.
• Показать всплывающее окно с предложением подписаться — если у вас есть группа в соцсетях, можете активировать эту опцию. Тогда появится форма для заполнения данных группы.

Расположение блока:

• Боковая панель — слева, справа, сверху или снизу.
• В контенте — горизонтально или вертикально.

Здесь можно экспериментировать и сразу же оценивать результат справа. Я выбрала вариант боковой панели снизу.

Внешний вид — на свой вкус выделяете оптимальный для своего блога размер кнопок расшаривания и понравившуюся форму.

А ниже есть возможность подключить счётчик общий или раздельный. Или не показывать его вовсе.

Стиль — здесь есть где разгуляться. Опять же выбираете кнопки на свой вкус.

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

Помимо этого, можете поиграть с фоном кнопок, цветом текста и фоном счётчика. А также задать размер его текста.

Далее сохраняем изменения и переходим сразу в третью вкладку настроек виджета UpToLike.

Настройки

В этом разделе мы определим настройки отображения блока UpToLike:

• Главная страница
• Статические страницы
• Страницы записей
• Страницы архивов
• Специальные страницы

Я отметила галочками все эти пункты.

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

Затем проходите в файловый менеджер и выбираете какой-либо файл с расширением php, чтобы вставить в шаблон своей темы WordPress. Но делать это не обязательно.

Либо второй вариант — текстовый редактор. Вставляете код uptolike, заключённый в квадратные скобки. 

Расположение блока — только снизу или только сверху.

Выравнивание блока — по левому краю, правому или по центру.

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

Язык — выбираете свой.

Сохраняем настройки и переходим во вторую вкладку.

Статистика

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

Сперва, конечно, у вас будет пусто. Но на следующий день уже можете любоваться графиком в этой вкладке настроек UpToLike.

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

Ну а на этом всё. Думаю, вы оцените популярный виджет кнопок UpToLike Social Share Buttons по достоинству. До новых встреч!

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

Полезная статья для вебмастера — Возможности сервиса Ответы Mail.ru.

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

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

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

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

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

В 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 будет отличной идеей. Таким образом, вы будете вознаграждены читателями блога распространением статьи в их аккаунтах социальных сетей, в то же время доказывая свою авторитетность как автор полезного контента, который помогает посетителям решить их проблему.

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

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

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

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

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

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

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

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