amp-embedly-card

1.0 0.1

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

用法

amp-embedly-card 元件為您提供回應式且可分享的嵌入內容，可透過使用 Embedly 卡片，擴展您的網站、部落格文章和文章的觸及範圍。

卡片是利用 Embedly 最簡單的方式。針對任何媒體，卡片皆提供具有內建嵌入分析功能的回應式嵌入。

範例：嵌入多個資源

如果您有付費方案，請使用 amp-embedly-key 元件設定您的 API 金鑰。每個 AMP 頁面只需要一個 amp-embedly-key。

<amp-embedly-key value="12af2e3543ee432ca35ac30a4b4f656a" layout="nodisplay">
</amp-embedly-key>

如果您是付費用戶，設定 amp-embedly-key 標籤會從卡片中移除 Embedly 的品牌標示。

在您的 AMP 頁面中，您可以包含一個或多個 amp-embedly-card 元件

<amp-embedly-card
  data-url="https://twitter.com/AMPhtml/status/986750295077040128"
  layout="responsive"
  width="150"
  height="80"
  data-card-theme="dark"
  data-card-controls="0"
>
</amp-embedly-card>

<amp-embedly-card
  data-url="https://www.youtube.com/watch?v=lBTCB7yLs8Y"
  layout="responsive"
  width="100"
  height="50"
>
</amp-embedly-card>

屬性

data-url

要擷取嵌入資訊的 URL。

data-card-embed

影片或複合媒體的 URL。與文章等靜態嵌入內容搭配使用，卡片將嵌入影片或複合媒體，而非使用卡片中的靜態頁面內容。

data-card-image

圖片的 URL。指定當 data-url 指向文章時，要在文章卡片中使用的圖片。並非所有圖片 URL 都受到支援，如果圖片未載入，請嘗試其他圖片或網域。

data-card-controls

啟用分享圖示。

• 0：停用分享圖示。
• 1：啟用分享圖示

預設值為 1。

data-card-align

對齊卡片。可能的值為 left、center 和 right。預設值為 center。

data-card-recommend

當支援建議時，會在影片和複合卡片上停用 Embedly 建議。這些是 Embedly 建立的建議。

• 0：停用 Embedly 建議。
• 1：啟用 Embedly 建議。

預設值為 1。

data-card-via (選填)

指定卡片中的來源內容。這是進行歸屬的好方法。

data-card-theme (選填)

允許設定 dark 主題，這會變更主要卡片容器的背景顏色。使用 dark 來設定此主題。對於深色背景，最好指定此主題。預設值為 light，這不會設定主要卡片容器的背景顏色。

title (選填)

為元件定義 title 屬性，以傳播到基礎 <iframe> 元素。預設值為 "Embedly card"。

通用屬性

此元素包含擴充至 AMP 元件的 通用屬性。

驗證

請參閱 AMP 驗證器規格中的 amp-embedly-card 規則。