シェアボタンとは

ページやコンテンツを SNS で共有するためのボタン。スマホでは端末標準の共有シートを、それ以外では各 SNS のリンクを使う。

概要

今見ているページやコンテンツを SNS で共有するためのボタンです。スマホの多くのブラウザが対応している navigator.share() が使える場合は、端末標準の共有シート（メッセージアプリや SNS アプリの一覧）をそのまま呼び出せます。対応していない環境では、X（旧 Twitter）・Facebook・LINE など、各 SNS が用意しているシェア用の URL を新しいタブで開くリンクを個別に並べる形が定番です。

別名

表記ゆれ：SNSボタン、共有ボタン、share button

「SNS ボタン」は X・Facebook・LINE などのアイコンを並べる形式を指すことが多く、「シェアボタン」は navigator.share() を使う 1 個のボタン形式を含めた総称として使われます。

AI への伝え方

「ページ下部にシェアボタンを置いて。navigator.share が使えるスマホでは共有シートを、使えない場合は X・Facebook・LINE のリンクを表示して」のように、対応環境ごとの挙動を伝えます。特定の SNS だけに絞りたい場合はその一覧も伝えます。

似たパーツとの違い

「アイコンボタン」はアイコンだけで用途を示す汎用的なボタンで、シェアボタンはその用途を SNS 共有に限定し、対象の SNS ごとにリンク先が変わる専用のボタンという関係です。

デモ

コード

HTML

<div class="share-button-demo">
  <button class="share-button-demo__native" type="button" hidden>
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <circle cx="18" cy="5" r="3"></circle>
      <circle cx="6" cy="12" r="3"></circle>
      <circle cx="18" cy="19" r="3"></circle>
      <line x1="8.6" y1="10.5" x2="15.4" y2="6.5"></line>
      <line x1="8.6" y1="13.5" x2="15.4" y2="17.5"></line>
    </svg>
    共有する
  </button>

  <ul class="share-button-demo__list">
    <li>
      <a
        class="share-button-demo__link"
        href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fexample.com&text=%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Xでシェア"
      >
        <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
          <circle cx="12" cy="12" r="10" fill="currentColor"></circle>
          <text x="12" y="16" font-size="11" text-anchor="middle" fill="#fff" font-family="sans-serif">X</text>
        </svg>
      </a>
    </li>
    <li>
      <a
        class="share-button-demo__link"
        href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Facebookでシェア"
      >
        <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
          <circle cx="12" cy="12" r="10" fill="currentColor"></circle>
          <text x="12" y="16" font-size="11" text-anchor="middle" fill="#fff" font-family="sans-serif">f</text>
        </svg>
      </a>
    </li>
    <li>
      <a
        class="share-button-demo__link"
        href="https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Fexample.com"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="LINEでシェア"
      >
        <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
          <circle cx="12" cy="12" r="10" fill="currentColor"></circle>
          <text x="12" y="16" font-size="9" text-anchor="middle" fill="#fff" font-family="sans-serif">L</text>
        </svg>
      </a>
    </li>
  </ul>
</div>

CSS

.share-button-demo {
  font-family: sans-serif;
}

.share-button-demo__native {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: #0017c1;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.share-button-demo__native:hover {
  background: #00118f;
}

.share-button-demo__native:focus-visible {
  outline: 2px solid #0017c1;
  outline-offset: 2px;
}

/* hidden 属性の既定スタイル(display: none)は、上の display: inline-flex より
   詳細度が同じため後勝ちで上書きされてしまう。hidden のときは明示的に隠す */
.share-button-demo__native[hidden] {
  display: none;
}

.share-button-demo__list {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.share-button-demo__list[hidden] {
  display: none;
}

.share-button-demo__link {
  display: inline-flex;
  color: #333;
  border-radius: 50%;
}

.share-button-demo__link:hover {
  color: #0017c1;
}

.share-button-demo__link:focus-visible {
  outline: 2px solid #0017c1;
  outline-offset: 2px;
}

const shareButtonDemoNative = document.querySelector(".share-button-demo__native");
const shareButtonDemoList = document.querySelector(".share-button-demo__list");

if (navigator.share) {
  shareButtonDemoNative.hidden = false;
  shareButtonDemoList.hidden = true;

  shareButtonDemoNative.addEventListener("click", async () => {
    try {
      await navigator.share({
        title: "ページタイトル",
        url: "https://example.com"
      });
    } catch (error) {
      // ユーザーが共有をキャンセルした場合は何もしない
    }
  });
}