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 仪表板上找到。通过在 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

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

data-description

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

验证

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

需要更多帮助?

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

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

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

转到 GitHub