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. 最后但并非最不重要的一点是,将内嵌代码复制并粘贴到你想要显示分享按钮的页面的主体部分。对于浮动分享按钮,你可以将此代码放置在主体中的任何位置,因为它会根据你在工具设置中的设置自动显示在屏幕的左侧或右侧。

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

观看我们的 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