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.

data-align-center

The value is either true or false. The default is false.

Having this attribute set to true would align the post/video container to center.

common attributes

This element includes common attributes extended to AMP components.

Validation

See amp-facebook rules in the AMP validator specification.