Как добавить кнопки соцсетей для сайта без плагина?

Автор: | 10.09.2017

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

Эта статья расскажет вам, как создать и разместить кнопки соц сетей на своём вебсайте без использования плагинов. Итак, приступаем.

Содержание
Зачем ставить кнопки поделиться в соц сетях?
Обзор популярных конструкторов
1. Яндекс «Поделиться»
2. Pluso
3. Share42
Как добавить кнопки поделиться в соц сетях на сайт?
1. Вывод кнопок в начале или в конце каждой записи
2. Выносим share-кнопки в отдельный виджет сайдбара

Огромную роль социальных сетей в современной жизни трудно переоценить. Более 80% интернет-пользователей обзавелись аккаунтами в тех или иных социалках. Именно поэтому, соц сети, в той или иной форме, обязательно стоит использовать при раскрутке и продвижении своего сайта.

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

Для роста трафика. Это основная их задача. Блок «Подписаться» помогает увеличить посещаемость web-ресурса на 5-15%. С чем это связано?

В зависимости от интересности и полезности контента в среднем один из 50-100 читателей делится ссылкой на понравившийся материал на своей социальной страничке. В контактном листе у большинства пользователей есть люди со схожими интересами, которым может оказаться полезным подобный репост. Каждая ссылка-репост приносит около 10-12 уникальных посещений. Вот вы и получаете желаемый прирост трафика.

Установить кнопки социальных сетей для сайта можно разными методами:

  • С помощью плагинов;
  • С использованием скриптов, сгенерированных online-сервисами;
  • Путём самостоятельного написания кода.

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

Обзор популярных конструкторов

Установка социального блока с использованием скриптов от онлайн конструкторов занимает не более 15-20 минут. От вас потребуется небольшое понимание особенностей html-разметки и css-стилей.

Сервисов очень много. У каждого свои особенности и преимущества. Я остановлюсь на трёх самых удобных. Конечно, удобство – понятие субъективное. Но, возможно, и вам понравятся эти online-конструкторы.

1. Яндекс «Поделиться»

У социальных кнопок Яндекс «Поделиться» есть важное преимущество. После их установки в сервисе Яндекс.Метрика появляется возможность отслеживать подробную статистику поведения пользователей.

1) Переходим по адресу https://tech.yandex.ru/share/.

yandeks podelitsya

2) Отмечаем все нужные нам соц сети. Обратите внимание. Изначально share-кнопка Pinterest неактивна. Для её выбора вам нужно скачать из сети иконку, загрузить её на свой сайт, а получившийся url вписать в пустое окошко внизу страницы. После этого Pinterest становится доступным для выбора.

3) Скрипт-код готов для дальнейшего использования.

2. Pluso

Прекрасный конструктор с широкими адаптивными возможностями. Сервис предлагает:

  • установку кнопок бесплатно, без регистрации;
  • готовый асинхронный код, не влияющий на скорость загрузки вебстраниц;
  • 40 доступных к установке кнопок;
  • 9 стилей отображения иконок;
  • 3 размера иконок: крупный, средний, маленький.
  • 2 варианта формы: круглые и квадратные;
  • возможность самому настраивать порядок отображения кнопок;
  • несколько способов размещения иконок: горизонтально, вертикально, в один или два ряда;
  • возможность подключения или отключения счётчика репостов.

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

Начнём настройку.

1) Переходим по адресу http://share.pluso.ru. Перед нами открылась форма для генерации html-кода.

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

pluso share-knopki

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

knopki podelitsya v sots setyah

4) После того, как вы указали все параметры, в нижней части страницы сформировался скрипт. Он полностью готов для копирования и использования. Как его применить для сайта на Вордпресс, расскажу чуть ниже.

pluso knopki dlya sotssetey

3. Share42

Замыкает тройку моих лидеров ещё один простой и удобный в использовании online-сервис. Он также не требует обязательной оплаты (вы можете добровольно поблагодарить автора) или регистрации.

Отличается следующими преимуществами:

  • привлекательными иконками;
  • минимальным размером кода;
  • отсутствием лишних ссылок. Для вывода ссылок используется JavaScript;
  • использованием всего одного изображения (спрайта);
  • 42 доступных кнопки;
  • 3 размера отображения иконок;
  • 2 вида панелей: горизонтальная или плавающая вертикальная.

Настраиваем:

1) Заходим на вебсайт http://share42.com/ru. Переходим в раздел «Генератор».

knopki sotsialnyh setey dlya sayta

2) Выбираем нужный размер. Отбираем интересующие нас кнопки социальных сетей для сайта. Для этого просто щёлкаем по ним мышкой. Изменение порядка вывода также выполняется с помощью перемещений иконок мышью.

3) В разделе 2 отметьте нужные опции: тип панели, кодировку. Снимите галочку «добавить иконку сайта Share42». Обратите внимание. Если вы выбрали иконку rss, не забудьте прописать правильный url вашей rss-ленты. Только в этом случае rss-кнопка будет работать корректно.

knopki sotsialnyh setey

4) Скачиваем архив с готовым скриптом. Загружаем его себе на сайт.

На примере TimeWeb загрузка выполняется следующим образом:

  • Заходим на хостинг, переходи во вкладку «Файловый менеджер»;
  • Выбираем нужный сайт, заходим в папку public_html. Нажимаем Файл / Закачать / выбираем для закачки свой загруженный архив;
  • zagruzka fayla timeweb

  • После закачивания выделяем загрузившийся архив и нажимаем Архиватор / Разархивировать. Теперь скрипт загружен в корневой каталог нашего сайта.

5) Возвращаемся на сайт http://share42.com. Смотрим снова на четвертый пункт инструкции. Остались невыполненными всего несколько действий:

share42 knopki sots setey

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

Html-код готов. Его необходимо будет разместить у себя на сайте.

Как добавить кнопки поделиться в соц сетях на сайт WordPress?


Какой бы сервис из трёх рассматриваемых выше вы не выбрали, у вас появился html-код для установки на блог. Разберёмся, что с ним дальше делать.

1. Вывод кнопок в начале или в конце каждой записи

Нам потребуется файл single.php. Найти его можно у себя на блоге по следующему пути: Консоль / Внешний вид / Редактор. Прежде чем вносить изменения, обязательно сделайте копию этого файла.

Ищем место для вставки кода. Универсальный совет тут трудно дать, поскольку у каждого из нас установлена своя тема. Поэтому внимательно взгляните на код файла single.php и постарайтесь определить, где начинается и заканчивается вывод отдельной записи.

Для показа share-кнопок в начале статьи вставляю код следующим:

wordpress knopki sots setey

В результате получаю:

wordpress sotsialnye knopki

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

Результат можно увидеть на этой странице и в других статьях.

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

2. Выносим share-кнопки в отдельный виджет сайдбара

Этот вариант очень прост. Ошибиться совершенно невозможно.

  • Переходим Консоль / Виджеты / Текст.
  • Прописываем заголовок. Например, «Если статья показалась интересной, поделитесь ею с друзьями!»
  • В поле Текст вставляем html-код.

Результат будет, например, таким:

knopki podeli'sya v sots setyah

Вот собственно и всё. С помощью этого несложного руководства вы сможете быстро добавить кнопки соцсетей на свой сайт или блог. Удачи!

Ну и конечно, протестируйте мои кнопочки 🙂 Поделитесь этой статьёй с друзьями.