share button

share-button

ネイティブOS共有オプションを使用してWebページを共有するWebコンポーネント。

デモ|さらに読む

例

一般的な使用例：

 < script type =" module " src =" share-button.js " > </ script >

< share-button >
  < button > Share </ button >
</ share-button >

フォールバックリンクを使用した例：

 < script type =" module " src =" share-button.js " > </ script >

< share-button >
  < button > Share </ button >
  < a
    href =" https://twitter.com/intent/tweet/?url=https://website.com&amp;text=Example&amp;via=DavidDarnes "
  >
    Post to Twitter
  </ a >
  < a href =" https://facebook.com/sharer/sharer.php?u=https://website.com " >
    Post to Facebook
  </ a >
  < a
    href =" https://www.linkedin.com/shareArticle?url=https://website.com&amp;title=Example&amp;source=Title&amp;mini=true "
  >
    Post to LinkedIn
  </ a >
  <!-- Find more sharing links here https://codepen.io/daviddarnes/pen/GRJgoxy -->
</ share-button >
< style >
  share-button:not(:defined) button,
  share-button:defined a {
    display: none;
  }
  share-button:not(:defined) a + a {
    margin-inline-start: 1ch;
  }
</ style >

フォールバックを使用した例readonly入力：

 < script type =" module " src =" share-button.js " > </ script >

< share-button >
  < button > Share </ button >
  < label >
    Share this page
    < input
      type =" url "
      readonly
      value =" https://daviddarnes.github.io/share-button/demo.html "
      onclick =" this.select() "
    />
  </ label >
</ share-button >
< style >
  share-button:not(:defined) button,
  share-button:defined label {
    display: none;
  }
</ style > 

特徴

このWebコンポーネントを使用すると、次のことができます。

• 標準button要素を使用して、ネイティブOS共有オプションを表示して、現在のWebページを共有します

インストール

いくつかのオプションがあります（これらのいずれかを選択してください）：

1. NPM経由でインストール： npm install @daviddarnes/share-button
2. GitHubからプロジェクトに手動でソースをダウンロードします。
3. この手順をスキップし、サードパーティのCDNを介してスクリプトを直接使用します（生産の使用にはお勧めしません）

使用法

プロジェクトに<script>を含めることを確認してください（これらのいずれかを選択してください）。

 <!-- Host yourself -->
< script type =" module " src =" share-button.js " > </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/share-button.js "
> </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://esm.sh/@daviddarnes/[email protected] "
> </ script > 

クレジット

次の人々に感謝します：

• このWebコンポーネントのレポンテンプレートを刺激してくれたZach Leatherman