">文档:<amp-addthis> - amp.dev - AMP 框架
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. 最后但并非最不重要的一点,将内联代码复制并粘贴到您希望分享按钮出现的页面的正文部分。对于浮动分享按钮,您可以将此代码放置在正文的任何位置,因为它会根据您在工具设置中设置的位置自动出现在屏幕的左侧或右侧。

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

查看我们的 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 仪表盘 中。特定工具的小组件 ID 可通过在 AddThis 仪表盘中打开该工具并复制 URL 的最后一部分来找到。例如,在 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-addthis 规则,了解 AMP 验证器规范。

需要更多帮助?

您已经阅读了本文档很多遍,但它并没有真正涵盖您所有的问题?也许其他人也有同样的感觉:在 Stack Overflow 上联系他们。

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

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

转到 GitHub