用于社交媒体集成的 8 个 AMP 组件
Google 的移动网络标准Accelerated Mobile Pages需要解决的最大冲突是让移动网站更快，同时保持它们的功能和内容丰富。如今，如果没有来自流行社交媒体网站（推文、视频、音频、帖子、照片）的嵌入，很难想象丰富而引人入胜的内容。
扩展的 AMP 组件以及其他强大的功能提供了一种将AMP文档与不同社交内容类型集成的好方法。
另请阅读：
加速移动页面 (AMP) 初学者指南
扩展 AMP 组件的工作原理
AMP 理念的核心是 Google 的最佳性能实践。为了缩短页面加载时间，AMP 标准限制了您使用前端技术的方式。例如，您不能使用自定义 JavaScript、外部样式表和任何加载外部资源的 HTML 元素，例如标签<img>。
作为交换，您将获得一堆AMP 组件，可用于在您的网站上显示外部资源，例如图像、视频、音频、广告等。
AMP 组件是特定的 HTML 标签，可以像普通 HTML 标签一样使用。其中一些内置于 AMP 运行时，而大多数作为扩展。使 AMP 页面上的社交媒体集成成为可能的组件都是扩展组件。
另请阅读：
用于移动优化的十大基本 AMP 组件
扩展 AMP 组件要求您在AMP HTML 文档的部分导入相关脚本。<head>由于 AMP 是一个开源项目，未来扩展组件的数量可能会增加。
在这篇文章中，我们收集了一些可以帮助您进行社交媒体集成的AMP 组件。请记住，脚本的版本可能会随着时间的推移而改变，因此在将它们包含在您的站点之前，请务必查看文档。
1.amp-facebook
<amp-facebook> 可以将Facebook 帖子或视频嵌入 AMP 页面。
您始终需要指定嵌入帖子的尺寸，这意味着您需要添加一个width和一个height具有整数像素值的属性。您可以通过单击 Facebook 帖子顶部的“嵌入”菜单找到合适的尺寸。
您还需要在属性中添加给定帖子的 URLdata-href。您可以通过单击 Facebook 帖子的时间戳找到 URL，浏览器会将唯一的 URL 插入地址栏。
如果你想嵌入没有所属 Facebook 帖子的视频，请添加可选data-embed-as="video"属性
如果你想让你的嵌入响应使用layout带有值的属性"responsive"。layout您还可以在任何其他 AMP 组件上使用可选属性来控制其布局。
代码示例：
|
1个
2个
3个
|
<amp-facebook width="500" height="485" layout="responsive" data-href="https://www.facebook.com/hongkiatcom/posts/10154256404668592"></amp-facebook> |
代码预览：
脚本包括：
|
1个
2个
3个
|
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script> |
下面是一个有关如何在完整的 AMP HTML 页面上使用的工作示例。<amp-facebook>
2.amp-twitter
您可以使用该组件将推文<amp-twitter>嵌入 AMP 页面。
为此，您需要在属性中指定推文的 IDdata-tweetid。您可以通过将Twitter API 的任何显示选项添加
为data-*HTML5 属性来修改推文的显示方式。
例如，在下面的示例中，我使用 Twitter API 的linkColor显示选项作为data-link-color（其data-*格式）将默认链接颜色更改为 Hongkiat.com 在其 Twitter 帐户上使用的颜色。
代码示例：
|
1个
2个
3个
|
<amp-twitter width="506" height="338" layout="responsive" data-tweetid="765234426166915072" data-link-color="#698aba"></amp-twitter> |
代码预览：
该<amp-twitter>组件还不完美，Github 文档说Twitter目前不提供产生固定纵横比推文嵌入的 API
。
这意味着您需要手动设置width和height属性，因为 AMP 运行时有时不会显示推文的一部分（通常是底部）。
在发布 AMP 页面之前检查您嵌入的推文的外观始终是个好主意。
添加占位符
虽然这不是必需的，但文档建议添加一个占位符，以防推文没有立即加载。
该placeholder属性可用于每个 AMP 组件。如果最终资源不可用，则会立即显示占位符。当 AMP 元素加载时，它会隐藏其占位符。
看看上面的示例代码如何使用占位符。在 Twitter 上，我只需单击“嵌入推文”按钮，复制粘贴可嵌入的块引用（末尾没有脚本），然后将属性添加placeholder到<blockquote>标签中。
带占位符的代码示例：
|
1个
2个
3个
4个
5个
6个
7
8个
9
10
11
12
13
14
|
<amp-twitter width="506" height="338" layout="responsive" data-tweetid="765234426166915072" data-link-color="#698aba"> <blockquote placeholder class="twitter-tweet" data-lang="en"> <p lang="en" dir="ltr">How to Validate Accelerated Mobile Pages (<a href="https://twitter.com/hashtag/AMP?src=hash">#AMP</a>) <a href="https://twitter.com/hashtag/google?src=hash">#google</a> <a href="https://twitter.com/hashtag/seo?src=hash">#seo</a> <a href="https://t.co/eVOSAtr5Ax">https://t.co/eVOSAtr5Ax</a> </p> — Hongkiat (@hongkiat) <a href="https://twitter.com/hongkiat/status/765234426166915072"> August 15, 2016</a> </blockquote></amp-twitter> |
脚本包括：
|
1个
2个
3个
|
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script> |
查看使用该组件的完整 HTML AMP 页面的示例<amp-twitter>。
3.amp-instagram
借助<amp-instagram>，您可以将 Instagram 照片和视频嵌入到您的 AMP 页面中。
您需要使用和属性指定嵌入的尺寸，还必须使用该属性添加 Instagram 照片或视频的标识符。widthheightdata-shortcode
您可以在 URL 的末尾找到标识符，例如 URL 下面的照片是https://www.instagram.com/p/-PFt7tF8Km/，所以我需要使用-PFt7tF8Kmas 属性的值data-shortcode。
代码示例：
|
1个
2个
3个
|
<amp-instagram data-shortcode="-PFt7tF8Km" width="400" height="400" layout="responsive"></amp-instagram> |
代码预览：
对于响应式布局，AMP 会自动计算所需的空间，其中还包括“Instagram chrome”（帐户名、日期、点赞数等）。
这意味着您可以为width和使用任何值height，直到这两个值相等（Instagram 照片通常是方形的），因为 AMP 运行时会根据可用空间调整图像大小。
如果照片不是正方形，则必须指定其实际值width和height值。
对于固定布局，您需要在计算图像尺寸时包括 Instagram 镶边所需的额外空间（顶部和底部：+48 像素，左右：+8 像素）。
脚本包括：
|
1个
2个
3个
|
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script> |
查看有关如何使用该<amp-instagram>组件的完整 AMP HTML 页面示例。
4.amp-pinterest
<amp-pinterest>允许您将Pin 小部件或Pin It按钮嵌入到 AMP HTML 文档中。
嵌入 Pin 图小部件
要嵌入 Pin 图小部件，您必须使用data-url属性指定尺寸、图钉的 URL，还需要添加data-do="embedPin"属性。
代码示例（默认大小）：
|
1个
2个
3个
|
<amp-pinterest width="245" height="330" data-do="embedPin" data-url="https://uk.pinterest.com/pin/422986589975891640/"></amp-pinterest> |
由于默认的 Pin 图小部件非常小，您还可以使用属性选择更大的版本data-width="medium"。
代码示例（中等大小）：
|
1个
2个
3个
4个
|
<amp-pinterest width="355" height="410" data-do="embedPin" data-width="medium" data-url="https://uk.pinterest.com/pin/422986589975891640/"></amp-pinterest> |
代码预览（中等尺寸）：
显示Pin It按钮
您还可以借助该组件将Pin It按钮添加<amp-pinterest>到您的 AMP 页面。除了width和height尺寸之外，您还需要指定四个属性才能嵌入Pin It按钮：
data-do="buttonPin"让 AMP 运行时知道这将是一个Pin It按钮data-url使用您要分享的网址data-media使用您希望用户固定的图像的绝对 URLdata-description包含您希望在 Pin 图创建表单中显示的描述
有许多不同的按钮尺寸可供选择，请查看所有可用尺寸的文档。
代码示例：
在此示例中，我创建了一个Pin It按钮，允许用户固定来自 Hongkiat.com 前帖子的图像。我使用了小矩形按钮大小。
|
1个
2个
3个
4个
5个
6个
7
8个
9
10
|
<figure> <amp-img src="image.jpg" width="640" height="385" alt="Image Example"> </amp-img> <amp-pinterest height="28" width="56" data-do="buttonPin" data-url="https://www.hongkiat.com/blog/best-android-twitter-clients/" data-media="https://assets.hongkiat.com/uploads/thumbs/640x410/best-android-twitter-clients.jpg" data-description="Best 5 Free Twitter Clients for Android"> </amp-pinterest></figure> |
代码预览：
请注意，您需要使用额外的 CSS才能在图像顶部显示Pin It按钮。
您还可以使用该属性创建一个 Pinterest关注按钮，并在该属性的帐户 URL中指定要在关注按钮data-do="buttonFollow"内显示的名称。data-labeldata-href
代码示例（跟随按钮）：
|
1个
2个
3个
4个
|
<amp-pinterest height="20" width="87" data-do="buttonFollow" data-href="https://www.pinterest.com/hongkiat/" data-label="Hongkiat"></amp-pinterest> |
脚本包括：
|
1个
2个
3个
|
<script async custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script> |
在Github 示例中，您可以看到该<amp-pinterest>组件的许多不同用例。
5.amp-soundcloud
SoundCloud是一个流行的音频分发平台，用户可以在其中分享他们的音乐。借助该<amp-soundcloud>组件，您可以直接从 AMP HTML 页面播放 SoundCloud 曲目。
此组件只能与布局一起使用，fixed-height这意味着您只需指定height，宽度将由 AMP 运行时计算。因此，嵌入式 SoundCloud 音频播放器将填满所有可用的水平空间。
该组件可以以经典模式或可视模式<amp-soundcloud>显示。您可以通过将属性的值设置为或（默认为）来从两种模式中进行选择。data-visualtruefalsefalse
在这两种模式下，您都必须使用data-trackid属性来指定音频的标识符；您可以通过单击 SoundCloud.com 上音频播放器下方的“共享”按钮并在嵌入代码中查找长格式 URL 来找到音频 ID 。
经典模式
左侧显示Classic Mode一个小缩略图，右侧显示音频播放器。height您可以从 SoundCloud.com 上的嵌入代码中获取该属性的正确值。
在经典模式下，如果你想使用该属性，你可以指定音频播放器的颜色data-color（你不能在可视模式下这样做）。
代码示例（经典模式）：
|
1个
2个
3个
|
<amp-soundcloud height="166" layout="fixed-height" data-trackid="264419072" data-color="ff5c44"></amp-soundcloud> |
代码预览（经典模式）：
视觉模式
在 中Visual Mode，特色图像跨越音频播放器的后面。height在这里，您还可以在 SoundCloud.com 的嵌入代码中找到属于 Visual Mode 的正确部分。
代码示例（可视模式）：
|
1个
2个
3个
|
<amp-soundcloud height="450" layout="fixed-height" data-trackid="264419072" data-visual="true"></amp-soundcloud> |
代码示例（可视模式）：
如果要嵌入私有音频，请使用可选data-secret-token属性。
脚本包括：
|
1个
2个
3个
|
<script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script> |
<amp-soundcloud> 在 Github 上查看一些有关如何正确使用的示例。
6.amp-vine
Vine是一个短视频分享网站，您可以在上面与朋友分享 6 秒长的视频。该<amp-vine>组件可以轻松地将Vine 视频嵌入到您的 AMP HTML 页面中。
这个AMP组件很简单，你只需要在属性中添加尺寸，以及Vine视频的ID data-vineid。您可以从每个 Vine 的 URL 中获取 ID。
由于 Vines 是正方形，如果您使用响应式布局，则适用与 Instagram 嵌入相同的规则；您可以向width和height属性添加任何值，直到它们相等，它们才能正常工作。
代码示例：
|
1个
2个
3个
|
<amp-vine width="400" height="400" layout="responsive" data-vineid="hKQjlJPtWKT"></amp-vine> |
代码预览：
脚本包括：
|
1个
2个
3个
|
<script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script> |
看一下组件相关的Github示例<amp-vine>。
7.amp-youtube
您可以借助该组件在 AMP 页面上嵌入 YouTube 视频<amp-youtube>。
为此，您需要添加尺寸以及属性中视频的 ID data-videoid。指定width和时height，一定要注意纵横比。
您还可以在 AMP 文档中使用YouTube 嵌入的参数，只需在data-param-前缀后插入参数名称即可。
代码示例：
在此示例中，我在属性中使用了startYouTube 参数data-param-start以使视频从 43 秒开始。
|
1个
2个
3个
|
<amp-youtube width="480" height="270" layout="responsive" data-videoid="n0PVwYoKQmo" data-param-start="43"></amp-youtube> |
代码预览：
脚本包括：
|
1个
2个
3个
|
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script> |
Github示例展示了在 Accelerated Mobile Pages 上嵌入 Youtube 视频的不同方式。
其他视频共享服务
AMP 还具有与其他视频共享服务相关的组件，其工作方式与<amp-youtube>. 您可以将以下扩展 AMP 组件用于来自 YouTube 以外的提供商的视频嵌入：
<amp-vimeo>对于 Vimeo 嵌入<amp-dailymotion>对于 Dailymotion 嵌入<amp-brightcove>用于 Brightcove 埋件
8.amp-social-share
除了社交媒体嵌入之外，您还可以使用该组件在 AMP 页面上显示社交分享按钮<amp-social-share>。
社交分享功能是为某些提供商预先配置的，但通过正确的设置，您可以将该<amp-social-share>组件用于任何其他社交分享按钮。
预配置的共享按钮
预配置的分享按钮不需要太多设置；您必须定义width（默认为 60 像素）和height（默认为 44 像素）属性，以及属性中社交媒体提供商的名称type。
对于 Facebook，您还需要在属性中指定Facebook 应用程序 IDdata-param-app_id。
代码示例：
|
1个
2个
3个
4个
5个
6个
7
8个
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<div> <!-- Facebook --> <amp-social-share type="facebook" width="60" height="44" data-param-app_id="254325784911610"> </amp-social-share> <!-- Twitter --> <amp-social-share type="twitter" width="60" height="44"> </amp-social-share> <!-- Google Plus --> <amp-social-share type="gplus" width="60" height="44"> </amp-social-share> <!-- Pinterest --> <amp-social-share type="pinterest" width="60" height="44"> </amp-social-share> <!-- Linkedin --> <amp-social-share type="linkedin" width="60" height="44"> </amp-social-share> <!-- Email --> <amp-social-share type="email" width="60" height="44"> </amp-social-share></div> |
代码预览：
预配置 假设您要共享的 URL 是当前页面的规范 URL，而您要包含在共享中的文本是页面标题。
如果你想使用另一个配置，你可以使用以下三个可选属性来实现：
data-text对于要包含在共享中的文本data-url对于您要共享的 URLdata-attribution对于您希望将您的份额归于的人或提供者的姓名
未配置的共享按钮
要显示未配置的提供者的社交分享按钮，例如 WhatsApp，您需要在属性中指定提供者的自定义协议data-share-endpoint。在文档中查看如何执行此操作。
脚本包括：
|
1个
2个
3个
|
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script> |
查看 可以帮助您正确配置社交分享按钮的Github 示例。