Important: this documentation is not applicable to your currently selected format stories!
amp-embedly-card
Description
Displays an Embedly card.
Required Scripts
<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">
Supported Layouts
Usage
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>
Standalone use outside valid AMP documents
Bento allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide Use AMP components in non-AMP pages.
To find the standalone version of amp-embedly-card
, see bento-embedly-card
.
Attributes
data-url
The URL to retrieve embedding information.
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
.
data-card-via
(optional)
Specifies the via content in the card. This is a great way to do attribution.
data-card-theme
(optional)
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.
title (optional)
Define a title
attribute for the component to propagate to the underlying <iframe>
element. The default value is "Embedly card"
.
Common attributes
This element includes common attributes extended to AMP components.
Validation
See amp-embedly-card rules in the AMP validator specification.
이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.
Stack Overflow로 이동 버그나 누락된 기능을 발견하셨나요?AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.
GitHub로 이동하기