Одним из инструментов увеличения посещаемости ресурса являются кнопки соцсетей для сайта. Разместив ссылки на социальные сети в своём блоге, вы поможете читателям делиться с друзьями понравившимися публикациями. И тем самым привлечёте на свои страницы новых посетителей.
Эта статья расскажет вам, как создать и разместить кнопки соц сетей на своём вебсайте без использования плагинов. Итак, приступаем.
Содержание
Зачем ставить кнопки поделиться в соц сетях?
Обзор популярных конструкторов
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-код.
Результат будет, например, таким:
Вот собственно и всё. С помощью этого несложного руководства вы сможете быстро добавить кнопки соцсетей на свой сайт или блог. Удачи!
Ну и конечно, протестируйте мои кнопочки 🙂 Поделитесь этой статьёй с друзьями.