包含第三方内容
了解如何在页面中包含第三方组件。
嵌入推文
使用 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 data-shortcode。例如，在 https://instagram.com/p/fBwFP 中，fBwFP 是 data-shortcode。此外，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://127.0.0.1/zuck/posts/10102593740125791">
</amp-facebook>
预览
示例：嵌入视频
源
<amp-facebook width="476" height="316"
layout="responsive"
data-embed-as="video"
data-href="https://127.0.0.1/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。