amp-social-share

1.0 0.1

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-1.0.js"></script>

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-social-share-1.0.css">

用法

amp-social-share 组件会显示用于社交平台的社交分享按钮。

示例：基本社交分享按钮

对于某些预配置的提供程序，分享按钮会为您猜测一些默认值。它假设当前文档的规范网址是您想要分享的网址，而页面标题是您想要分享的文本。

<amp-social-share
  type="twitter"
  aria-label="Share on Twitter"
></amp-social-share>

示例：传递参数

当您想要将参数传递到共享端点时，您可以指定 data-param-<attribute>，该参数将附加到共享端点。

<amp-social-share
  type="linkedin"
  width="60"
  height="44"
  data-param-text="Hello world"
  data-param-url="https://example.com/"
  aria-label="Share on LinkedIn"
>
</amp-social-share>

Linkedin 是预配置的提供程序之一，因此您无需提供 data-share-endpoint 属性。

在有效的 AMP 文档之外的独立使用

使用 Bento，您可以在非 AMP 页面中使用 AMP 组件，而无需完全提交到有效的 AMP。您可以获取这些组件并将它们放置在使用不支持 AMP 的框架和 CMS 的实现中。请参阅我们的指南在非 AMP 页面中使用 AMP 组件，了解更多信息。

要查找 amp-social-share 的独立版本，请参阅bento-social-share。

预配置的提供程序

amp-social-share 组件提供一些预配置的提供程序，这些提供程序知道它们的共享端点以及一些默认参数。

未配置的提供程序

除了预配置的提供程序之外，您还可以通过在 amp-social-share 组件中指定其他属性来使用未配置的提供程序。

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

以下示例通过将 data-share-endpoint 属性设置为 Facebook Messenger 自定义协议的正确端点，创建通过 Facebook Messenger 进行分享的按钮。

<amp-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"
>
</amp-social-share>

由于这些提供程序不是预配置的，因此您需要为该提供程序创建相应的按钮图像和样式。

变量替换

您可以在 <amp-social-share> 元素中使用全局 AMP 变量替换。在下面的示例中，TITLE 将替换为页面标题，而 CANONICAL_URL 将替换为文档的规范 URL。

<amp-social-share
  type="whatsapp"
  data-param-text="Check out this article: TITLE - CANONICAL_URL"
>
</amp-social-share>

属性

type（必需）

选择提供程序类型。预配置和未配置的提供程序都需要此项。

data-target

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

请注意，我们仅建议将此覆盖用于电子邮件。

data-share-endpoint

非配置的提供程序需要此属性。

一些流行的提供程序具有预配置的共享端点。有关详细信息，请参阅“预配置的提供程序”部分。对于未配置的提供程序，您需要指定共享端点。

data-param-*

所有以 data-param-* 为前缀的属性都会转换为 URL 参数并传递到共享端点。

aria-label

默认情况下，aria-label 属性将填充 Share by type，其中“type”是提供给组件的 type 属性。如果将非空值传递给 aria-label，它将覆盖默认值。

样式

默认样式

默认情况下，amp-social-share 包含一些流行的预配置提供程序。这些提供程序的按钮采用提供程序的官方颜色和徽标设置样式。默认宽度为 60px，默认高度为 44px。

自定义样式

有时您想要提供自己的样式。您可以像下面这样简单地覆盖提供的样式

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

在自定义 amp-social-share 图标的样式时，请确保自定义图标符合提供程序（例如 Twitter、Facebook 等）制定的品牌指南

可访问性

焦点指示

amp-social-share 元素默认使用蓝色轮廓作为可见的焦点指示器。它还默认 tabindex=0，使用户可以轻松地在页面上一起使用的多个 amp-social-share 元素之间切换。

默认焦点指示器是通过以下 CSS 规则集实现的。

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

默认的焦点指示器可以通过为焦点定义 CSS 样式，并将其包含在 AMP HTML 页面上的 style 标签中来覆盖。在下面的示例中，第一个 CSS 规则集通过将 outline 属性设置为 none 来删除所有 amp-social-share 元素上的焦点指示器。第二个规则集指定一个红色轮廓（而不是默认的蓝色），并且还将具有 custom-focus 类的所有 amp-social-share 元素的 outline-offset 设置为 3px。

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

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

使用这些 CSS 规则，amp-social-share 元素将不会显示可见的焦点指示器，除非它们包含 custom-focus 类，在这种情况下它们将具有红色轮廓的指示器。

颜色对比度

请注意，type 值为 twitter、whatsapp 或 line 的 amp-social-share 将显示一个按钮，其前景色/背景色组合低于 WCAG 2.1 SC 1.4.11 非文本对比度 中定义的非文本内容建议的 3:1 阈值。

如果没有足够的对比度，内容可能难以感知，因此难以识别。在极端情况下，对比度低的内容对于有颜色感知障碍的人来说可能完全不可见。对于上述分享按钮，用户可能无法正确感知/理解分享控件是什么，它们与什么服务相关。

版本说明

amp-social-share 的 1.0 版本具有一些与 0.1 版本不同的附加功能。

1. 预配置提供商的默认图标已更新，以反映其关联公司的最新徽标和颜色，因此在迁移到 1.0 时，预计会出现一套新的徽标。
2. 现在可以使用 CSS 设置默认图标的前景色和背景色样式。有关详细信息，请参见上面的“样式”部分。
3. 现在支持在默认图标上使用自定义徽标或文本。如果 amp-social-share 组件有任何子元素，它们现在将显示而不是默认图标。（在 0.1 中，它们会覆盖在现有图标上。）