Использование Share.js для добавления кнопок шаринга

Дополнительные примеры использования Share.js

Пример 1. Кастомная стилизация кнопок с использованием CSS-переменных

<style>
  .share-custom {
    --share-bg: #f0f0f0;
    --share-color: #333;
    --share-hover-bg: #e0e0e0;
    display: flex;
    gap: 8px;
  }
  .share-custom .share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--share-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
  }
  .share-custom .share-btn:hover {
    background: var(--share-hover-bg);
  }
</style>
<div id="custom-share" class="share-custom"></div>
<script>
  new Share("#custom-share", {
    networks: ['facebook', 'twitter', 'telegram'],
    url: 'https://example.com'
  });
</script>

Результат: три круглые кнопки с иконками Facebook, Twitter и Telegram, серый фон, при наведении фон светлеет.

Пример 2. Интеграция с React (функциональный компонент)

import React, { useEffect, useRef } from 'react';
import 'share.js';

const ShareButtons = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      new Share(containerRef.current, {
        networks: ['vkontakte', 'whatsapp', 'telegram', 'copy'],
        url: window.location.href,
        description: 'React приложение с кнопками шаринга'
      });
    }
  }, []);

  return <div ref={containerRef}></div>;
};

export default ShareButtons;

Результат: компонент рендерит пустой контейнер, после монтирования в него добавляются кнопки VK, WhatsApp, Telegram и копирования. Важно: импорт 'share.js' должен загружать CSS и JavaScript библиотеки через CDN (например, в index.html) или через модуль.

Пример 3. Передача произвольных параметров через data-атрибуты

Если требуется для каждой кнопки указать свой URL, можно использовать атрибуты data-share-url на элементах:

<div id="multiple-urls">
  <div data-share="facebook" data-share-url="https://example.com/facebook">Фейсбук</div>
  <div data-share="twitter" data-share-url="https://example.com/twitter">Твиттер</div>
</div>
<script>
  // Инициализация без параметра url, библиотека возьмёт из data-атрибутов
  new Share("#multiple-urls", {
    networks: [] // не указываем, чтобы не создавать стандартные кнопки
  });
  // Но библиотека ожидает, что уже есть элементы с data-share. 
  // Если они созданы вручную, то нужно просто вызвать new Share("#multiple-urls") без настроек.
</script>

Результат: клик на "Фейсбук" открывает окно шаринга для URL https://example.com/facebook, а на "Твиттер" - для https://example.com/twitter.

Пример 4. Использование метода Share.open для открытия окна программно

// Открыть окно шаринга VK с произвольными параметрами без видимой кнопки
Share.open('vkontakte', {
  url: 'https://example.com',
  title: 'Программный вызов',
  description: 'Открыто через Share.open'
});

Результат: сразу открывается попап VK с указанным URL, без необходимости нажимать кнопку. Полезно для собственных обработчиков, например, по таймеру.

Пример 5. Работа с событием 'share' и отмена действия по умолчанию

const share = new Share("#share", {
  networks: ['telegram'],
  url: window.location.href
});

share.el.addEventListener('share', function(e) {
  console.log('Начало шаринга на', e.detail.network);
  // e.preventDefault() не сработает, событие не отменяемое.
  // Для отмены нужно использовать свой обработчик клика
});

// Альтернатива: повесить свой обработчик на контейнер и отловить клик по data-share
share.el.addEventListener('click', function(e) {
  const target = e.target.closest('[data-share]');
  if (target) {
    const network = target.getAttribute('data-share');
    if (network === 'telegram') {
      e.stopImmediatePropagation(); // предотвращает стандартное поведение
      // свой код
      Share.open(network, { url: location.href, title: 'Кастом' });
    }
  }
});

Результат: при клике на Telegram сначала появляется сообщение в консоли, затем открывается окно шаринга. Если нужно заблокировать стандартное окно, используется stopImmediatePropagation на раннем этапе.