Bento 社交分享

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>bento-social-share</title>
    <script src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-social-share-1.0.css"
    />
    <script
      async
      src="https://cdn.ampproject.org/v0/bento-social-share-1.0.js"
    ></script>
    <script
      async
      src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js"
    ></script>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
          'Segoe UI Symbol';
        background: #ecf1f3;
        display: flex;
        height: 100vh;
      }
      .social-share-group {
        display: grid;
        grid-template-columns: repeat(4, min-content);
        gap: 8px;
        margin: auto;
      }
      bento-social-share {
        border-radius: 8.4px;
        height: calc(8vw + 1.5em) !important;
        width: calc(8vw + 1.5em) !important;
        cursor: pointer;
        box-shadow: 0 8px 16px 0 rgba(0, 43, 57, 0.15);
        transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
          box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
      }
      bento-social-share:hover {
        transform: translateY(-0.125em);
        box-shadow: 0 25px 20px -15px rgba(0, 43, 57, 0.15);
      }
      bento-social-share[type='email'] {
        color: #002b39;
        background: #fff;
      }
      bento-social-share[type='facebook'] {
        color: #32529f;
        background: #fff;
        border-radius: 50%;
      }
      bento-social-share[type='twitter'] {
        color: #fff;
        background: #1da1f2;
      }
      bento-social-share[type='linkedin'] {
        color: #fff;
        background: #0077b5;
      }
      bento-social-share[type='pinterest'] {
        color: #e60023;
        background: #fff;
        border-radius: 50%;
      }
      bento-social-share[type='tumblr'] {
        color: #fff;
        background: #3c5a77;
      }
      bento-social-share[type='whatsapp'] {
        color: #fff;
        background: #25d366;
      }
      bento-social-share[type='line'] {
        color: #fff;
        background: #52b448;
      }
    </style>

</head>

<body>

    <div class="social-share-group">
      <bento-social-share
        type="email"
        aria-label="Share via email"
      ></bento-social-share>
      <bento-social-share
        type="facebook"
        aria-label="Share on Facebook"
      ></bento-social-share>
      <bento-social-share
        type="twitter"
        aria-label="Share on Twitter"
      ></bento-social-share>
      <bento-social-share
        type="linkedin"
        aria-label="Share on Linkedin"
      ></bento-social-share>
      <bento-social-share
        type="pinterest"
        aria-label="Share on pinterest"
      ></bento-social-share>
      <bento-social-share
        type="tumblr"
        aria-label="Share on tumblr"
      ></bento-social-share>
      <bento-social-share
        type="whatsapp"
        aria-label="Share on whatsapp"
      ></bento-social-share>
      <bento-social-share
        type="line"
        aria-label="Share on line"
      ></bento-social-share>
    </div>
    <script>
      (async () => {
        await customElements.whenDefined('bento-social-share');
      })();
    </script>

</body>

顯示社群平台或系統分享的分享按鈕。

目前，Bento 社交分享產生的按鈕（包括預先建構的供應商提供的按鈕）都沒有標籤或輔助技術（例如螢幕閱讀器）可用的可取用名稱。請務必加入包含說明性標籤的 aria-label，否則這些控制項只會宣告為未標籤的「按鈕」元素。

將 bento-social-share 作為網頁元件或 React 函數元件使用

↓ 網頁元件 ↓ React/Preact

網頁元件

您必須加入每個 Bento 元件的必要 CSS 函式庫來保證正確載入，並在加入自訂樣式之前進行。或使用內建的輕量化預升級樣式。請參閱配置及樣式。

透過 npm 匯入

npm install @bentoproject/social-share

import {defineElement as defineBentoSocialShare} from '@bentoproject/social-share';
defineBentoSocialShare();

透過 `<script>` 加入

<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-social-share-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-social-share-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-social-share-1.0.css" crossorigin="anonymous">

範例

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-social-share-1.0.css"
    />
    <script
      async
      src="https://cdn.ampproject.org/v0/bento-social-share-1.0.js"
    ></script>
    <style>
      bento-social-share {
        width: 375px;
        height: 472px;
      }
    </style>

</head>

<body>

<bento-social-share
      id="my-share"
      type="twitter"
      aria-label="Share on Twitter"
    ></bento-social-share>

    <div class="buttons" style="margin-top: 8px">
      <button id="change-share">Change share button</button>
    </div>

    <script>
      (async () => {
        const socialShare = document.querySelector('#my-share');
        await customElements.whenDefined('bento-social-share');

        // set up button actions
        document.querySelector('#change-share').onclick = () => {
          socialShare.setAttribute('type', 'linkedin');
          socialShare.setAttribute('aria-label', 'Share on LinkedIn');
        };
      })();
    </script>

</body>

配置及樣式

每個 Bento 元件都有個小型 CSS 函式庫，您必須加入它來保證在沒有內容轉移的情況下正確載入。因為是基於順序調整優先級，您必須手動確保將樣式表加入到任何自訂樣式之前。

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-social-share-1.0.css"
/>

或者您也可以讓輕量化的預升級樣式內建可用

<style>
  bento-social-share {
    display: inline-block;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    width: 60px;
    height: 44px;
  }
</style>

容器類型

bento-social-share 元件已定義配置大小類型。為了確保元件正確呈現，請務必透過想要的 CSS 配置（例如透過 height、width、aspect-ratio 或其他此類屬性定義的配置）將大小套用至元件及其子代物件（幻燈片）。

bento-social-share {
  height: 100px;
  width: 100px;
}

預設樣式

預設情形下，bento-social-share 包含一些受歡迎的預先建構的供應商。這些供應商的按鈕會套用該供應商的正式顏色和標誌來設定樣式。預設寬度是 60 個像素，預設高度是 44 個像素。

自訂樣式

有時候您可能想提供自己的樣式。您可以輕易地覆寫提供的樣式，如下所示

bento-social-share[type='twitter'] {
  color: blue;
  background: red;
}

在自訂 bento-social-share 圖示的樣式時，請確保自訂圖示符合供應商設定的品牌指南（例如 Twitter、Facebook 等）。

可取用性

焦點指示

bento-social-share 元素預設使用藍色外框作為可見的焦點指示器。它也預設為 tabindex=0，讓使用者可以輕鬆透過多個 bento-social-share 元素標籤後，在頁面上一起使用它們。

預設的焦點指示器是透過以下 CSS 規則組達成。

bento-social-share:focus {
  outline: #0389ff solid 2px;
  outline-offset: 2px;
}

預設的焦點指示器可以用來自訂焦點的 CSS 樣式，並將它們包含在 style 標籤中覆寫。在下方的範例中，第一個 CSS 規則組會移除所有 bento-social-share 元素中的焦點指示器，方法是將 outline 屬性設為 none。第二個規則組指定紅色的外框（取代預設的藍色），並將類別為 custom-focus 的所有 bento-social-share 元素的 outline-offset 設為 3px。

bento-social-share:focus {
  outline: none;
}

bento-social-share.custom-focus:focus {
  outline: red solid 2px;
  outline-offset: 3px;
}

使用這些 CSS 規則，bento-social-share 元素不會顯示可見的焦點指示器，除非它們包含類別 custom-focus，否則就會有紅色的外框指示器。

顏色對比度

請注意，type 值為 twitter、whatsapp 或 line 的 bento-social-share 會顯示一個按鈕，其前景/背景色彩組合低於 WCAG 2.1 SC 1.4.11 非文字對比中針對非文字內容建議的 3:1 臨界值。

如果對比度不足，內容可能會難以感知，因此難以識別。極端的情況下，對比度較低的內容對有色覺障礙的人來說甚至可能完全看不見。上述分享按鈕的情況是，使用者可能無法適當地感知/了解分享控制項是什麼，以及它們與什麼服務相關。

預先配置的提供者

bento-social-share 元件提供一些預先配置的提供者，已得知分享端點以及一些預設參數。

提供者	類型	參數
網路分享 API（觸發作業系統分享對話框）	`system`	`data-param-text`：選擇性
電子郵件	`email`	`data-param-subject`：選擇性 `data-param-body`：選擇性 `data-param-recipient`：選擇性
Facebook	`facebook`	`data-param-app_id`：必要，預設為：無。這個參數是 Facebook 分享對話框所需的 Facebook `app_id`。 `data-param-href`：選擇性 `data-param-quote`：選擇性，可用於分享引言或文字。
LinkedIn	`linkedin`	`data-param-url`：選擇性
Pinterest	`pinterest`	`data-param-media`：選擇性（但強烈建議設定）。在 Pinterest 上分享媒體的網址。若未設定，Pinterest 會要求最終使用者上傳媒體。 `data-param-url`：選擇性 `data-param-description`：選擇性
Tumblr	`tumblr`	`data-param-url`：選擇性 `data-param-text`：選擇性
Twitter	`twitter`	`data-param-url`：選擇性 `data-param-text`：選擇性
Whatsapp	`whatsapp`	`data-param-text`：選擇性
LINE	`line`	`data-param-url`：選擇性 `data-param-text`：選擇性
簡訊	`sms`	`data-param-body`：選擇性

未設定的供應商

除了預設的供應商外，你可以在 bento-social-share 元件中指定額外的屬性來使用未設定的供應商。

下列範例透過將 data-share-endpoint 屬性設定為 Facebook Messenger 自訂通訊協定的正確端點，來建立一個透過 Facebook Messenger 分享的按鈕。

<bento-social-share
  type="facebookmessenger"
  data-share-endpoint="fb-messenger://share"
  data-param-text="Check out this article: TITLE - CANONICAL_URL"
  aria-label="Share on Facebook Messenger"
>
</bento-social-share>

由於這些供應商未預先設定，你必須為供應商建立適當的按鈕圖片和樣式。

屬性

type (必要)

選取一種供應商類型。對於預先設定和未設定的供應商來說，這都是必要的。

data-target

指定要開啟目標的目標。除了 iOS 上的電子郵件/簡訊外，預設值皆為 _blank，而目標會設定為 _top。

這個屬性是未設定的供應商所需要的。

一些熱門供應商已預先設定好分享端點。更多詳細資訊請參考預先設定的供應商部分。對於未設定的供應商，你需要指定分享端點。

data-param-*

所有附有 data-param-* 前置屬性的屬性都會轉成 URL 參數，並傳送到分享端點。

aria-label

用於無障礙存取的按鈕描述。建議的標籤為「在<type>上分享」。

API 範例

透過程式方式變更任何屬性值，將自動更新元素。例如，透過變更 type 屬性，你可以切換不同的分享供應商。

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-social-share-1.0.css"
    />
    <script
      async
      src="https://cdn.ampproject.org/v0/bento-social-share-1.0.js"
    ></script>
    <style>
      bento-social-share {
        width: 375px;
        height: 472px;
      }
    </style>

</head>

<body>

<bento-social-share
      id="my-share"
      type="twitter"
      aria-label="Share on Twitter"
    ></bento-social-share>

    <div class="buttons" style="margin-top: 8px">
      <button id="change-share">Change share button</button>
    </div>

    <script>
      (async () => {
        const socialShare = document.querySelector('#my-share');
        await customElements.whenDefined('bento-social-share');

        // set up button actions
        document.querySelector('#change-share').onclick = () => {
          socialShare.setAttribute('type', 'linkedin');
          socialShare.setAttribute('aria-label', 'Share on LinkedIn');
        };
      })();
    </script>

</body>

Preact/React 元件

透過 npm 匯入

npm install @bentoproject/social-share

import React from 'react';
import {BentoSocialShare} from '@bentoproject/social-share/react';
import '@bentoproject/social-share/styles.css';

function App() {
  return (
    <BentoSocialShare
      type="twitter"
      aria-label="Share on Twitter"
    ></BentoSocialShare>
  );
}

配置及樣式

容器類型

BentoSocialShare 元件有一個已定義的版面大小類型。為了確保元件能正確呈示，務必透過所需的 CSS 版面 (例如以 height、width、aspect-ratio 或其他類似屬性定義的版面) 將大小套用到元件及元件的直接子項 (投影片)。這些大小可用内聯方式套用

<BentoSocialShare
  style={{width: 50, height: 50}}
  type="twitter"
  aria-label="Share on Twitter"
></BentoSocialShare>

或者透過 className

<BentoSocialShare
  className="custom-styles"
  type="twitter"
  aria-label="Share on Twitter"
></BentoSocialShare>

.custom-styles {
  height: 50px;
  width: 50px;
}

可取用性

焦點指示

BentoSocialShare 元素預設將藍色輪廓設定為可見的焦點指標。它也預設 tabindex=0，使用戶能輕鬆地在同一頁面上為多個 BentoSocialShare 元素中的一個按下 Tab 鍵進行瀏覽。

預設的焦點指示器是透過以下 CSS 規則組達成。

BentoSocialShare:focus {
  outline: #0389ff solid 2px;
  outline-offset: 2px;
}

可以透過為焦點定義 CSS 樣式，並將其包含在 AMP HTML 頁面的 style 標籤中，來覆寫預設的焦點指標。在下列範例中，第一個 CSS 規則集透過將 outline 屬性設定為 none，來移除所有 BentoSocialShare 元素上的焦點指標。第二個規則集則為所有具有 custom-focus 類別的 BentoSocialShare 元素指定一個紅色輪廓 (取代預設的藍色)，並將 outline-offset 設定為 3px。

BentoSocialShare:focus {
  outline: none;
}

BentoSocialShare.custom-focus:focus {
  outline: red solid 2px;
  outline-offset: 3px;
}

使用這些 CSS 規則，BentoSocialShare 元素不會顯示可見的焦點指示器，除非在裡面包含類別 custom-focus，這種情況下它們會有紅色的外框指示器。

顏色對比度

請注意，帶有 type 值為 twitter、whatsapp 或 line 的 BentoSocialShare 將顯示一個按鈕，其前景/背景顏色組合低於在 WCAG 2.1 SC 1.4.11 非文字對比中定義的非文字內容所建議的 3:1 門檻。

預先配置的提供者

BentoSocialShare 元件提供一些已預先設定的提供者，它們知道自己的分享終端點和一些預設參數。

提供者	類型	透過 `param` 道具傳遞參數
網路分享 API（觸發作業系統分享對話框）	`system`	`text`：選用
電子郵件	`email`	`subject`：選用 `body`：選用 `recipient`：選用
Facebook	`facebook`	`app_id`：必填，預設值：無。此參數是 Facebook Share 對話方塊所需的 Facebook `app_id`。 `href`：選用 `quote`：選用，可於分享引言或文字。
LinkedIn	`linkedin`	`url`：選用
Pinterest	`pinterest`	`media`：選用（但強烈建議設定）。Pinterest 上要分享的媒體網址。如果未設定，最終使用者會被 Pinterest 要求上傳媒體。 `url`：選用 `description`：選用
Tumblr	`tumblr`	`url`：選用 `text`：選用
Twitter	`twitter`	`url`：選用 `text`：選用
Whatsapp	`whatsapp`	`text`：選用
LINE	`line`	`url`：選用 `text`：選用
簡訊	`sms`	`body`：選用

未設定的供應商

除了預先設定的提供者，您還可以透過在 BentoSocialShare 元件中指定額外的屬性來使用非設定提供者。

下列範例透過將 data-share-endpoint 屬性設定為 Facebook Messenger 自訂通訊協定的正確端點，來建立一個透過 Facebook Messenger 分享的按鈕。

<BentoSocialShare
  type="facebookmessenger"
  data-share-endpoint="fb-messenger://share"
  data-param-text="Check out this article: TITLE - CANONICAL_URL"
  aria-label="Share on Facebook Messenger"
>
</BentoSocialShare>

由於這些供應商未預先設定，你必須為供應商建立適當的按鈕圖片和樣式。

道具

type (必要)

選取一種供應商類型。對於預先設定和未設定的供應商來說，這都是必要的。

background

有時您想要提供自己的樣式。您只需提供一個背景顏色就可以覆寫提供的樣式。

當自訂 BentoSocialShare 圖示的樣式時，請確認自訂圖示符合提供者（例如 Twitter、Facebook 等）設定的品牌指南。

color

有時您想要提供自己的樣式。您只需提供一個填色就可以覆寫提供的樣式。

當自訂 BentoSocialShare 圖示的樣式時，請確認自訂圖示符合提供者（例如 Twitter、Facebook 等）設定的品牌指南。

target

指定要開啟目標的目標。除了 iOS 上的電子郵件/簡訊外，預設值皆為 _blank，而目標會設定為 _top。

endpoint

對於非設定提供者，此道具必填。

一些熱門供應商已預先設定好分享端點。更多詳細資訊請參考預先設定的供應商部分。對於未設定的供應商，你需要指定分享端點。

params

所有 param 屬性都會傳遞為 URL 參數，並傳遞至分享終端點。

aria-label

用於無障礙存取的按鈕描述。建議的標籤為「在<type>上分享」。

<head>

<body>

網頁元件

透過 npm 匯入

透過 <script> 加入

範例

<head>

<body>

配置及樣式

容器類型

預設樣式

自訂樣式

可取用性

焦點指示

顏色對比度

預先配置的提供者

未設定的供應商

範例：為未設定的供應商建立分享按鈕

屬性

type (必要)

data-target

data-share-endpoint

data-param-*

aria-label

API 範例

<head>

<body>

Preact/React 元件

透過 npm 匯入

配置及樣式

容器類型

可取用性

焦點指示

顏色對比度

預先配置的提供者

未設定的供應商

範例：為未設定的供應商建立分享按鈕

道具

type (必要)

background

color

target

endpoint

params

aria-label

透過 `<script>` 加入