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 作為網頁元件或 React 功能元件使用

↓ 網頁元件 ↓ React / Preact

網頁元件

在加入自訂樣式之前，您必須包含每個 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 貼文/影片/留言的網址。例如，貼文或影片外觀會像 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 頁面外掛會顯示時間軸動態。

標題（選用）

為元件定義 標題 屬性，以便傳播到底層 <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 貼文/影片/留言的網址。例如，貼文或影片外觀會像 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。

你在嵌入留言回覆時，也可以選擇包括回覆的母留言。

動作（選用）

顯示在按鈕上的動詞。可以是 like 或 recommend。預設為 like。

資料配置（選用）

選擇外掛可用的不同佈局之一。可以是 standard、button_count、button 或 box_count 之一。預設為 standard。

隱藏封面（選用）

隱藏標頭中的封面照片。預設值為 false。

隱藏行動呼籲按鈕（選用）

隱藏自訂呼籲行動按鈕（若有）。預設值為 false。

kdSite（選用）

這個屬性在 Facebook SDK 中也稱為 data-kid_directed_site。如果你的網站或線上服務，或是服務中的一部分是針對 13 歲以下兒童，你必須啟用這個屬性。預設值為 false。

地區（選用）

預設情況下，地區設定會設為使用者的系統語言；不過，你也可以指定一個地區設定。

有關在此處可以接受的字串的詳細資訊，請參閱 Facebook API 本土化頁面。

貼文數（選用）

要顯示的留言數目。目前，Facebook SDK 將此限制為最高 100。有關詳細資訊，請參閱 Facebook 留言文件。

排序方式（選用）

顯示留言時要使用的順序。有關詳細資訊，請參閱 Facebook 留言文件。

推薦標籤（選用）

追蹤推薦來源的標籤，長度必須小於 50 個字元，且可以包含字母數字字元和一些標點符號。

分享（選用）

指定是否在按讚按鈕旁包含一個分享按鈕。這僅適用於 XFBML 版本。預設為 false。

顯示朋友動態（選用）

顯示按讚粉絲的個人資料照片。預設值為 true。

大小（選用）

按鈕大小，兩個選項之一，large 或 small。預設為 small。

詳細資訊，請參閱 Facebook 留言文件。

小標題（選用）

改用小標題。預設值為 false。

標籤（選用）

指定要呈現的標籤（亦即 timeline、events、messages）。使用逗點分隔的清單來新增多個標籤（例如 timeline, events）。預設，Facebook 頁面外掛會顯示時間軸動態。

標題（選用）

為元件定義 標題 屬性，以便傳播到底層 <iframe> 元素。預設值為 "Facebook"。

我們在此網站上使用 cookie 來分析流量並最佳化您的體驗。
更多詳細資料