Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

ユーザーが現在閲覧しているウェブサイトを共有できるようにする方法

Thomas Steiner

ユーザーが閲覧しているウェブサイトを共有できるようにすることは、多くのニュースサイト、ブログ、ショッピングサイトで採用されている一般的なウェブアプリのパターンです。リンクはウェブの強力な機能の 1 つであるため、ソーシャルネットワーキングサイトで共有リンクを見たユーザーや、チャットメッセージやメールでリンクを受け取ったユーザーからのトラフィックを獲得することが期待できます。

従来の方法

ソーシャルネットワーキングサイトの共有インテントの使用

すべてのブラウザが Web Share API をサポートしているわけではありません。そのため、代替として、ターゲットオーディエンスに最も人気のあるソーシャルネットワークサイトと統合します。一般的な例として Twitter の Web Intent URL があります。この URL を使用すると、テキストと URL を共有できます。通常、この方法は URL を作成してブラウザで開くことで行います。

UI に関する考慮事項

オペレーティングシステムベンダーの UI ガイドラインに従って、プラットフォームで確立された共有アイコンを使用することをおすすめします。

Windows:
Apple:
Android およびその他のオペレーティングシステム:

プログレッシブエンハンスメント

次のスニペットでは、Web Share API がサポートされている場合はその API を使用し、サポートされていない場合は Twitter の Web Intent URL にフォールバックします。

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

ユーザーが現在閲覧しているウェブサイトを共有できるようにする方法

最新の方法

Web Share API の使用

従来の方法

ソーシャルネットワーキングサイトの共有インテントの使用

UI に関する考慮事項

プログレッシブエンハンスメント

関連情報

デモ

HTML

CSS

JS

ユーザーが現在閲覧しているウェブサイトを共有できるようにする方法 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

最新の方法

Web Share API の使用

従来の方法

ソーシャル ネットワーキング サイトの共有インテントの使用

UI に関する考慮事項

プログレッシブ エンハンスメント

関連情報

デモ

HTML

CSS

JS

ユーザーが現在閲覧しているウェブサイトを共有できるようにする方法

ソーシャルネットワーキングサイトの共有インテントの使用

プログレッシブエンハンスメント