AMP

重要提示:此文档不适用于您当前选择的格式电子邮件

amp-addthis

描述

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

 

必需脚本

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

用法

amp-addthis 组件提供了 AddThis 分享按钮 在 AMP 页面中的集成。网站访问者使用 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 服务条款,发布商必须获得所有必要的最终用户同意和授权,并提供任何必要通知,以便将从最终用户收集的 AddThis 数据提供给 Oracle。

支持

如果您有任何问题或在 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

可选。如果设置,这是媒体(例如,图像或视频)的 URL,当发生分享时,AddThis 工具将尝试分享该媒体。如果未设置,则保持未定义状态。

data-description

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

验证

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

需要更多帮助?

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

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

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

转到 GitHub