您可能不知道可以添加到 AMP 页面的 23 个 AMP 组件

已发表: 2019-02-28

快速链接

手风琴
声音的
呼叫跟踪
旋转木马
Facebook
脸书评论
脸书喜欢
脸书专页
字体
形式
地理
框架
图片灯箱
Instagram
灯箱画廊
品趣
像素
红迪网
声云
推特
收藏按钮
AMP 中的付款
星级
获取 AMP 演示

闪闪发光的并不总是金子……或者是吗？

AMP 的创建是为了让移动网络更快，但为此，强制执行了一些限制——比如关于自定义代码、HTML/CSS 和 JavaScript 的限制。 75kb CSS 样式表限制证明了这一点，因为任何超过该限制的网页都将无法通过 AMP 验证。

即使有其局限性，数字营销人员也可以使用许多 AMP 组件自定义页面。这些专门的 HTML 标签的作用类似于传统的 HTML 标签（具有开始和结束标签、属性和一些 CSS 样式功能）并且很容易识别，总是以 amp- 前缀开头。

完整列表可能会持续添加，但以下 23 个 AMP 组件可让您很好地了解自定义 AMP 页面的方式。

（Instapage 现在提供 AMP 自定义代码以启用各种组件。请访问此处了解完整详细信息。）

用于自定义页面的 23 个 AMP 组件

1. 手风琴

将 amp-accordion 添加到您的页面可提供内容大纲，并允许访问者跳转到页面的特定部分。 AMP 手风琴的每个直接“子项”被视为手风琴中的一个部分（每个部分必须仅包含两个直接“子项”），并且该部分的第一个子项被视为部分标题。单击标题将展开或折叠该部分：

AMP 手风琴组件的两个附加选项是嵌套手风琴（将多个手风琴相互嵌套或堆叠）和自动折叠手风琴（一次只允许一个展开部分）。

2. 音频

AMP 使用自己的版本：amp-audio，而不是传统的 HTML5 音频标签。 AMP 音频组件只能用于直接嵌入 HTML5 音频文件，在页面上显示如下：

虽然上面显示的音频控件（播放/暂停、声音/静音和下载）是默认添加的，但可以禁用右侧的下载按钮：

3. 来电追踪

AMP-call-tracking 只是将静态电话号码替换为专为呼叫跟踪分析而设计的电话号码。

4. 旋转木马

AMP carousel 组件沿水平轴显示多张图像，有多种不同的 amp-carousel 格式可供选择。

您可以使用 type=”carousel” 将图像列表显示为连续条带：

或键入 =”slides” 以幻灯片形式显示图像列表：

您还可以选择自动播放属性（仅 type=slides），它会以 5 秒的间隔自动滚动幻灯片，无需用户交互。

5.脸书

AMP Facebook 组件将 Facebook 帖子、图片和视频嵌入到 AMP 页面中，只需要 Facebook URL。

6. 脸书评论

AMP-facebook-comments 允许将 Facebook 评论嵌入到 AMP 页面中。

7.脸书点赞

AMP-facebook-like 允许将 Facebook 点赞按钮嵌入到 AMP 页面中。

8. 脸书专页

AMP-facebook-page 将 Facebook 页面嵌入到 AMP 文件中，只需要 Facebook 页面的 href。 AMP Facebook 页面组件甚至允许您在 Facebook 页面上显示不同的标签。例如，您可以通过指定 data-tabs="timeline, events:" 来显示时间线和事件选项卡：

9. 字体

AMP 字体组件允许您在文档的正文或标题中使用自定义字体设计页面：

如果不支持所选字体，它将显示为纯红色文本：

10.表格

AMP 表单组件使您能够使用详细的潜在客户捕获表单设计 AMP 页面。该扩展还允许您提供具有特殊属性的成功和错误响应，即提交成功和提交错误：

11.地理

AMP 地理扩展允许基于用户位置的近似值（仅限国家/地区级别，类似于 ISO 国家/地区代码级别）的小部分内容。它还提供了将不同位置组合在一起的选项，从而可以更轻松地一次将属性应用于多个地理区域。

12. iFrame

AMP-iframe 通过 iFrame 将内容嵌入到 AMP 页面中，这非常适合显示 AMP 尚不支持的内容（Vimeo、Giphy、Google Maps 等）。

AMP-iframe 允许在运行时调整 iFrame 的大小——无论是在页面加载时（嵌入的 iFrame 将自身调整为 200x200 像素），还是在用户交互时（按下按钮会将 iFrame 调整为 300x300 像素）。此 AMP 组件的唯一限制是它必须离顶部 600 像素，或者滚动到顶部时不在视口的前 75% 内 - 以较小者为准。

13. 图片灯箱

AMP 图像灯箱组件允许用户扩展 AMP 图像以填充视口。您还可以选择在视口底部显示图像标题，如下所示：

14.Instagram

Instagram 视频和照片可以使用 amp-instagram 嵌入到您的 AMP 页面中，使用在每个照片/视频 URL 中找到的数据短代码。您还可以使用 data-captioned 属性包含标题：

15.灯箱画廊

AMP-lightbox-gallery 为其他 AMP 组件提供“灯箱”体验，例如 amp-img 和 amp-carousel（目前仅支持图像）。当访问者与 AMP 元素交互时，UI 组件会扩展以填充视口，直到他们再次关闭它。如果您的页面包含多个元素，只需将 lightbox 属性添加到您希望用户在灯箱中查看的每个图像。

16.品趣

使用 amp-pinterest，在您的页面上添加“Pin it”按钮可让访问者从您的网站固定各种内容：

要添加“固定”按钮，您需要以下属性：

data-url：要分享的网址
data-media：要固定的图像 URL
data-description：Pin 中出现的默认描述

或者您可以嵌入一个完整的 Pin 小部件：

在这种情况下，data-url 属性必须包含 Pinterest 资源的完全限定 URL。

17. 像素

AMP 像素组件是一种跟踪网页浏览量的快速方法。 AMP-pixel 是一个内置组件，不需要加载扩展程序。

18. Reddit

Reddit 帖子和评论都可以通过 amp-reddit 包含在 AMP 页面中。 AMP Reddit 组件要求您在帖子或评论以及嵌入源之间进行指定。嵌入评论时，通过指定 data-embedparent="true" 包括父评论，并通过指定 data-embedlive="true" 包括更新的评论。