amp-facebook

Displays a Facebook post, video or comment.

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, a Facebook video or a comment on a Facebook post.

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:

Example: Embedding a comment on a post

Code:

<amp-facebook width="552" height="500"
    layout="responsive"
    data-embed-type="comment"
    data-href="https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185">
</amp-facebook>

Renders as:

Attributes

data-href (required)	The URL of the Facebook post/video/comment. For example, a post or video will look like `https://www.facebook.com/zuck/posts/10102593740125791`. A comment or comment reply will look like `https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185`. For comments, see the Facebook documentation on how to get a comment's URL.
data-embed-as	The value is either `post`, `video` or `comment`. The default is `post`. Both posts and videos can be embedded as a post. Setting `data-embed-as="video"` for Facebook videos embeds the player of the video, and adds the accompanying post card with it. Setting `data-embed-as="post"` ignores the caption card. This is done to make sure we are zooming in on videos correctly. The `comment` value embeds a single comment (or reply to a comment) on a post. This is not to be confused with amp-facebook-comments. Check out the documentation for differences between post embeds, video embeds, and comment embeds.
data-include-comment-parent	The value is either `true` or `false`. The default is `false`. When you are embedding a comment reply, you can optionally also include the parent comment of the reply.
data-align-center	The value is either `true` or `false`. The default is `false`. For posts and videos, having this attribute set to true would align the post/video container to center.
data-locale (optional)	By default, the locale is set to user's system language; however, you can specify a locale as well. For details on strings accepted here please visit the Facebook API Localization page
common attributes	This element includes common attributes extended to AMP components.

Validation

See amp-facebook rules in the AMP validator specification.

Precisa de mais ajuda?

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