Как сделать кнопку поделиться на сайте

Обновлено: 07.07.2024

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

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

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

Перейдем к установке.

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

Рассмотрим генерацию кода кнопок на примере Facebook. Перейдите по ссылке на конфигуратор кнопки. Конфигуратор позволяет настроить вид кнопок, размер и включить опцию шейра.

Выберите размер кнопок. Отталкивайтесь от того, насколько гармонично кнопки смотрятся на сайте. В нижнем поле есть примеры:

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

Easy Social Share Buttons — это платный плагин, который поддерживает более 40 социальных сетей. Его преимущество в функциональности. Он позволяет разместить бар кнопок в любом месте, использовать счетчик подписчиков, отслеживать метрики эффективности и прочее. Плагин предлагает более 25 различных шаблонов для своих иконок.

Активация плагина стоит $12. После нее можно перейти к настройкам кнопок.

Proven Strategies To Automate Your Ecommerce Growth или SUMO — бесплатный плагин, который содержит плавающий или статический бар с кнопками социальных сетей.

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

AddToAny Share Buttons имеет подобный функционал, что и предыдущие плагины. Отличие в том, что он поддерживает более 90 социальных сетей, сообществ и услуг. Установите плагин по стандартной схеме. Перейдите к настройкам:

Заключение

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

вручную, встраивая фрагмент кода в страницы;
автоматически, используя плагины.

Автоматическое внедрение кнопок реализуется с помощью плагинов, например, для WordPress. Разработок существует множество, мы рассмотрели следующие:

Сэкономьте время на изучении 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 минуты :)

Читайте также: