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

Добавление иконок на профили и группы в социальных сетях на сайт

Итак, что нам нужно:

• Определиться с будущим местонахождением иконок;
• минимальные знания html и CSS, как не крути, а предсказать все варианты, которые могут вам понадобиться я не смогу.
• готовые картинки-иконки соц сетей, скачанные с интернета. Их можно найти очень много используя поиск.
• доступ к файлам шаблона.

Первым делом покажу небольшой код, для 2-х соц сетей, VK и G+, а так же иконку ленты FeedBurner. По аналогии вы можете добавить сколько угодно иконок.

<div class="head-icon">   <a href="http://feeds.feedburner.com/yrokiwp">     <img title="Подписка RSS"       alt="Подписка RSS" src="https://feedburner.google.com/fb/images/pub/feed-icon32x32.png"/></a> </div> <div class="head-icon">   <a href="https://vk.com/yrokiwpru">     <img title="Группа Вконтакте"       alt="Группа Вконтакте" src="<?php bloginfo('template_url') ?>/images/vk.png"/></a> </div> <div class="head-icon">   <a href="https://plus.google.com/u/0/communities/112307833797572900957">     <img title="Сообщество G+"       alt="Сообщество G+" src="https://yrokiwp.ru/wp-content/themes/first_2015/images/gplus.png"/></a> </div>

В этом примере я показал сразу три варианта добавления иконок, первый с использованием картинок с другого сайта, второй WordPress-совский используя функцию bloginfo(), третий, более правильный и оптимальный, указание абсолютного пути к картинке на сервере.

Что касается CSS, тут я вам навряд сильно помогу, могу лишь дать несколько советов по примеру ниже:

.head-icon{ float:right; /*или left*/ margin:5px;} /*отступы по всем сторонам*/

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

Если вы хотите чтобы эти кнопку выводились под текстом статей, то данный код вам нужно будет вставить в шаблон 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;

}

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

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

Распространенный вариант работы с этой 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. Из параметров: возможность выбрать размер кнопок, детали отображения и наличие счетчика. После все необходимых настроек нужно скопировать код и добавить в шаблон темы.

Плагины

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

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

AddToAny Share Buttons

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

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

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

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

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

Social Media Share Buttons & Social Sharing Icons

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

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

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

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

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

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

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

WordPress Share Buttons Plugin – AddThis

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

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

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

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

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 — думаю, что нет.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вариант 1

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

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

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

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

Вариант 2

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

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

8 вариантов размещения кнопок соцсетей на сайте

Подробнее

На сайте есть зоны, где размещение кнопок соцсетей не рекомендуется:

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

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

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

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

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

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

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

Инструкция по установке блока «Поделиться» с кнопками Яндекс на сайт.

Хватит теории, давайте же устанавливать кнопки на сайт.

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

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

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

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

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

— сначала идет код, между тегами <script>…</script>, т.е. он начинается с символов <script type= и заканчивается символами </script>.

— следом сразу идет код, заключенный в теги <div>…<div>, т.е. он начинается с символов <div class= и заканчивается символами </div>.

Так вот первая часть кода отвечает за подгрузку выполняемого скрипта с сайта Яндекса и эту часть кода я советую разместить в шаблоне сайта непосредственно перед закрывающим тегом </body>. Если вы посмотрите на исходный код главной страницы моего сайта, то увидите вот такую картину:

На рисунке видно, что первая часть кода, обведенная красным у меня как раз расположена перед закрывающим тегом </body>.

Вторая часть кода выводит кнопки, поэтому вторую часть кода вы уже размещаете в том месте где будут отображаться кнопки.

Расскажу на примере, для чего это нужно делать:

На главной странице моего сайта кнопки расположены сразу под верхним меню сайта. Очень редко, но иногда бывает так, что подгрузка скрипта с сайта Яндекс, указанного в первой части кода между тегами <script>…</script> происходит дольше обычного. Из-за этого страница сайта отрисовывалась только до этих кнопок, дальнейший процесс отрисовки страницы как бы подвисал на несколько секунд, ожидая окончания подгрузки скрипта с сайта Яндекса. Вот чтобы такого не было, я переместил первую часть кода и вставил ее перед закрывающим тэгом </body> моего шаблона. В этом случае браузер сначала отрисует страницу сайта, дойдет строчки загрузки скрипта и даже если скрипт будет долго подгружаться, страница уже будет отрисована, и его влияние будет не так заметно.

• Назад

• Вперед

You have no rights to post comments

Блок поделиться для сайта с помощью сервиса UptoLike

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

Преимущества сервиса:

• быстрая настройка;
• множество разнообразных соц сетей, на данный момент их более 25;
• адаптивность для мобильных версий сайта;
• гибкие настройки дизайна кнопок и выбор места расположения;
• Сервис полностью бесплатный.

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

Ставим кнопки поделиться для сайта:

1. Заходим на сайт uptolike.ru и выполняем простейшую регистрацию.

Регистрацию, можно будет пройти и после создания блока кнопок соц. сетей.

1. Теперь жмем «создать проект» и выбираем интересующий нас, в нашем случае — это «поделиться».

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

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

Если сайт адаптивный, то ставим галочку в соответствующем чек-боксе, в противном случае — ненужно.

1. В конце, после настроек всех пунктов жмем «сгенерировать код».

1. На выходе копируем получившейся код (нажимаем на него левой кнопкой мыши, таким образом он выделяется и копируем код при помощи комбинации клавиш Ctrl+c).

1. Чтобы добавить кнопки поделиться в соц сетях для сайта wordpress нужно код вставить в файл Single.php. На некоторых сайтах, как например на моем, нужно вставить в content-single.php.

Важно! перед тем, как вставить код, сделайте резервную копию сайта, или просто скопируйте файл, в который будите вносить изменения, себе на компьютер, чтобы в случае, если что поломаете, вы смогли быстро все исправить. Добавляйте код после закрывающего тега ?> php, иначе можно нарушить код и сайт будет отображаться не правильно

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

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

Я поставил код перед открытием тега footer.

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

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

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

Конструктор

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Настройки

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

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

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

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

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

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

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

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

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

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

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

Статистика

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

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

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

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

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

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