Разрешение пользователю делиться веб-сайтом, на котором он находится, — это распространенная модель веб-приложений, которую можно найти на многих новостных сайтах, блогах или торговых сайтах. Поскольку создание ссылок является одной из сверхспособностей Интернета, надежда состоит в том, чтобы привлечь трафик от пользователей, которые видят общую ссылку на сайтах социальных сетей или получают ее через сообщения чата или даже по электронной почте.
Современный способ
Использование API веб-ресурса
API Web Share позволяет пользователю обмениваться данными, такими как URL-адрес страницы, на которой он находится, а также заголовок и описательный текст. Метод navigator.share() API Web Share вызывает собственный механизм общего доступа к устройству. Он возвращает обещание и принимает один аргумент с данными, подлежащими совместному использованию. Возможные значения:
-
url: строка, представляющая URL-адрес, который будет использоваться совместно. -
text: строка, представляющая текст для совместного использования. -
title: строка, представляющая заголовок, который будет опубликован. Может игнорироваться браузером.
Классический способ
Использование намерения поделиться на сайте социальной сети
Пока не все браузеры поддерживают API Web Share. Таким образом, запасным вариантом является интеграция с наиболее популярными сайтами социальных сетей вашей целевой аудитории. Популярным примером является Twitter, чей URL-адрес веб-намерения позволяет обмениваться текстом и URL-адресом. Этот метод обычно состоит из создания URL-адреса и его открытия в браузере.
Рекомендации по пользовательскому интерфейсу
Приятно соблюдать установленный на платформе значок общего доступа в соответствии с рекомендациями по пользовательскому интерфейсу поставщиков операционных систем.
- Окна:
- Яблоко:
- Android и другие операционные системы:
Прогрессивное улучшение
В приведенном ниже фрагменте используется API веб-ресурса, если он поддерживается, а затем возвращается к URL-адресу веб-намерения Twitter.
// DOM references
const button = document.querySelector('button');
const icon = button.querySelector('.icon');
const canonical = document.querySelector('link[rel="canonical"]');
// Find out if the user is on a device made by Apple.
const IS_MAC = /Mac|iPhone/.test(navigator.platform);
// Find out if the user is on a Windows device.
const IS_WINDOWS = /Win/.test(navigator.platform);
// For Apple devices or Windows, use the platform-specific share icon.
icon.classList.add(`share${IS_MAC? 'mac' : (IS_WINDOWS? 'windows' : '')}`);
button.addEventListener('click', async () => {
// Title and text are identical, since the title may actually be ignored.
const title = document.title;
const text = document.title;
// Use the canonical URL, if it exists, else, the current location.
const url = canonical?.href || location.href;
// Feature detection to see if the Web Share API is supported.
if ('share' in navigator) {
try {
await navigator.share({
url,
text,
title,
});
return;
} catch (err) {
// If the user cancels, an `AbortError` is thrown.
if (err.name !== "AbortError") {
console.error(err.name, err.message);
}
}
}
// Fallback to use Twitter's Web Intent URL.
// (https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent)
const shareURL = new URL('https://twitter.com/intent/tweet');
const params = new URLSearchParams();
params.append('text', text);
params.append('url', url);
shareURL.search = params;
window.open(shareURL, '_blank', 'popup,noreferrer,noopener');
});
дальнейшее чтение
Демо
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>How to let the user share the website they are on</title>
<link rel="stylesheet" href="style.css" />
<!-- TODO: Devsite - Removed inline handlers -->
<!-- <script src="script.js" defer></script> -->
</head>
<body>
<h1>How to let the user share the website they are on</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at libero
eget ante congue molestie. Integer varius enim leo. Duis est nisi,
ullamcorper et posuere eu, mattis sed lorem. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. In at suscipit erat, et sollicitudin lorem.
</p>
<img src="https://placekitten.com/400/300" width=400 height=300>
<p>
In euismod ornare scelerisque. Nunc imperdiet augue ac porttitor
porttitor. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Curabitur eget pretium elit, et
interdum quam.
</p>
<hr />
<button type="button"><span class="icon"></span>Share</button>
</body>
</html>CSS
:root {
color-scheme: dark light;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 1rem;
font-family: system-ui, sans-serif;
}
img,
video {
height: auto;
max-width: 100%;
}
button {
display: flex;
}
button .icon {
display: inline-block;
width: 1em;
height: 1em;
background-size: 1em;
}
@media (prefers-color-scheme: dark) {
button .icon {
filter: invert();
}
}
.share {
background-image: url('share.svg');
}
.sharemac {
background-image: url('sharemac.svg');
}
JS
// DOM references
const button = document.querySelector('button');
const icon = button.querySelector('.icon');
const canonical = document.querySelector('link[rel="canonical"]');
// Find out if the user is on a device made by Apple.
const IS_MAC = /Mac|iPhone/.test(navigator.platform);
// Find out if the user is on a Windows device.
const IS_WINDOWS = /Win/.test(navigator.platform);
// For Apple devices or Windows, use the platform-specific share icon.
icon.classList.add(`share${IS_MAC? 'mac' : (IS_WINDOWS? 'windows' : '')}`);
button.addEventListener('click', async () => {
// Title and text are identical, since the title may actually be ignored.
const title = document.title;
const text = document.title;
// Use the canonical URL, if it exists, else, the current location.
const url = canonical?.href || location.href;
// Feature detection to see if the Web Share API is supported.
if ('share' in navigator) {
try {
await navigator.share({
url,
text,
title,
});
return;
} catch (err) {
// If the user cancels, an `AbortError` is thrown.
if (err.name !== "AbortError") {
console.error(err.name, err.message);
}
}
}
// Fallback to use Twitter's Web Intent URL.
// (https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent)
const shareURL = new URL('https://twitter.com/intent/tweet');
const params = new URLSearchParams();
params.append('text', text);
params.append('url', url);
shareURL.search = params;
window.open(shareURL, '_blank', 'popup,noreferrer,noopener');
});