Bento

Bento Facebook

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-facebook-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-facebook-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-facebook-1.0.js"
    ></script>
    <style>
      body {
        background: #ecf1f3;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      bento-embedly-card {
        width: 375px;
        height: 710px;
      }
    </style>
</head>

<body>

    <bento-facebook
      id="facebook-post"
      style="width: 375px; height: 400px"
      data-href="https://127.0.0.1/ParksCanada/posts/1712989015384373"
    >
    </bento-facebook>
</body>

嵌入 Facebook 帖子、Facebook 视频或 Facebook 帖子评论。

将 bento-facebook 用作 Web 组件或 React 函数组件

↓ Web 组件 ↓ React / Preact

Web 组件

在添加自定义样式之前，必须包含每个 Bento 组件所需的 CSS 库，以确保正确加载。或使用内联提供的轻量级预升级样式。请参阅 布局和样式。

通过 npm 导入

npm install @bentoproject/facebook
import {defineElement as defineBentoFacebook} from '@bentoproject/facebook';
defineBentoFacebook();

通过 <script> 包含

<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-facebook-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-facebook-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-facebook-1.0.css" crossorigin="anonymous">

示例

嵌入 Facebook 帖子

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-facebook-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-facebook-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-facebook-1.0.js"
    ></script>
    <style>
      bento-facebook {
        width: 375px;
        height: 472px;
      }
    </style>
</head>

<body>

<bento-facebook
      id="facebook-post"
      data-href="https://127.0.0.1/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://127.0.0.1/NASA/photos/a.67899501771/10159193669016772/'
          );
        };
      })();
    </script>
</body>
嵌入 Facebook 视频

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-facebook-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-facebook-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-facebook-1.0.js"
    ></script>
    <style>
      bento-facebook {
        width: 375px;
        height: 472px;
      }
    </style>
</head>

<body>

<bento-facebook
      id="facebook-video"
      data-embed-as="video"
      data-href="https://127.0.0.1/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://127.0.0.1/NASA/videos/846648316199961/'
          );
        };
      })();
    </script>
</body>
嵌入 Facebook 页面

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-facebook-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-facebook-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-facebook-1.0.js"
    ></script>
    <style>
      bento-facebook {
        width: 375px;
        height: 472px;
      }
    </style>
</head>

<body>

<bento-facebook
      id="facebook-video"
      data-embed-as="video"
      data-href="https://127.0.0.1/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://127.0.0.1/NASA/videos/846648316199961/'
          );
        };
      })();
    </script>
</body>
嵌入 Facebook 点赞按钮

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-facebook-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-facebook-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-facebook-1.0.js"
    ></script>
    <style>
      bento-facebook {
        width: 375px;
        height: 472px;
      }
    </style>
</head>

<body>

<bento-facebook
      id="facebook-video"
      data-embed-as="like"
      data-href="https://127.0.0.1/nasaearth/videos/10155187938052139"
    >
    </bento-facebook>
</body>
嵌入 Facebook 评论部分

<head>

<script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-facebook-1.0.css"
    />
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-facebook-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-facebook-1.0.js"
    ></script>
    <style>
      bento-facebook {
        width: 375px;
        height: 472px;
      }
    </style>
</head>

<body>

<bento-facebook
      id="facebook-comments"
      data-embed-as="comments"
      data-href="https://127.0.0.1/zuck/posts/10102735452532991?comment_id=1070233703036185"
    >
    </bento-facebook>
</body>

布局和样式

每个 Bento 组件都有一个小型 CSS 库，你必须包含它以确保在没有 内容偏移 的情况下正确加载。由于基于顺序的特异性，你必须手动确保在任何自定义样式之前包含样式表。

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-facebook-1.0.css"
/>

或者，你还可以使轻量级的预升级样式内联可用

<style>
  bento-facebook {
    display: block;
    overflow: hidden;
    position: relative;
  }
</style>

属性

data-href

Facebook 帖子/视频/评论的 URL。例如，帖子或视频看起来像 https://127.0.0.1/zuck/posts/10102593740125791。评论或评论回复看起来像 https://127.0.0.1/zuck/posts/10102735452532991?comment_id=1070233703036185。

data-embed-as

值可以是 post、video、comments、like 或 page。默认值为 post。

帖子和视频都可以嵌入为帖子。为 Facebook 视频设置 data-embed-as="video" 将嵌入视频播放器，并添加随附的帖子卡片。设置 data-embed-as="post" 将忽略标题卡片。这样做是为了确保我们正确地放大视频。

comments 值嵌入评论部分，允许人们使用其 Facebook 帐户对内容进行评论。

like 值嵌入一个“赞”按钮，单击该按钮时，将触发在 Facebook 上记录“赞”。page 值嵌入任何公共 Facebook 页面。

查看文档，了解 帖子嵌入、视频嵌入、“赞”嵌入 和 页面嵌入 之间的差异。

comment 值已弃用，但以前用于在帖子中嵌入单个评论（或回复评论）。不要将此与 amp-facebook-comments 混淆。

data-align-center

该值可以是 true 或 false。默认值为 false。

对于帖子和视频，将此属性设置为 true 会将帖子/视频容器对齐到中心。

data-allowfullscreen

该值可以设置或省略。默认值为省略（无全屏）。

嵌入视频时，设置此值以允许全屏体验。

data-include-comment-parent

该值可以是 true 或 false。默认值为 false。

当您嵌入评论回复时，您还可以选择包含回复的父评论。

data-action（可选）

按钮上显示的动词。可以是 like 或 recommend。默认值为 like。

data-hide-cover（可选）

隐藏标题中的封面照片。默认值为 false。

data-hide-cta（可选）

隐藏自定义号召性用语按钮（如果可用）。默认值为 false。

data-kd_site（可选）

此属性在 Facebook SDK 中也称为 data-kid_directed_site。如果您的网站或在线服务或您服务的一部分针对的是 13 岁以下的儿童，则必须启用此属性。默认值为 false。

data-layout（可选）

选择插件可用的不同布局之一。可以是 standard、button_count、button 或 box_count 之一。默认值为 standard。

data-locale（可选）

默认情况下，语言环境设置为用户的系统语言；但是，您也可以指定语言环境。

有关此处接受的字符串的详细信息，请访问 Facebook API 本地化页面。

data-numposts（可选）

要显示的评论数。目前 Facebook SDK 将其限制为最大 100。有关详细信息，请参阅 Facebook 评论文档。

data-order-by（可选）

显示评论时要使用的顺序。有关详细信息，请参阅 Facebook 评论文档。

data-ref（可选）

用于跟踪引荐的标签，必须少于 50 个字符，并且可以包含字母数字字符和一些标点符号。

data-share（可选）

指定是否在“赞”按钮旁边包含一个分享按钮。这仅适用于 XFBML 版本。默认值为 false。

data-show-facepile（可选）

显示喜欢该页面的朋友的个人资料照片。默认值为 true。

data-size（可选）

按钮的大小，可以是两种大小之一，large 或 small。默认值为 small。

有关详细信息，请参阅 Facebook 评论文档。

data-small-header（可选）

改为使用小标题。默认值为 false。

data-tabs（可选）

指定要呈现的标签（即 timeline、events、messages）。使用逗号分隔的列表添加多个标签（例如，timeline, events）。默认情况下，Facebook 页面插件显示时间线活动。

标题（可选）

为组件定义一个 title 属性，以传播到基础 <iframe> 元素。默认值为 "Facebook"。

Preact/React 组件

通过 npm 导入

npm install @bentoproject/facebook
import React from 'react';
import {BentoFacebook} from '@bentoproject/facebook/react';
import '@bentoproject/facebook/styles.css';

function App() {
  return (
    <BentoFacebook
      embedAs="post"
      href="https://127.0.0.1/NASA/photos/a.67899501771/10159193669016772/"
    ></BentoFacebook>
  );
}

属性

href

Facebook 帖子/视频/评论的 URL。例如，帖子或视频看起来像 https://127.0.0.1/zuck/posts/10102593740125791。评论或评论回复看起来像 https://127.0.0.1/zuck/posts/10102735452532991?comment_id=1070233703036185。

embedAs

值可以是 post、video、comments、like 或 page。默认值为 post。

帖子和视频都可以嵌入为帖子。为 Facebook 视频设置 data-embed-as="video" 将嵌入视频播放器，并添加随附的帖子卡片。设置 data-embed-as="post" 将忽略标题卡片。这样做是为了确保我们正确地放大视频。

comments 值嵌入评论部分，允许人们使用其 Facebook 帐户对内容进行评论。

like 值嵌入一个“赞”按钮，单击该按钮时，将触发在 Facebook 上记录“赞”。page 值嵌入任何公共 Facebook 页面。

查看文档，了解 帖子嵌入、视频嵌入、“赞”嵌入 和 页面嵌入 之间的差异。

comment 值已弃用，但以前用于在帖子中嵌入单个评论（或回复评论）。不要将此与 amp-facebook-comments 混淆。

alignCenter

该值可以是 true 或 false。默认值为 false。

对于帖子和视频，将此属性设置为 true 会将帖子/视频容器对齐到中心。

allowFullScreen

该值可以设置或省略。默认值为省略（无全屏）。

嵌入视频时，设置此值以允许全屏体验。

includeCommentParent

该值可以是 true 或 false。默认值为 false。

当您嵌入评论回复时，您还可以选择包含回复的父评论。

action（可选）

按钮上显示的动词。可以是 like 或 recommend。默认值为 like。

dataLayout（可选）

选择插件可用的不同布局之一。可以是 standard、button_count、button 或 box_count 之一。默认值为 standard。

hideCover（可选）

隐藏标题中的封面照片。默认值为 false。

hideCta（可选）

隐藏自定义号召性用语按钮（如果可用）。默认值为 false。

kdSite（可选）

此属性在 Facebook SDK 中也称为 data-kid_directed_site。如果您的网站或在线服务或您服务的一部分针对的是 13 岁以下的儿童，则必须启用此属性。默认值为 false。

locale（可选）

默认情况下，语言环境设置为用户的系统语言；但是，您也可以指定语言环境。

有关此处接受的字符串的详细信息，请访问 Facebook API 本地化页面。

numposts（可选）

要显示的评论数。目前 Facebook SDK 将其限制为最大 100。有关详细信息，请参阅 Facebook 评论文档。

orderBy（可选）

显示评论时要使用的顺序。有关详细信息，请参阅 Facebook 评论文档。

refLabel（可选）

用于跟踪引荐的标签，必须少于 50 个字符，并且可以包含字母数字字符和一些标点符号。

share（可选）

指定是否在“赞”按钮旁边包含一个分享按钮。这仅适用于 XFBML 版本。默认值为 false。

showFacepile（可选）

显示喜欢该页面的朋友的个人资料照片。默认值为 true。

size（可选）

按钮的大小，可以是两种大小之一，large 或 small。默认值为 small。

有关详细信息，请参阅 Facebook 评论文档。

smallHeader（可选）

改为使用小标题。默认值为 false。

tabs（可选）

指定要呈现的标签（即 timeline、events、messages）。使用逗号分隔的列表添加多个标签（例如，timeline, events）。默认情况下，Facebook 页面插件显示时间线活动。

标题（可选）

为组件定义一个 title 属性，以传播到基础 <iframe> 元素。默认值为 "Facebook"。

我们在本网站上使用 Cookie 来分析流量并优化您的体验。
更多详情