Description Displays a Facebook post or video.
Required Script <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
Supported Layouts fill, fixed, fixed-height, flex-item, nodisplay, responsive
Examples See AMP By Example's annotated amp-facebook example.

Overview

You can use the amp-facebook component to embed a Facebook post or a Facebook video.

Example: Embedding a post

Code:

<amp-facebook width="552" height="310"
    layout="responsive"
    data-href="https://www.facebook.com/ParksCanada/posts/1712989015384373">
</amp-facebook>

Renders as:

Example: Embedding a video

Code:

<amp-facebook width="476" height="316"
    layout="responsive"
    data-embed-as="video"
    data-href="https://www.facebook.com/nasaearth/videos/10155187938052139">
</amp-facebook>

Renders as:

Attributes

data-href (required)

The URL of the Facebook post/video. For example, https://www.facebook.com/zuck/posts/10102593740125791.

data-embed-as

The value is either post or video. The default is post.

Both posts and videos can be embedded as a post. Setting data-embed-as="video" for Facebook videos only embeds the player of the video, and ignores the accompanying post card with it. This is recommended if you'd like a better aspect ratio management for the video to be responsive.

Check out the documentation for differences between post embeds and video embeds.

common attributes

This element includes common attributes extended to AMP components.

Validation

See amp-facebook rules in the AMP validator specification.