AMP
  • 網站

amp-instagram

簡介

使用 <a href="/documentation/components/amp-instagram/"><code>amp-instagram</code></a> 元件,將 Instagram 影片和相片嵌入到您的 AMP HTML 檔案中。

設定

在標頭中匯入 amp-instagram 元件

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

基本用法

Instagram 相片透過 instagram data-shortcode 嵌入,該代碼可在每個 Instagram 相片網址中找到。許多 Instagram 相片是正方形的。當您設定 <code>layout="responsive"</code> 時,任何 <code>width</code> 和 <code>height</code> 值相同的設定都適用。

<amp-instagram data-shortcode="1totVhIFXl" width="1" height="1" layout="responsive">
</amp-instagram>

非正方形圖片

如果圖片不是正方形,<code>width</code> 和 <code>height</code> 應為 Instagram 圖片的實際寬度和高度。

<amp-instagram data-shortcode="_hIitKIFcg" width="600" height="450" layout="responsive">
</amp-instagram>

標題

您可以使用 <code>data-captioned</code> 屬性加入標題

<amp-instagram data-shortcode="BMQ8i4lBTlb" data-captioned width="1" height="1" layout="responsive">
</amp-instagram>
需要更多說明嗎?

如果此頁面上的說明未能涵蓋您的所有問題,請隨時與其他 AMP 使用者聯繫,討論您的確切使用案例。

前往 Stack Overflow
有未說明的特色功能嗎?

AMP 專案大力鼓勵您的參與和貢獻!我們希望您能成為我們開放原始碼社群的長期參與者,但我們也歡迎針對您特別熱衷的問題提供一次性貢獻。

在 GitHub 上編輯範例

  • 由 <a href="https://github.com/sebastianbenz" rel="nofollow" target="_blank"> @sebastianbenz </a> 撰寫