AMP
PT
English Français العربية Español Italiano Indonesia 日本語 한국어 Русский Türkçe 中文

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 

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

Example: Embedding a video 

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

Example: Embedding a comment on a post 

<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>
Abrir esse snippet no playground

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.

Ir para 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.

Ir para o GitHub