amp-iframely

Description (描述)

顯示 Iframely.com 提供的豐富媒體嵌入內容

Required Scripts (必要指令碼)

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

Supported Layouts (支援版面配置)

fill fixed fixed-height flex-item responsive intrinsic

嵌入並顯示來自超過 1900 家第三方發佈商、由 Iframely.com 提供的豐富媒體嵌入內容。針對任何其他 URL 顯示 URL 預覽做為摘要卡片。

<amp-iframely> 透過第三方供應商 Iframely.com 嵌入內容。請勿與直接嵌入任何 URL 的 <amp-iframe> 混淆。

Required Script (必要指令碼)	`<script async custom-element="amp-iframely" src="https://cdn.ampproject.org/v0/amp-iframely-0.1.js"></script>`
Supported Layouts (支援版面配置)	responsive, fixed-height (回應式, 固定高度)

總覽

amp-iframely 將您連線至 Iframely 雲端服務。它為超過 1900 家第三方發佈商提供回應式嵌入程式碼和豐富媒體支援。此外，也為網際網路上的其他內容提供摘要卡片做為 URL 預覽。

您可能會取得由 Iframely API 產生的 amp-iframely 程式碼。但您也可以略過 API 呼叫，直接在 AMP 中使用 Iframely (在這種情況下，我們建議使用回應式版面配置和可調整大小的標記)。

請在 iframely.com 取得您的 API 金鑰。

範例：透過內容 ID 嵌入第三方內容

<amp-iframely width="400" height="225"
    data-id="I8NNa1s"
    layout="responsive"
    data-img>
</amp-iframely>

在 playground (遊樂場) 中開啟此程式碼片段

範例：透過 API 金鑰取得任何 URL 的摘要卡片

<amp-iframely height="140"
    data-url="https://iframely.com"
    data-key="30ef29b325c50219755786a371c281ad"
    layout="fixed-height"
    resizable>
</amp-iframely>

在 playground (遊樂場) 中開啟此程式碼片段

歡迎使用上述範例中的 API 金鑰嘗試任何 URL。不過，此金鑰僅限在 amp.dev 上使用。

Attributes (屬性)

Indentifying (識別)

有兩種方法可以識別豐富媒體。一種是透過 Iframely 發出的 ID，另一種是透過媒體 URL 和您的 API 金鑰 (為了安全起見，已進行 MD5 雜湊處理)。

data-id	Iframely content ID (內容 ID) (若可用)
data-url	或者，如果沒有內容 ID，請透過其標準網址識別豐富媒體。
data-key	如果使用 `data-url`，也請新增您的 Iframely API 金鑰的 MD5 雜湊值做為 `data-key` 屬性。請雜湊您的金鑰，未加密的值在此處無法運作。

Placing (放置)

amp-iframely 支援回應式和固定高度版面配置

width (寬度) 和 height (高度)	針對回應式媒體，同時使用這兩個屬性來定義其長寬比。針對固定高度版面配置，僅使用高度。如果您沒有媒體尺寸，請使用最適合做為預留位置的尺寸，並如下所示新增 `resizable`。
resizable (可調整大小)	用於新增事件監聽器並自動調整元件高度以符合豐富媒體內容的標記。這適用於回應式和固定高度版面配置。
data-img	空的屬性，表示在元件及其內容載入時，應使用豐富媒體的縮圖圖片做為預留位置。請勿提供值 - Iframely 會自行尋找所需的圖片位址。

任何其他 Iframely 查詢字串 API 參數都可以做為加上 data- 前置字元的屬性傳遞。例如，align="left" API 參數會變成 data-align="left" 屬性。自訂的供應商專用選項也可以做為 data- 屬性傳遞。

Validation (驗證)

至少需要 data-id 屬性或一組 data-url 和 data-key，才能識別第三方豐富媒體內容並向 Iframely 驗證身分。

需要更多協助嗎？

您已閱讀本文件十幾次，但它仍然沒有真正涵蓋您的所有問題嗎？也許其他人也有相同的感受：請在 Stack Overflow 上與他們交流。

前往 Stack Overflow

發現錯誤或缺少功能嗎？

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

前往 GitHub