包含第三方内容
了解如何在您的页面中包含第三方组件。
嵌入推文
通过使用 amp-twitter 元素，在您的页面中嵌入来自 Twitter 的推文。
要在您的页面中嵌入推文，首先在 <head> 中包含以下脚本
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
目前，推文会自动按比例缩放以适应所提供的尺寸，但这可能达不到理想的外观。手动调整所提供的宽度和高度，或使用媒体属性根据屏幕宽度选择纵横比。
<amp-twitter width="500"
height="583"
layout="responsive"
data-tweetid="638793490521001985">
</amp-twitter>
amp-twitter 示例。 嵌入 Instagram
使用 amp-instagram 元素在您的页面中嵌入 Instagram。
要嵌入 Instagram，首先在 <head> 中包含以下脚本
<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
包含在 Instagram 照片 URL 中找到的 Instagram 数据简码。例如，在 https://instagram.com/p/fBwFP 中，fBwFP 是数据简码。此外，Instagram 为响应式布局使用固定的宽高比，因此宽度和高度的值应该是通用的。
<amp-instagram data-shortcode="fBwFP"
width="320"
height="392"
layout="responsive">
</amp-instagram>
amp-instagram 示例。 显示 Facebook 帖子或视频
使用 amp-facebook 元素在您的页面中显示 Facebook 帖子或视频。
您必须在 <head> 中包含以下脚本
<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
示例：嵌入帖子
来源
<amp-facebook width="486" height="657"
layout="responsive"
data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>
预览：
示例：嵌入视频
来源
<amp-facebook width="476" height="316"
layout="responsive"
data-embed-as="video"
data-href="https://www.facebook.com/nasaearth/videos/10155187938052139">
</amp-facebook>
预览：
amp-facebook 示例。 嵌入 YouTube 视频
使用 amp-youtube 元素在您的页面中嵌入 YouTube 视频。
您必须在 <head> 中包含以下脚本
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
YouTube data-videoid 可在每个 YouTube 视频页面 URL 中找到。例如，在 https://www.youtube.com/watch?v=Z1q71gFeRqM 中，Z1q71gFeRqM 是视频 ID。
使用 layout="responsive" 为 16:9 宽高比视频生成正确的布局
<amp-youtube data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="560"
height="315">
</amp-youtube>
amp-youtube 示例。 显示广告
使用 amp-ad 元素在您的页面中显示广告。仅支持通过 HTTPS 提供的广告。
不允许在 AMP 文档中运行广告网络提供的 JavaScript。相反，AMP 运行时从不同的来源（通过 iframe 沙箱）加载 iframe，并在该 iframe 沙箱中执行广告网络的 JS。
您必须指定广告宽度和高度，以及广告网络类型。type 标识广告网络的模板。不同的广告类型需要不同的 data-* 属性。
<amp-ad width="300"
height="250"
type="a9"
data-amzn_assoc_ad_mode="auto"
data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
data-recomtype="async"
data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5">
</amp-ad>
如果广告网络支持，请包含一个 placeholder，以便在没有广告可用时显示
<amp-ad width="300"
height="250"
type="a9"
data-amzn_assoc_ad_mode="auto"
data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
data-recomtype="async"
data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5">
<div placeholder>Have a great day!</div>
</amp-ad>
AMP 支持各种广告网络。请参阅 amp-ad 以获取完整列表。