Веб разработка
August 21, 2021

Как использовать системное меню "Поделиться" в браузере

Вы, наверное, не раз делали на сайте кнопки для отправки ссылки в социальные сети, Facebook, Twitter, Вконтакте или Одноклассники. Многие создатели сайтов мотивируют читателей поделиться материалом в социальных сетях.

Все мобильные браузеры и многие браузеры для десктопа имеют встроенную функцию "Поделиться", в меню которой уже есть все сервисы пользователя. Если вместо Telegram посетитель пользуется Whatsapp, первым пунктом у него будет нужный ему браузер.

Как выглядит "Поделитья" в Safari под MacOS

Для того, чтобы вывести меню "поделиться", нужно чтобы сайт работал по HTTPS и добавить следующий код на сайт. Функция поддерживается не всеми браузерами, не забудьте сделать вывод своего меню поделиться, если браузер еще не поддерживает данную технологию.

const btn = document.getElementById('share-button');
btn.addEventListener('click', async () => {
  try {
    await navigator.share(shareData)
    resultPara.textContent = 'MDN shared successfully'
  } catch(err) {
    resultPara.textContent = 'Error: ' + err
  }
});

Более подробно можно почитать: