amp-social-share

You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

分享跟踪功能正在开发中。

Required Scripts

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

Supported Layouts

container fill fixed fixed-height flex-item nodisplay responsive

示例

Product Page amp-social-share News Article Recipe Housing Live Blog

显示社交分享按钮。

必需脚本	`<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>`
支持的布局	container、fill、fixed、fixed-height、flex-item、nodisplay、responsive
示例	请参阅 AMP By Example 的 amp-social-share 示例。

概览

amp-social-share 组件会显示一个针对各种社交平台提供商的社交分享按钮。

示例

示例：基本社交分享按钮

分享按钮会针对某些预配置的提供商为您猜测部分默认设置。它假定当前文档规范网址是您要分享的网址，并且网页标题是您要分享的文本。

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

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

属性

type（必需）	选择提供商类型。该属性对预配置的提供商和未配置的提供商而言都是必需的。
data-target	指定要在其中打开目标的目标。对于 iOS 上的电子邮件/短信，默认目标设置为 `_top`，其他所有情况的默认值均为 `_blank`。请注意，我们建议仅针对电子邮件使用此替换值。
data-share-endpoint	此属性是未配置提供商的必需项。一些热门提供商具有预配置的分享端点。如需了解详情，请参阅预配置的提供商部分。对于未配置的提供商，您需要指定分享端点。
data-param-*	所有带 `data-param-*` 前缀的属性都会变成网址参数并传递到分享端点。

预配置的提供商

amp-social-share 组件提供了一些预配置的提供商，这些提供商知道其分享端点及部分默认参数。

提供商	类型	参数
Web Share API（触发操作系统分享对话框）	`system`	`data-param-text`：可选项，默认为“当前网页标题” `data-mode`：可选项；如果设为 `replace`，则会移除所有其他分享选项。
电子邮件	`email`	`data-param-subject`：可选项，默认为“当前网页标题” `data-param-body`：可选项，默认为“`rel=canonical` 网址” `data-param-recipient`：可选项，默认为 ''（空字符串）
Facebook	`facebook`	`data-param-app_id`：必需项，默认为“无”。此参数是 Facebook `app_id`，它是 Facebook 分享对话框所必需的。 `data-param-href`：可选项，默认为“`rel=canonical` 网址” `data-param-quote`：可选项，可用于分享引文或文本。
LinkedIn	`linkedin`	`data-param-url`：可选项，默认为“`rel=canonical` 网址”
Pinterest	`pinterest`	`data-param-media`：可选项（但强烈建议设置该选项），默认为“无”。要在 Pinterest 上分享的媒体的网址。如果未设置，则最终用户需要通过 Pinterest 上传媒体。 `data-param-url`：可选项，默认为“`rel=canonical` 网址” `data-param-description`：可选项，默认为“当前网页标题”
Google+	`gplus`	`data-param-url`：可选项，默认为“`rel=canonical` 网址”
Tumblr	`tumblr`	`data-param-url`：可选项，默认为“`rel=canonical` 网址” `data-param-text`：可选项，默认为“当前网页标题”
Twitter	`twitter`	`data-param-url`：可选项，默认为“`rel=canonical` 网址” `data-param-text`：可选项，默认为“当前网页标题”
WhatsApp	`whatsapp`	`data-param-text`：可选项，默认为“当前网页标题 - 当前网页网址”
LINE	`line`	`data-param-url`：可选项，默认为“`rel=canonical` 网址” `data-param-text`：可选项，默认为“当前网页标题”
短信	`sms`	`data-param-body`：可选项，默认为“`rel=title - rel=canonical` 网址”

未配置的提供商

除了预配置的提供商之外，您还可以通过在 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">
</amp-social-share>

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

样式

默认样式

默认情况下，amp-social-share 包含一些热门的预配置提供商。这些提供商的按钮样式与提供商的官方颜色和徽标样式一致。默认宽度为 60 像素，默认高度为 44 像素。

如需了解您可以在 AMP 网页中使用的已预设样式的自适应分享链接，请访问 AMP Start。

自定义样式

有时，您可能希望使用您自己的样式。您可以通过下述方式将默认样式替换为您的自定义样式：

amp-social-share[type="twitter"] {
  background: red;
  background-image: url(datauri:svg/myownsvgicon);
}

变量替换

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

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

验证

请参阅 AMP 验证工具规范中的 amp-social-share 规则。

需要更多帮助？

您已多次阅读本文档，但它仍未能涵盖您的所有问题？也许其他人也这么觉得：在 Stack Overflow 上与他们联系。

前往 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。

前往 GitHub

amp-social-share 1.0 0.1