Jak umożliwić użytkownikowi udostępnianie strony internetowej, na której się znajdują

Thomas Steiner

Umożliwienie użytkownikowi udostępniania witryny, w której się znajduje, to typowy wzorzec aplikacji internetowych, który można znaleźć w wielu witrynach z wiadomościami, blogach i witrynach zakupowych. Ponieważ linkowanie jest jedną z supermocy internetu, mamy nadzieję na pozyskanie ruchu od użytkowników, którzy zobaczą udostępniony link w serwisach społecznościowych lub otrzymają go w wiadomościach na czacie, a nawet w zwykłym e-mailu.

Nowoczesny sposób

Korzystanie z interfejsu Web Share API

Interfejs Web Share API umożliwia użytkownikowi udostępnianie danych, takich jak adres URL strony, na której się znajduje, a także tytuł i tekst opisowy. Metoda navigator.share() interfejsu Web Share API wywołuje natywny mechanizm udostępniania urządzenia. Zwraca obietnicę i przyjmuje 1 argument z danymi do udostępnienia. Możliwe wartości to:

  • url: ciąg znaków reprezentujący adres URL do udostępnienia.
  • text: ciąg znaków reprezentujący tekst do udostępnienia.
  • title: ciąg znaków reprezentujący tytuł do udostępnienia. Może zostać zignorowany przez przeglądarkę.

Browser Support

  • Chrome: 128.
  • Edge: 93.
  • Firefox: behind a flag.
  • Safari: 12.1.

Source

Klasyczny sposób

Korzystanie z intencji udostępniania w serwisie społecznościowym

Nie wszystkie przeglądarki obsługują jeszcze interfejs Web Share API. Dlatego warto zintegrować się z najpopularniejszymi serwisami społecznościowymi wśród docelowych odbiorców. Popularnym przykładem jest Twitter, którego adres URL Web Intent umożliwia udostępnianie tekstu i adresu URL. Metoda ta zwykle polega na utworzeniu adresu URL i otwarciu go w przeglądarce.

Uwagi dotyczące interfejsu

Dobrym pomysłem jest przestrzeganie ustalonej ikony udostępniania platformy zgodnie z wytycznymi dotyczącymi interfejsu dostawców systemów operacyjnych.

  • Windows:
  • Apple:
  • Android i inne systemy operacyjne:

Progresywne ulepszanie

Poniższy fragment kodu używa interfejsu Web Share API, jeśli jest obsługiwany, a następnie wraca do adresu URL Web Intent Twittera.

// 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');
});

Więcej informacji

Prezentacja

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');
});