Socket
Socket
Sign inDemoInstall

@ampproject/amp-facebook

Package Overview
Dependencies
2
Maintainers
16
Versions
80
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ampproject/amp-facebook

AMP HTML amp-facebook Component


Version published
Weekly downloads
7
Maintainers
16
Install size
897 kB
Created
Weekly downloads
 

Readme

Source

Bento Facebook

Usage

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

Web Component

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: Import via npm

[example preview="top-frame" playground="false"]

Install via npm:

npm install @ampproject/bento-facebook
import '@ampproject/bento-facebook';

[/example]

Example: Include via <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]

Layout and Style

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>
Attributes
data-href

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.

data-embed-as

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

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

title (optional)

Define a title attribute for the component to propagate to the underlying <iframe> element. The default value is "Facebook".

Preact/React Component

The examples below demonstrate use of the <BentoFacebook> as a functional component usable with the Preact or React libraries.

Example: Import via npm

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

Props
href

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.

embedAs

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

alignCenter

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.

allowFullScreen

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

includeCommentParent

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.

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.

title (optional)

Define a title attribute for the component to propagate to the underlying <iframe> element. The default value is "Facebook".

FAQs

Last updated on 14 Oct 2021

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc