amp-embedly-card

Description	Provides you with responsive and shareable embeds to drive the reach of your websites, blog posts, and articles from any URL using Embedly cards.
Required Script	`<script async custom-element="amp-embedly-card" src="https://cdn.ampproject.org/v0/amp-embedly-card-0.1.js"></script>`
Supported Layouts	responsive

Behavior

The amp-embedly-card component provides you with responsive and shareable embeds to drive the reach of your websites, blog posts, and articles from any URL using Embedly cards.

Cards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.

Example: Embedding multiple resources

If you have a paid plan, use the amp-embedly-key component to set your api key. You just need one amp-embedly-key per AMP page.

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

If you are a paid user, setting the amp-embedly-key tag removes Embedly's branding from the cards.

Within your AMP page, you can include one or multiple amp-embedly-card components:

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

Attributes

data-url (required)	The URL to retrieve embedding information.
data-card-via	Specifies the via content in the card. This is a a great way to do attribution. This is an optional attribute.
data-card-theme	Allows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.
data-card-embed	The URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.
data-card-image	The URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.
data-card-controls	Enables share icons. `0`: Disable share icons. `1`: Enable share icons The default is `1`.
data-card-align	Aligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.
data-card-recommend	When recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly. `0`: Disables embedly recommendations. `1`: Enables embedly recommendations. The default value is `1`.
common attributes	This element includes common attributes extended to AMP components.

Validation

See amp-embedly-card rules in the AMP validator specification.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow

Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub