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>
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>
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>
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