amp-embedly-card

1.0 0.1

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

<script async custom-element="amp-embedly-card" src="https://cdn.ampproject.org/v0/amp-embedly-card-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-embedly-card-1.0.css">

用法

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>

在有效的 AMP 文档之外的独立使用

Bento 允许您在非 AMP 页面中使用 AMP 组件，而无需承诺完全有效的 AMP。您可以将这些组件放置在不支持 AMP 的框架和 CMS 的实现中。请阅读我们的指南 在非 AMP 页面中使用 AMP 组件，了解更多信息。

要查找 amp-embedly-card 的独立版本，请参阅 bento-embedly-card。

属性

data-url

用于检索嵌入信息的 URL。

data-card-embed

视频或富媒体的 URL。与文章等静态嵌入一起使用。当 `data-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 (可选)

指定卡片中的 via 内容。这是一种很好的归属方式。

data-card-theme (可选)

允许设置 dark 主题，这将更改主卡片容器的背景颜色。使用 dark 设置此主题。对于深色背景，最好指定此项。默认值为 light，它不设置主卡片容器的背景颜色。

title (可选)

为组件定义一个 title 属性，以传播到底层的 <iframe> 元素。默认值为 "Embedly card"。

通用属性

此元素包含 通用属性，这些属性已扩展到 AMP 组件。

验证

请参阅 AMP 验证器规范中的 amp-embedly-card 规则。