AMP

amp-addthis

描述

显示 AddThis 可自定义的社交分享按钮。

 

必需脚本

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

示例

用法

amp-addthis 组件提供了在 AMP 页面中集成 AddThis 分享按钮 的功能。网站访问者可以使用 AddThis 分享按钮将内容分享到 200 多个社交渠道,包括 Messenger、WhatsApp、Facebook、Twitter、Pinterest 等。

分享按钮

浮动

放置在页面的侧面、顶部或底部,随着读者的滚动而移动。这是一种在不打扰用户的情况下推广分享的好方法。

示例

<!--
  This example uses a placeholder pubId.
  Please replace the pubId value with your own after
  creating an account on https://www.addthis.com/dashboard.
-->
<amp-addthis
  width="320"
  height="92"
  layout="responsive"
  data-pub-id="ra-5c191331410932ff"
  data-widget-id="957l"
  data-widget-type="floating"
>
</amp-addthis>

内联

将分享按钮集成到您的内容中,以实现无缝的分享体验。

示例

<!--
  This example uses a placeholder pubId.
  Please replace the pubId value with your own after
  creating an account on https://www.addthis.com/dashboard.
-->
<amp-addthis
  width="320"
  height="92"
  data-pub-id="ra-5c191331410932ff"
  data-widget-id="mv93"
  data-widget-type="inline"
>
</amp-addthis>

实施文档

  1. 如果您还没有,您需要 创建一个 AddThis 账户。创建 AddThis 账户是完全免费的,它允许您访问 AddThis 的整套网站工具以及我们深入的分析报告,以便更好地了解您网站的社交流量。
  2. 转到您的 仪表板 并自定义您的分享按钮(AMP 目前仅支持浮动和内联分享按钮)。
  3. 根据您的喜好自定义您的分享按钮,然后点击“激活工具”。这将重定向您到我们的“获取代码”页面。
  4. 最后但并非最不重要的一点,将内联代码复制并粘贴到您希望分享按钮出现的页面的 body 部分。对于浮动分享按钮,您可以将此代码放置在 body 中的任何位置,因为它会根据您在工具设置中的设置自动出现在屏幕的左侧或右侧。

就这样!您应该看到分享按钮出现在您的页面上!

请观看我们的 YouTube 视频,了解分步说明

隐私

AddThis 工具和 AddThis 工具栏从最终用户用于与发布商网站交互或工具栏用户用于与 AddThis 工具栏交互的设备收集信息(“AddThis 数据”)。请阅读完整的 AddThis 隐私政策

AddThis 数据可能包含以下内容:

  • 互联网协议 (IP) 地址、移动广告 ID (MAID)(允许移动应用程序开发人员识别谁在使用他们的移动应用程序)、移动应用程序 ID、浏览器类型、浏览器语言、操作系统类型,以及最终用户访问发布商网站或工具栏的日期和时间
  • 用户使用了工具栏;
  • 在发布商网站上的行为,例如最终用户访问发布商网站的时间长短、最终用户在发布商网站上分享内容的行为以及最终用户在发布商网站上的滚动行为;
  • 最终用户用于查找和导航到发布商网站的引荐 URL 和网络搜索;
  • 输入到 AddThis 工具栏搜索功能中的关键字,以及工具栏用户是否以及何时下载、安装或卸载 AddThis 工具栏;
  • 关于最终用户使用 AddThis 工具的频率以及工具栏用户使用 AddThis 工具栏的频率的信息;以及
  • 从最终用户和工具栏用户的 IP 地址推导出的地理位置数据。

在适用法律要求的范围内,AddThis 数据将被视为个人信息。根据 AddThis 服务条款,发布商需要获得所有必要的最终用户同意和授权,并为向 Oracle 提供从最终用户收集的 AddThis 数据提供任何必要的通知。

支持

如果您在 AMP 上实施 AddThis 时有任何疑问或需要任何帮助,请通过 此处 提交工单或发送电子邮件至 help@addthis.com 联系我们出色的支持团队。

属性

data-pub-id

登录后在 AddThis 仪表板 中的 URL 中找到的 AddThis 发布商 ID。例如,在 URL https://www.addthis.com/dashboard#gallery/pub/ra-5c191331410932ff 中,ra-5c191331410932ff 是发布商 ID。

data-widget-id

要显示的工具的 AddThis 小部件 ID,也可以在 AddThis 仪表板 上找到。可以通过在 AddThis 仪表板中打开特定工具并复制 URL 的最后一部分来找到该工具的小部件 ID。例如,在 URL https://www.addthis.com/dashboard#tool-config/pub/ra-5c191331410932ff/widgetId/957l 中,957l 是小部件 ID。

data-widget-type

描述小部件类型的属性。

  • 浮动:data-widget-type="floating"
  • 内联:data-widget-type="inline"

data-title

可选。如果设置,这是 AddThis 工具在发生分享时尝试分享的标题。如果未设置,将使用包含 amp-addthis 标签的文档的标题。

data-url

可选。如果设置,这是 AddThis 工具在发生分享时尝试分享的 URL。如果未设置,将使用包含 amp-addthis 标签的文档的 location.href 属性。

data-media

可选。如果设置,这是 AddThis 工具在发生分享时尝试分享的一段媒体(例如,图像或视频)的 URL。如果未设置,则保留为未定义。

data-description

可选。如果设置,这是 AddThis 工具在发生分享时尝试分享的页面描述。如果未设置,则保留为未定义。

验证

请参阅 AMP 验证器规范中的 amp-addthis 规则

需要更多帮助?

您已经阅读过这篇文档十几次了,但它并没有真正涵盖您的所有问题?也许其他人也有同样的感觉:请在 Stack Overflow 上联系他们。

转到 Stack Overflow
发现错误或缺少功能?

AMP 项目强烈鼓励您的参与和贡献!我们希望您成为我们开源社区的持续参与者,但也欢迎您为自己特别关注的问题做出一次性贡献。

转到 GitHub