Один клик для обмена: нативный шеринг во всём контенте

На этой неделе я хотел поделиться статьёй с Олей. Я открыл статью, выделил URL, скопировал его, переключился на мессенджер, вставил. Пять шагов для того, что должно занимать один.

Сегодня это трение исчезло.

Что изменилось

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

Браузеры на рабочем столе: Стандартное меню обмена с копированием ссылки, опциями электронной почты Мобильные устройства: Полное меню обмена iOS/Android со всеми вашими приложениями Вход не требуется: Работает сразу для всех посетителей

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

Почему это важно

Мобильный шеринг в приоритете

Большая часть нашего трафика приходит с мобильных устройств. Web Share API даёт мобильным пользователям тот же опыт обмена, который они ожидают от нативных приложений — их привычное меню обмена с WhatsApp, Telegram, WeChat, электронной почтой, Сообщениями, чем угодно, что они используют.

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

Удобство для рабочего стола

Браузеры на рабочем столе получают умные меню обмена с копированием ссылки, опциями электронной почты и установленными приложениями (такими как Slack или Microsoft Teams). Некоторые браузеры даже показывают недавние контакты.

Опыт адаптируется к вашей платформе. Вот что делают нативные API.

Нулевое трение для курирования

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

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

Технический выбор

Мы реализовали это с помощью Web Share API, браузерного стандарта, поддерживаемого всеми современными мобильными браузерами и большинством браузеров для рабочего стола.

Запасное поведение: Если браузер не поддерживает нативный обмен (редко, но возможно), кнопка автоматически копирует URL в буфер обмена.

Реализация: Чистый ванильный JavaScript, без зависимостей. ~30 строк кода. Работает с нашей существующей настройкой Alpine.js без конфликтов.

Прогрессивное улучшение: Если JavaScript не загружается, страница остаётся полностью функциональной — кнопка обмена просто не появляется. Контент никогда не блокируется.

Где это работает

Профили брендов: Делитесь исключительными бизнесами, возглавляемыми основателями, с партнёрами или командами портфеля Истории основателей: Делитесь нарративами устойчивости со своей сетью Статьи аналитики: Делитесь рыночной разведкой и стратегическим анализом Посты обновлений: Поделитесь этой статьёй (попробуйте кнопку выше!)

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

Примеры мобильного меню обмена

iOS: Нажатие на обмен открывает знакомое меню iOS с Сообщениями, Почтой, WhatsApp, Telegram, Копировать ссылку, Добавить в список чтения и т.д.

Android: Нативное меню обмена Android с вашими установленными приложениями и недавними контактами.

Safari/Chrome на рабочем столе: Умные меню с копированием ссылки, электронной почтой и установленными приложениями.

Почему не кнопки социальных сетей?

Вы можете задаться вопросом, почему мы не добавили традиционный ряд иконок социальных сетей (Facebook, Twitter/X, LinkedIn). Три причины:

1. Привязка к платформе

Кнопки социальных сетей предполагают, что все используют одни и те же платформы. Это не так. Наша аудитория включает пользователей в Китае (WeChat, Weibo), России (VK, Telegram), Индии (WhatsApp, ShareChat) и десятках других рынков.

Web Share API уважает выбор пользователя. Какие бы приложения у вас ни были, вы можете делиться в них.

2. Конфиденциальность и производительность

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

Наша реализация использует ноль внешних ресурсов. Без отслеживания. Без раздувания. Чистая браузерная возможность.

3. Мобильная реальность

На мобильных устройствах кнопки социальных сетей неудобны. Вы нажимаете «Поделиться в WhatsApp», оно открывает WhatsApp Web или пытается запустить приложение. Web Share API специально разработан для этого — это платформенно-нативный способ обмена контентом из браузеров.

Детали реализации

Расположение: Строка метаданных статьи (раздел времени чтения / даты публикации) Иконка: Иконка Lucide share-2 (соответствует нашей дизайн-системе) Поведение: Одно нажатие → нативное меню обмена → готово Запасной вариант: Автоматическое копирование в буфер обмена, если Web Share API недоступен Файлы: apps/hugo/assets/js/share.js + интеграция в шаблонах

Поддержка браузеров:

• ✅ iOS Safari (все версии)
• ✅ Android Chrome (все версии)
• ✅ Safari на рабочем столе (macOS)
• ✅ Chrome на рабочем столе (последние версии)
• ✅ Firefox (последние версии)
• ⚠️ Запасное копирование в буфер обмена на старых браузерах

Философия дизайна

Минимально по умолчанию: Кнопка обмена маленькая, ненавязчивая, не конкурирует с контентом Доступно: Работает с навигацией с клавиатуры, программами чтения с экрана, сенсорными целями Последовательно: Одинаковое размещение во всех типах контента Быстро: Ноль внешних зависимостей, загружается мгновенно Уважительно: Без отслеживания, без аналитики, без сторонних скриптов

Что это разблокирует

Командное сотрудничество

Исследовательские команды могут немедленно делиться профилями с коллегами. Инвестиционные команды могут отправлять бренды партнёрам. Журналисты могут сохранять статьи для последующей ссылки.

Сетевые эффекты

Чем проще делиться контентом Brandmine, тем больше людей открывают качественные бренды Глобального Юга. Каждый обмен — это потенциальное новое партнёрство, инвестиция или медиа-возможность для основателей, которых мы освещаем.

Мобильный рабочий процесс

Мобильные пользователи теперь имеют ту же возможность обмена, что и пользователи рабочего стола. Это важно, когда 60%+ нашего трафика приходит с телефонов и планшетов.

Попробуйте сейчас

Эта статья имеет кнопку обмена в строке метаданных выше. Нажмите на неё и увидите ваше нативное меню обмена. Отправьте кому-нибудь, кому это будет интересно.

В этом весь смысл — делать отличный контент легко распространяемым.

Нашли браузер, где обмен не работает? Дайте нам знать, чтобы мы могли протестировать и улучшить.