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 用作 Web 组件或 React 函数组件

↓ Web 组件 ↓ React/Preact

Web 组件

你必须包含每个 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 包含一些流行的预配置提供商。这些提供商的按钮使用提供商的官方颜色和徽标进行样式化。默认宽度为 60px，默认高度为 44px。

自定义样式

有时您希望提供您自己的样式。您可以简单地覆盖提供的样式，如下所示

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 规则集通过将 outline 属性设置为 none 来移除所有 bento-social-share 元素上的焦点指示器。第二个规则集指定红色轮廓（而不是默认蓝色），还将具有 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 组件提供一些预配置提供商，它们知道其分享端点以及一些默认参数。

提供商	类型	参数
Web Share API（触发操作系统共享对话框）	`系统`	`data-param-text`：可选
电子邮件	`电子邮件`	`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`：可选
短信	`短信`	`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>

由于这些提供商未预先配置，因此您需要为提供商创建适当的按钮图片和样式。

属性

类型（必需）

选择提供商类型。对于预先配置的和未配置的提供商，此项都是必需的。

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 元素进行选项卡切换。

默认焦点指示器通过以下 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` 属性设置参数
Web Share API（触发操作系统共享对话框）	`系统`	`text`：可选
电子邮件	`电子邮件`	`subject`：可选 `body`：可选 `recipient`：可选
Facebook	`Facebook`	`app_id`：必需，默认为：无。此参数是 Facebook 分享对话框所需的 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`：可选
短信	`短信`	`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>

由于这些提供商未预先配置，因此您需要为提供商创建适当的按钮图片和样式。

属性

类型（必需）

选择提供商类型。对于预先配置的和未配置的提供商，此项都是必需的。

background

有时您希望提供自己的样式。您只需通过为背景指定颜色来覆盖提供的样式。

在自定义 BentoSocialShare 图标的样式时，请确保自定义图标符合提供商（例如 Twitter、Facebook 等）制定的品牌指南。

color

有时您希望提供自己的样式。您只需通过为填充指定颜色来覆盖提供的样式。

在自定义 BentoSocialShare 图标的样式时，请确保自定义图标符合提供商（例如 Twitter、Facebook 等）制定的品牌指南。

target

指定在其中打开目标的目标。对于 iOS 上的电子邮件/短信以外的所有情况，默认值为 _blank，在这种情况下，目标设置为 _top。

endpoint

此属性对于未配置的提供商是必需的。

一些热门提供商已预先配置了共享端点。有关详细信息，请参阅预先配置的提供商部分。对于未配置的提供商，您需要指定共享端点。

params

所有 param 属性都作为网址参数传递，并传递给分享端点。

aria-label

按钮的可访问性描述。建议的标签是“在 <type> 上分享”。

<head>

<body>

Web 组件

通过 npm 导入

通过 <script> 包含

示例

<head>

<body>

布局和样式

容器类型

默认样式

自定义样式

辅助功能

焦点指示

颜色对比度

预配置提供商

未配置的提供商

示例：为未配置的提供商创建分享按钮

属性

类型（必需）

data-target

data-share-endpoint

data-param-*

aria-label

API 示例

<head>

<body>

Preact/React 组件

通过 npm 导入

布局和样式

容器类型

辅助功能

焦点指示

颜色对比度

预配置提供商

未配置的提供商

示例：为未配置的提供商创建分享按钮

属性

类型（必需）

background

color

target

endpoint

params

aria-label

通过 `<script>` 包含