@ampproject/amp-facebook
Advanced tools
The Bento Facebook component allows you to embed a Facebook post, a Facebook video, or a comment on a Facebook post. It can be used as a web component <bento-facebook>, or as a Preact/React functional component <BentoFacebook>.
You must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See Layout and Style.
[example preview="top-frame" playground="false"]
Install via npm:
npm install @ampproject/bento-facebook
import '@ampproject/bento-facebook';
[/example]
<script>[example preview="top-frame" playground="false"]
<head>
<script src="https://cdn.ampproject.org/custom-elements-polyfill.js"></script>
<!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
<style data-bento-boilerplate>
bento-facebook {
display: block;
overflow: hidden;
position: relative;
}
</style>
<script async src="https://cdn.ampproject.org/v0/bento-facebook-1.0.js"></script>
<style>
bento-facebook{
width: 375px;
height: 472px;
}
</style>
</head>
<!-- Facebook Post -->
<bento-facebook id="facebook-post"
data-href="https://www.facebook.com/ParksCanada/posts/1712989015384373">
</bento-facebook>
<div class="buttons" style="margin-top: 8px;">
<button id="change-facebook-post">
Change Facebook post
</button>
</div>
<script>
(async () => {
const facebookPost = document.querySelector('#facebook-post');
await customElements.whenDefined('bento-facebook');
// set up button actions
document.querySelector('#change-facebook-post').onclick = () => {
facebookPost.setAttribute('data-href', 'https://www.facebook.com/NASA/photos/a.67899501771/10159193669016772/')
}
})();
</script>
<!-- Facebook Video-->
<bento-facebook id="facebook-video"
data-embed-as="video"
data-href="https://www.facebook.com/nasaearth/videos/10155187938052139">
</bento-facebook>
<div class="buttons" style="margin-top: 8px;">
<button id="change-facebook-video">
Change Facebook video
</button>
</div>
<script>
(async () => {
const facebookVideo= document.querySelector('#facebook-video');
await customElements.whenDefined('bento-facebook');
// set up button actions
document.querySelector('#change-facebook-video').onclick = () => {
facebookVideo.setAttribute('data-href', 'https://www.facebook.com/NASA/videos/846648316199961/')
}
})();
</script>
<!-- Facebook Page-->
<bento-facebook id="facebook-video"
data-embed-as="video"
data-href="https://www.facebook.com/nasaearth/videos/10155187938052139">
</bento-facebook>
<div class="buttons" style="margin-top: 8px;">
<button id="change-facebook-video">
Change Facebook video
</button>
</div>
<script>
(async () => {
const facebookVideo= document.querySelector('#facebook-video');
await customElements.whenDefined('bento-facebook');
// set up button actions
document.querySelector('#change-facebook-video').onclick = () => {
facebookVideo.setAttribute('data-href', 'https://www.facebook.com/NASA/videos/846648316199961/')
}
})();
</script>
<!-- Facebook Like-->
<bento-facebook id="facebook-video"
data-embed-as="like"
data-href="https://www.facebook.com/nasaearth/videos/10155187938052139">
</bento-facebook>
<!-- Facebook Comments-->
<bento-facebook id="facebook-comments"
data-embed-as="comments"
data-href="https://www.facebook.com/zuck/posts/10102735452532991?comment_id=1070233703036185">
</bento-facebook>
[/example]
Each Bento component has a small CSS library you must include to guarantee proper loading without content shifts. Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-facebook-1.0.css">
Alternatively, you may also make the light-weight pre-upgrade styles available inline:
<style data-bento-boilerplate>
bento-facebook {
display: block;
overflow: hidden;
position: relative;
}
</style>
data-hrefThe 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.
data-embed-asThe value can be either post, video, comments, like, or page.
The default value 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 comments value embeds a comment section which allows people to comment on
content using their Facebook account.
The like value embeds a like button which, when clicked, triggers the like to be logged on Facebook.
The page value embeds any public facebook page.
Check out the documentation for differences between post embeds, video embeds, like embeds, and page embeds.
The comment value is deprecated but previously was used to embed a single comment (or reply to a comment) on a post.
This is not to be confused with
amp-facebook-comments.
data-align-centerThe 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-allowfullscreenThe value is either set or omitted. The default is omitted (no fullscreen).
When embedding a video, set this value to allow for a fullscreen experience.
data-include-comment-parentThe 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-action (optional)The verb to display on the button. Can be either like or recommend. The
default is like.
data-hide-cover (optional)Hides the cover photo in the header. Default value is false.
data-hide-cta (optional)Hides the custom call to action button (if available). Default value is false.
data-kd_site (optional)This attribute is also known as data-kid_directed_site in the Facebook SDK.
If your web site or online service, or a portion of your service, is directed to
children under 13 you must enable this attribute. The default is false.
data-layout (optional)Selects one of the different layouts that are available for the plugin. Can be
one of standard, button_count, button or box_count. The default is
standard.
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.
data-numposts (optional)The number of comments to show. Currently Facebook SDK limits this to max 100. For details, see the Facebook comments documentation.
data-order-by (optional)The order to use when displaying comments. For details, see the Facebook comments documentation.
data-ref (optional)A label for tracking referrals which must be less than 50 characters and can contain alphanumeric characters and some punctuation.
data-share (optional)Specifies whether to include a share button beside the Like button. This only
works with the XFBML version. The default is false.
data-show-facepile (optional)Shows profile photos of friends who like the page. Default value is true.
data-size (optional)The size of the button, which can be one of two sizes, large or small. The
default is small.
For details, see the Facebook comments documentation.
data-small-header (optional)Uses the small header instead. Default value is false.
data-tabs (optional)Specifies the tabs to render (i.e., timeline, events, messages). Use a
comma-separated list to add multiple tabs (e.g., timeline, events). By
default, the Facebook page plugin shows the timeline activity.
Define a title attribute for the component to propagate to the underlying <iframe> element. The default value is "Facebook".
The examples below demonstrate use of the <BentoFacebook> as a functional component usable with the Preact or React libraries.
[example preview="top-frame" playground="false"]
Install via npm:
npm install @ampproject/bento-facebook
import React from 'react';
import { BentoFacebook } from '@ampproject/bento-facebook/react';
import '@ampproject/bento-facebook/styles.css';
function App() {
return (
<BentoFacebook
embedAs="post"
href="https://www.facebook.com/NASA/photos/a.67899501771/10159193669016772/">
</BentoFacebook>
);
}
[/example]
hrefThe 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.
embedAsThe value can be either post, video, comments, like, or page.
The default value 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 comments value embeds a comment section which allows people to comment on
content using their Facebook account.
The like value embeds a like button which, when clicked, triggers the like to be logged on Facebook.
The page value embeds any public facebook page.
Check out the documentation for differences between post embeds, video embeds, like embeds, and page embeds.
The comment value is deprecated but previously was used to embed a single comment (or reply to a comment) on a post.
This is not to be confused with
amp-facebook-comments.
alignCenterThe 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.
allowFullScreenThe value is either set or omitted. The default is omitted (no fullscreen).
When embedding a video, set this value to allow for a fullscreen experience.
includeCommentParentThe 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.
action (optional)The verb to display on the button. Can be either like or recommend. The
default is like.
dataLayout (optional)Selects one of the different layouts that are available for the plugin. Can be
one of standard, button_count, button or box_count. The default is
standard.
hideCover (optional)Hides the cover photo in the header. Default value is false.
hideCta (optional)Hides the custom call to action button (if available). Default value is false.
kdSite (optional)This attribute is also known as data-kid_directed_site in the Facebook SDK.
If your web site or online service, or a portion of your service, is directed to
children under 13 you must enable this attribute. The default is false.
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.
numposts (optional)The number of comments to show. Currently Facebook SDK limits this to max 100. For details, see the Facebook comments documentation.
orderBy (optional)The order to use when displaying comments. For details, see the Facebook comments documentation.
refLabel (optional)A label for tracking referrals which must be less than 50 characters and can contain alphanumeric characters and some punctuation.
share (optional)Specifies whether to include a share button beside the Like button. This only
works with the XFBML version. The default is false.
showFacepile (optional)Shows profile photos of friends who like the page. Default value is true.
size (optional)The size of the button, which can be one of two sizes, large or small. The
default is small.
For details, see the Facebook comments documentation.
smallHeader (optional)Uses the small header instead. Default value is false.
tabs (optional)Specifies the tabs to render (i.e., timeline, events, messages). Use a
comma-separated list to add multiple tabs (e.g., timeline, events). By
default, the Facebook page plugin shows the timeline activity.
Define a title attribute for the component to propagate to the underlying <iframe> element. The default value is "Facebook".
FAQs
AMP HTML amp-facebook Component
We found that @ampproject/amp-facebook demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 16 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.