納入第三方內容

瞭解如何在網頁中納入第三方元件。

嵌入推文

若要在網頁中嵌入 Twitter 的推文，請使用 amp-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>

在 Playground 中開啟這個程式碼片段

提示 – 如需更多 amp-twitter 範例，請參閱 AMP By Example。

嵌入 Instagram

若要在網頁中嵌入 Instagram，請使用 amp-instagram 元素。

若要嵌入 Instagram，請先在 <head> 中納入以下指令碼

<script async custom-element="amp-instagram"
  src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>

納入 Instagram 相片網址中找到的 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>

在 Playground 中開啟這個程式碼片段

提示 – 如需更多 amp-instagram 範例，請參閱 AMP By Example。

顯示 Facebook 貼文或影片

若要在網頁中顯示 Facebook 貼文或影片，請使用 amp-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 範例，請參閱 AMP By Example。

嵌入 YouTube 影片

若要在網頁中嵌入 YouTube 影片，請使用 amp-youtube 元素。

您必須在 <head> 中納入以下指令碼

<script async custom-element="amp-youtube"
  src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

YouTube data-videoid 可在每個 YouTube 影片網頁網址中找到。例如，在 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>

在 Playground 中開啟這個程式碼片段

提示 – 如需更多 amp-youtube 範例，請參閱 AMP By Example。

顯示廣告

若要在網頁中顯示廣告，請使用 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>

在 Playground 中開啟這個程式碼片段

如果廣告聯播網支援，請納入 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>

在 Playground 中開啟這個程式碼片段

AMP 支援各種廣告聯播網。如需完整清單，請參閱 amp-ad。

繼續閱讀 – 如要進一步瞭解廣告，請參閱在 AMP 上放送廣告指南。

作者： @Meggin
貢獻者： @pbakaus 和 @bpaduch