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

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

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

Содержание
Зачем ставить кнопки поделиться в соц сетях?
Обзор популярных конструкторов
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/.

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

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

2. Pluso

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

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

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

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

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

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

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

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

3. Share42

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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