Как сделать кнопку поделиться на сайте
Лайки и шейры позволяют рекламировать себя в социальных сетях при помощи пользователей и сотрудников компании, которые делятся вашим контентом на личных страницах. Разберемся, как добавить удобные кнопки на сайт и увеличить свое присутствие в соцсетях.
Кнопки позволяют размещать ссылку на сайт в социальной сети, что значительно разбавляет ссылочный вес. Наличие данных кнопок улучшает юзабилити сайта, помогая пользователю совершить быстрый обмен информации. Можно также проанализировать сайт с точки зрения отображения в соцсетях.
Представьте ситуацию, что посетителя заинтересовало мероприятие, которое описано на вашем сайте-афише. И если вы не установили кнопку шейра, чтобы поделиться мероприятием, пользователь вынужден будет сохранять ссылку на страницу, переходить в соцсеть или мессенджер, вставлять ссылку и отправлять ее. Как правило, он не захочет тратить на это время и покинет страницу.
Перейдем к установке.
Установить кнопки для сайта можно несколькими способами. Один из них — вручную сформировать код, который встраивается на веб-ресурс. Второй — автоматический метод — предполагает установку специальных плагинов.
Рассмотрим генерацию кода кнопок на примере Facebook. Перейдите по ссылке на конфигуратор кнопки. Конфигуратор позволяет настроить вид кнопок, размер и включить опцию шейра.
Выберите размер кнопок. Отталкивайтесь от того, насколько гармонично кнопки смотрятся на сайте. В нижнем поле есть примеры:
Конструктор имеет в наборе все основные соцсети и сервисы, которые можно подключить с его помощью:
Easy Social Share Buttons — это платный плагин, который поддерживает более 40 социальных сетей. Его преимущество в функциональности. Он позволяет разместить бар кнопок в любом месте, использовать счетчик подписчиков, отслеживать метрики эффективности и прочее. Плагин предлагает более 25 различных шаблонов для своих иконок.
Активация плагина стоит $12. После нее можно перейти к настройкам кнопок.
Proven Strategies To Automate Your Ecommerce Growth или SUMO — бесплатный плагин, который содержит плавающий или статический бар с кнопками социальных сетей.
Плагин дает возможность показать кнопки пятью способами. Полистайте варианты шаблонов, выберите подходящие конфигурации и сохраните настройки.
AddToAny Share Buttons имеет подобный функционал, что и предыдущие плагины. Отличие в том, что он поддерживает более 90 социальных сетей, сообществ и услуг. Установите плагин по стандартной схеме. Перейдите к настройкам:
Заключение
Кнопки лайков и шейров позволяют пользователям делиться ссылками на ваш контент с друзьями в социальных сетях. Когда посетитель сайта нажимает кнопку шейра, ссылка на страницу, часть контента и изображение копируются. Публикация создается автоматически на странице личного аккаунта в сети. Кнопка лайка позволяет отмечать понравившиеся материалы вне ленты социальной сети.
- вручную, встраивая фрагмент кода в страницы;
- автоматически, используя плагины.
Автоматическое внедрение кнопок реализуется с помощью плагинов, например, для WordPress. Разработок существует множество, мы рассмотрели следующие:
-
Easy Social Share Buttons — это платный плагин стоимостью $12. Он работает с разными соцсетями и прост в настройке. Основное преимущество — 25 готовых шаблонов like and share button;
Сэкономьте время на изучении Serpstat
Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?
Перед тем, как углубляться в кодинг, давайте осмотримся и обратим внимание нате ресурсы, которые уже нам предоставляет глобальная паутина. К слову их очень много мы же рассмотрим два наиболее популярных.
С чем же мы рискуем столкнуться, используя готовые кнопки поделиться?
Во-вторых: в надежности Яндекса сомневаться не приходится, но кнопки, в отличие от счетчика метрики, почему-то грузятся тяжело, и не редко происходит видимое их запаздывание от основного контента страницы. Особенно это заметно при хорошем высокоскоростном соединении, когда страница вылетает фактически мгновенно, а у вас несколько блоков с кнопками.
В-третьих: для теста сгенерируйте скрипт на share24 – он большой. Все ли из предоставленных строк кода так уж нам необходимы? – Не думаю.
Взвесив за и против, вы со мной согласить, что собственные кнопки поделиться подойдут вам намного лучше. Но, выбирая свой вариант, следует учесть, что поддержка и ответственность за его работу ляжет целиком на вас. URL по которому происходит репост хоть и меняется очень редко, но все же меняется, и это приходится отслеживать.
Теперь перейдём к самому написанию скрипта, он будет делиться на три части: HTML, CSS и, собственно, сам код, написанный на JavaScript. Дополнительно я буду использоваться для удобства библиотеку jQuery.
Подключаем все необходимые файлы:
Теперь добавляем в файл share.js скрипт, он будет выглядеть таким образам:
Это объект с набором методов: twitter(), vk(), facebook(), data(), popup(). Первые три метода непосредственно отвечают за процесс поделиться. Вначале идёт обращение к методу data(), где парсится значение атрибута data-share-data и возвращается json. Далее формируется URL c с учётом полученных данных и вызывается метод popup(). Он отвечает за создания нового окна одной из этих соцсетей.
Добавляем разметку на страницу:
Структура довольно простая, а именно обёртка с классом share, далее идёт div с атрибутом data-share-data, о котором было упомянута выше. Строка формируется из четырех параметров со своими значениями.
- url – адрес которым мы делимся;
- img – картинка, если она не нужна указываем пустую строку;
- title – заголовок страницы;
- text – нужное нам описание.
Внутри div лежат сами кнопки с навешенным на них событием onclick. По клику будет вызываться один из методов описанных выше.
Осталось только придать кнопкам человеческий вид и добавить CSS:
В итоге после добавления CSS кнопки получаться вида:
На этом написание скрипта законченно, в примере я использовал всего три социальных сети, если нужно подключить другие, то это не составит большого труда. Для этого потребуется добавить новый метод в объект share, не забывая прописать также дополнительно HTML и CSS. Ссылки, по которым происходит репост в соцсети можно получить двумя способами:
- Воспользоваться API социальной сети, что не всегда помогает;
- Выковырять у аналогичного сервиса, воспользовавшись firebugом или другим инструментом для веб-разработчика.
На этом я сегодня закончу, в одной из следующих статей допишем счетчик репостов для наших кнопок поделиться.
В данном уроке сделаем симпатичные кнопки поделиться в социальных сетях без использования сторонних плагинов: с использованием прямых ссылок для шеринга (без скриптов) и ссылок указанных через JS (2 варианта кнопок). И разберем как их подключить к CMS WordPress и MODX Revo.
Начнем с html разметки и внешнего вида (css) кнопок.
Html разметка кнопок
Напишем простенькую html разметку:
Здесь я использую иконки от Font Awesome 5.15 (free) . В случае если в вашем шаблоне он не используется, подключите его следующей строчкой:
Кто проходит уроки по разработке сайтов на MODX и использует шаблон aranoz вам не нужно подключать font awesome и делать css оформление.
CSS оформление кнопок
Стилизуем немного нашу разметку при помощи CSS:
На выходе должен получиться вот такой минималистичный блок с иконками соц. сетей:
Где взять ссылки для шаринга (sharelink)?
Для того чтобы получить актуальные ссылки для шаринга, можно воспользоваться бесплатным генератором от websiteplanet .
Копируем sharelink их и вставляем в нашу Html разметку.
Там не все ссылки для нашей HTML разметки, остальные можно взять с любых сервисов шаринга, например с usocial.
Вот перечень актуальных ссылок шаринга на текущий момент:
Внедрение кнопок поделиться в CMS WordPress и MODX
Для того чтобы сделать ссылки динамическими нужно добавить в них синтаксис от CMS.
Для CMS WordPress:
– адрес страницы, которую нужно зашерить,
– заголовок страницы, которой вы делитесь в соцсети,
Для CMS MODX Revo:
[[~[[*id]]? &scheme=`full`]] – адрес страницы, которую нужно зашерить,
[[*pagetitle]] – заголовок страницы, которой вы делитесь в соц. сети,
Внедрение Open Graph
Для того, чтобы при шеринге записей со своего сайта в соц. сетях использовались необходимые данные, а не случайная картинка и тексты, на сайт необходимо внедрить разметку Open Graph и правильно заполнить метатеги для каждой страницы.
Если у вас CMS WordPress, то внедрить Open Graph легко, для этого достаточно установить и настроить один из SEO плагинов: Rank Math Seo или Yoast SEO.
Если у вас CMS MODX: то внедрить Open Graph разметку, тоже не составит труда. Для этого достаточно установить дополнение SEO Suite, либо вы можете создать всю разметку в ручную используя стандартный функционал.
Усовершенствование кнопок поделиться для сайта при помощи jQuery
Если ваш сайт использует jQuery, то кнопки можно усовершенствовать (скрыть сами shared ссылки соц. сетей в JS), для этого перепишем немного html разметку:
Для MODX вместо и пропишите [[~[[*id]]? &scheme=`full`]] и [[*pagetitle]] .
Далее создаем js файл share.js со следующим содержимым:
И подключаем его к шаблону (обязательно после подключения jQuery):
При такой реализации, при наведении на кнопки обычный курсор мыши, давайте сделаем его пальцем (как при наведении на ссылки), для этого в файл CSS добавьте следующую строку:
Внимание! Если выше указанный код не работает (кнопки соц. сетей остаются не активными), тогда попробуйте в скрипту заменить строки:
Так же если хотите то можно раскрасить кнопки и добавить к ним эффекты при наведении, для этого нужно добавить еще немного css, например:
Вот так сделать share кнопки самостоятельно. Устанавливайте, тестируйте и не забывайте делиться с друзьями!
Данный способ, я активно применяю при создании тем для WordPress. Это позволяет мне делать кнопки схожие по дизайну с самой темой, что не возможно с сторонними сервисами, также, я могу настроить все так как нужно мне. Также я считаю что такой способ меньше грузит сайт. Я использую не все кнопки лишь те что считаю самыми часто нажимаемыми. Вот пример из нескольких сайтов.
Итак, приступим. В готовом примере будут просто текстовые ссылки без картинок. Если вы владеете минимальными навыками в CSS и Фотошоп или поиском картинок гугл, думаю Вам не составит труда сделать кнопки не хуже чем мои 🙂
1. Подключение библиотеки jquery
Для начала нужно подключить библиотеку jquery.
Перед подключением посмотрите, нет ли уже ранее подключенной библиотеки, чтобы не спровоцировать конфликт.
В head вставляем следующий код:
2. Скрипт кнопок на базе jQuery c опциями
Код приведенный ниже вставляем в теги
И вставляем сразу после подключенной библиотеки.
Также, если вы не любите лишний код в html, то можете сделать немножко иначе.
Создайте файл buttons.js и вставляем код в него.
Далее после подключенной библиотеки вставляем ссылку на файл с правильным путем к нему.
Собственно, сам код:
Как я и говорил, ненужные соц сети, можете убрать, просто удалив часть кода отвечающую за определенную соцсеть.
3. Скрипт отвечающий за класс кнопок
Данный скрипт определяет, что все элементы класса .social_share считаем кнопками шаринга.
Его тоже нужно вставить сразу после предыдущих вставок.
Иногда если способ не работает, подключение скриптов осуществляется перед закрывающимся тегом body в подвале
4. html разметка
В нужном месте вставляем код. В WordPress это нужно сделать внутри цыкла в файле single.php
5. СSS стили
Как я писал раньше, результат будет без картинок, а просто украшен стилями.
Добавляем данный код в Файл стилей вашего сайта.
Вот и все. Если проделанная работа выполнена правильно, то кнопки должны прекрасно выполнять свою функцию.
На этом все, спасибо за внимание 🙂
Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты :)
Читайте также: