📅 最后修改于: 2023-12-03 15:08:37.432000 🧑 作者: Mango
Google AMP (Accelerated Mobile Pages) 是一种针对移动设备优化的网页开发技术，它的目的是提供更快速、更流畅的移动浏览体验。如果你正在开发 Google AMP 页面并需要添加浮动的社交分享按钮，那么 amp-addthis 组件是一个不错的选择。
amp-addthis 是一个基于 AddThis 平台的 AMP 标签，它可以轻松地在 Google AMP 页面中添加浮动的社交分享按钮，在不影响页面性能的情况下提升网站的社交共享效果。AddThis 是一个第三方社交分享平台，它提供了数百种社交按钮样式和配置选项，随时可用。
在使用 amp-addthis 前，你需要在 AddThis 网站上注册和创建一个账号，并创建一个社交分享工具箱，该工具箱包含了你要添加的社交分享按钮的样式和配置。你可以根据自己的需求自定义工具箱，然后将它的 ID 复制到 Google AMP 页面中即可。
下面是一个使用 amp-addthis 的示例：
<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Google AMP Example</title>
<link rel="canonical" href="self.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-addthis" src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js"></script>
</head>
<body>
<amp-addthis layout="fixed" width="60" height="60"
data-url="https://example.com"
data-title="Google AMP Example"
data-description="This is a Google AMP example page."
data-media="https://example.com/image.jpg"
data-preview="https://example.com/preview.jpg"
data-tools="addthis_default">
</amp-addthis>
</body>
</html>
在这个示例中，我们首先引入了 AMP 和 amp-addthis 组件的 JavaScript 文件，然后在 body 中添加了一个 amp-addthis 标签，并设置了它的高度、宽度和其他属性。
其中，data-url、data-title、data-description、data-media 和 data-preview 属性是社交分享按钮所需要的一些数据，你需要根据自己的页面自定义这些数据。data-tools 属性则是你在 AddThis 上创建的社交分享工具箱的 ID，用于配置社交分享按钮的样式和配置。
amp-addthis 组件是一种可以帮助你在 Google AMP 页面中添加浮动的社交分享按钮的组件。通过使用该组件，你可以轻松地提升你的网站在社交媒体上的曝光效果，让更多人了解你的网站并分享它。要使用 amp-addthis，你需要在 AddThis 网站上创建一个账号和一个社交分享工具箱，并将工具箱的 ID 嵌入到你的 Google AMP 页面中。