納入第三方內容

重要事項：本文件不適用於您目前選取的格式 電子郵件！

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

嵌入推文

使用 amp-twitter 元素，在您的網頁中嵌入來自 Twitter 的推文。

若要在網頁中嵌入推文，請先在 <head> 中加入以下指令碼

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

目前，推文會自動按比例縮放以符合提供的尺寸，但這樣可能會產生不夠理想的外觀。請手動調整提供的寬度和高度，或使用 media 屬性根據螢幕寬度選取長寬比。

<amp-twitter width="500"
  height="583"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>

在 playground 中開啟此程式碼片段

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

嵌入 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 相片網址中找到的 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 貼文或影片

使用 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 範例，請參閱 AMP By Example。

嵌入 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 影片網頁網址中找到。例如，在 https://www.youtube.com/watch?v=Z1q71gFeRqM 中，Z1q71gFeRqM 是影片 ID。

針對 16:9 長寬比的影片，請使用 layout="responsive" 以產生正確的版面配置

<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 貢獻