Laisser l'utilisateur partager le site Web sur lequel il se trouve est un modèle courant d'applications Web que vous pouvez trouver sur de nombreux sites d'actualités, blogs ou sites de vente. La liaison étant l'un des super pouvoirs du Web, l'objectif est d'acquérir du trafic auprès des utilisateurs qui voient le lien partagé sur les sites de réseaux sociaux, qui le reçoivent par message de chat ou même par e-mail classique.
L'approche moderne
Utiliser l'API Web Share
L'API Web Share permet à l'utilisateur de partager des données telles que l'URL de la page sur laquelle il se trouve, ainsi qu'un titre et un texte descriptif.
La méthode navigator.share() de l'API Web Share appelle le mécanisme de partage natif de l'appareil. Elle renvoie une promesse et accepte un seul argument avec les données à partager. Les valeurs possibles sont :
url: chaîne représentant l'URL à partager.text: chaîne représentant le texte à partager.title: chaîne représentant un titre à partager. Le navigateur risque d'être ignoré.
Méthode classique
Utiliser l'intention de partage d'un site de réseau social
Tous les navigateurs ne sont pas encore compatibles avec l'API Web Share. Elle s'intègre donc aux sites de réseaux sociaux les plus populaires de votre audience cible. Twitter est un exemple courant, dont l'URL d'intent Web permet le partage d'un texte et d'une URL. Cette méthode consiste généralement à créer une URL et à l'ouvrir dans un navigateur.
Remarques sur l'interface utilisateur
Respecter l'icône de partage établie de la plate-forme, conformément aux directives d'interface utilisateur des fournisseurs de systèmes d'exploitation, est une bonne idée.
- Windows:
- Apple:
- Android et autres systèmes d'exploitation :
amélioration progressive
L'extrait ci-dessous utilise l'API Web Share lorsqu'elle est compatible, puis revient à l'URL d'intent Web de 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');
});
Complément d'informations
Démonstration
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');
});