AMP

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>

显示社交分享按钮。

必需脚本
<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