amp-social-share

1.0 0.1

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

用法

amp-social-share 组件为社交平台显示社交分享按钮。

示例：基本社交分享按钮

分享按钮会为您猜测一些预先配置的提供商的默认值。它假定当前文档规范 URL 是您要分享的 URL，页面标题是您要分享的文本。

<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-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

指定打开目标的 target。对于 iOS 上的电子邮件/短信以外的所有情况，默认值为 _blank，在这种情况下，target 设置为 _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'] {
  background: red;
  background-image: url(datauri:svg/myownsvgicon);
}

自定义 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 验证器规范中的 amp-social-share 规则。