📌  相关文章
📜  如何在 Google AMP 中创建内联 amp-addthis ？(1)

📅  最后修改于: 2023-12-03 15:24:10.965000             🧑  作者: Mango

如何在 Google AMP 中创建内联 amp-addthis？

在Google AMP（Accelerated Mobile Pages）中，可以通过内联amp-addthis来添加AddThis社交分享工具，因此您的用户可以分享您的页面或文章。

准备工作

首先，您需要在AddThis注册一个帐户，获取您的pubid。这将用于将您的计数器和Analytics数据与AddThis联系起来。然后，您需要在您的<head>标签中添加AddThis的JavaScript代码。

<script async custom-element="amp-addthis" src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js"></script>
<script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=<YOUR_PUBID>"></script>

确保将< YOUR_PUBID >替换为您的AddThis帐户中的实际pubid。

创建amp-addthis

在您想要添加社交分享工具的页面或文章中，添加以下代码：

<amp-addthis
  width="60"
  height="60"
  layout="fixed"
  data-url="https://www.example.com/page.html"
  type="addthis"
>
</amp-addthis>

确保将<your_url>替换为您想要分享的实际URL。您还可以更改width和height属性以设置计数器的大小。

完整示例

以下是完整的示例代码：

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>My AMP Page</title>
  <link rel="canonical" href="https://www.example.com/page.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <script async custom-element="amp-addthis" src="https://cdn.ampproject.org/v0/amp-addthis-0.1.js"></script>
  <script type="text/javascript" src="https://s7.addthis.com/js/300/addthis_widget.js#pubid=<YOUR_PUBID>"></script>
  <style amp-custom>
    /* custom CSS goes here */
  </style>
</head>
<body>
  <h1>Welcome to My AMP Page</h1>
  <amp-addthis
    width="60"
    height="60"
    layout="fixed"
    data-url="https://www.example.com/page.html"
    type="addthis"
  >
  </amp-addthis>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida risus in felis sodales, in pulvinar turpis venenatis.</p>
</body>
</html>

注意，在您的<head>标记中，您需要将<YOUR_PUBID>替换为您的AddThis帐户中的实际pubid。

以上即为创建内联amp-addthis的方法。享受社交媒体分享！