Кнопка "поделиться" на мобильных устройствах

211
Алексей,
Кнопка "поделиться" на мобильных устройствах

Пример вызова нативного меню мобильного устройства для "расшаривания" страницы сайта.

Работает только если:

  • есть поддержка браузером,
  • у сайта https подключение, 
  • пользователь "кликнул" на кнопку (при загрузке "onload" не сработает)

Пример кода.

<a href="#" style="display:none;" class="blog-share" data-title="Заголовок" data-text="Описание" data-url="https://example.com/">Поделиться</a>
$(document).ready(function() {
	if (navigator.share) { // Проверяем поддержку функционала браузера
		button = $('.blog-share'); // Класс кнопки "поделиться"
		button.show().on('click', function () {
			navigator.share({
				title: $(this).data('title'),
				text: $(this).data('text'),
				url: $(this).data('url'),
			});
			return false;
		});
	} 
});

Попробовать

Если зайдёте на эту страницу с мобильного, то увидите в статье кнопку с примером работы скрипта выше.

Опубликовано 8 мая 2020 | Обновлено 24 мая 2020
юзабилити
Похожие статьи
Трансформирование бургера в крестик на css 0
Пример кода для кнопки открытия меню.
Читать дальше »
Алексей,
Спасаем пользователей от случайного сброса формы 0
Бывает заполняешь большую форму или пишешь сообщение в блог, а потом бац и случайно вкладку закрыл/нажал...
Читать дальше »
Алексей,
Комментарии