社交外掛程式

內嵌影片和直播視訊播放器

內嵌影片播放器讓您可以輕鬆在網站上加入 Facebook 影片和 Facebook 直播視訊。您的影片或直播視訊來源可以是粉絲專頁或用戶使用的任何公開影片貼文。

內嵌影片播放器配置器程式碼範例設定手動加入程式碼

逐步說明

1. 選擇網址或網頁

挑選要內嵌的 Facebook 影片網址。

2. 程式碼配置器

將網址貼至程式碼配置器，然後點擊「取得程式碼」按鈕，即可產生您的內嵌影片播放器程式碼。

3. 複製並貼上 HTML 程式碼片段

複製該程式碼片段，然後貼至目的地網站的 HTML。

內嵌影片播放器配置器

影片的網址
影片的像素寬度
取得程式碼

完整程式碼範例

複製該程式碼範例，然後貼至您的網站。將 data-href 值調整為您的影片網址。使用 data-width 屬性來控制播放器大小。

<html>
<head>
  <title>Your Website Title</title> 
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

  <!-- Your embedded video player code -->
  <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">
    <div class="fb-xfbml-parse-ignore">
      <blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/">
        <a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a>
        <p>How to share with just friends.</p>
        Posted by <a href="https://www.facebook.com/facebook/">Facebook</a> on Friday, December 5, 2014
      </blockquote>
    </div>
  </div>

</body>
</html>

設定

以上配置器不包含內嵌影片播放器的所有可能設定。您還可變更以下設定：

設定 說明 預設

data-href

影片的絕對網址。

n/a

data-allowfullscreen

允許以全螢幕模式播放影片。可為 false 或 true。

false

data-autoplay

載入網頁時自動開始播放影片。影片會無聲（靜音）播放。用戶可透過影片播放器控制項來打開聲音。此設定不適用於行動裝置。可為 false 或 true。

false

data-lazy

true 意指透過設定 loading="lazy" iframe 屬性來使用瀏覽器的消極式載入機制。其效果為，如果外掛程式沒有靠近檢視區，瀏覽器將不會呈現該外掛程式，並且可能永遠不會顯示。可為 true 或 false（預設值）其中之一。

false

data-width

影片容器寬度。下限為 220px。

auto

data-show-text

設定為 true 以包含與影片相關的 Facebook 貼文的文字（如果有的話）。僅供桌面版網站使用。

false

data-show-captions

設定為 true 以預設顯示字幕（如果有的話）。僅在桌面版提供字幕。

false

設定範例

<div class="fb-video"
  data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
  data-width="500"
  data-allowfullscreen="true"
  data-autoplay="true"
  data-show-captions="true"></div>

從影片貼文取得程式碼

1. 前往影片貼文

如果您張貼公開影片（請參閱常見問題），則可直接從影片貼文本身取得內嵌程式碼。

從選項功能表中選擇 Embed Video：

或在以整頁模式觀看影片時，選擇右下方的 Embed Video 按鈕：

僅適用於粉絲專頁

在粉絲專頁上張貼公開影片時（請參閱常見問題），您可直接從動態時報取得內嵌程式碼。點擊顯示在 Facebook 貼文右上角的圖示。

從下拉式功能表中選擇 Embed Video：（僅適用於粉絲專頁）

2. 複製並貼上程式碼

您會看到一個對話方塊，其中顯示內嵌影片貼文所需的程式碼。複製此段程式碼，然後貼至您要在網頁上顯示的位置。

如需技術詳細資料，請參閱手動加入程式碼一節

手動加入程式碼

除了代碼產生器外，您還可手動內嵌程式碼。

1. 取得影片貼文網址

首先，您必須取得要分享的影片貼文網址。影片貼文必須是公開狀態（請參閱常見問題），若發佈時間旁顯示的是灰色地球圖示，即表示該貼文為公開貼文：

您可使用以下的網址範例進行測試：

"https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"

2. 載入 JavaScript SDK

若要使用「內嵌影片播放器外掛程式」或任何其他「社交外掛程式」，您必須在網站中加入 Facebook JavaScript SDK。您只需在一個網頁上載入 SDK 一次，且最好是緊跟在 <body> 開頭標籤之後載入：

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

如需實作 JavaScript SDK 的詳細說明，請參閱 JavaScript SDK - 快速入門。

3. 放置「內嵌影片播放器」標籤

接著，將「內嵌影片播放器」標籤置於網站任何位置。將 {your-video-post-url} 替換為您的貼文網址。

<div class="fb-video" data-href="{your-video-post-url}"  
  data-allowfullscreen="true" data-width="500"></div>

4. 測試

完成以上步驟後，您就能測試內嵌影片播放器。整合完成後，程式碼看起來便會如下所示：

<html>
  <title>My Website</title>
<body>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
  <h1>My Video Player</h1>
  <div class="fb-video"
    data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
    data-width="500"
    data-allowfullscreen="true"></div>
</body>
</html>

測試範例的結果如以下螢幕截圖所示。

5. 自訂

依照本頁面下方的指示，調整大小、語言和其他設定。

取得影片貼文網址

在某些情況下，內嵌程式碼是由 CMS 所產生，而您只需要原始的貼文網址。有兩種取得貼文網址的方式：

  1. 從瀏覽器的網址列複製永久連結的網址。
  2. 在貼文的發佈時間上點擊右鍵，然後複製連結網址。

以下螢幕截圖將這兩種方式以紅色標示。

透過圖形 API

如果您想要在網站中自動整合內嵌影片播放器，建議使用圖形 API 來彙總影片。例如，您可以使用粉絲專頁影片 API 端點，該端點對於您對 /{page-id}/videos 的要求會以下列格式回應（精簡版）：

{
  "data": [
    {
      "id": "1234567890",
      "created_time": "2015-02-25T23:22:06+0000",
      "description": "My Video Caption",
      "embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=1234567890\" width=\"1280\" height=\"720\" frameborder=\"0\"></iframe>",
      "format": []
    }
   ]
}

取得影片網址：

使用該 id 值，以下列結構建立網址：

"https://www.facebook.com/video.php?v={id}"

請勿將 embed_html 屬性用於內嵌影片。如需有關此主題的詳細資訊，請參閱常見問題一節

桌面版的版面

您可透過「內嵌影片播放器」標籤的 data-width 屬性，調整「內嵌影片播放器」在桌面板顯示的寬度，如以下範例所示。此值必須至少是 220。此值雖無上限，但播放器絕不會大於其父元素。

請勿使用 CSS 樣式標籤來調整外掛程式的大小。這樣可能會造成顯示錯誤。

<!-- WRONG! -->
<style type="text/css">
.fb-video {
  width: 500px;
}
</style>
<div class="fb-post" data-href="{your-video-post-url}"></div>

<!-- CORRECT -->
<div class="fb-video" data-href="{your-video-post-url}"
  data-allowfullscreen="true" data-width="500"></div>

全螢幕

您可加入 data-allowfullscreen="true" 屬性，允許以全螢幕模式播放影片。

行動版網頁的版面

在行動版網頁上，內嵌影片播放器會自動縮放為其父元素的內部寬度。

變更語言

您可以透過載入 Facebook JavaScript SDK 的本地化版本，變更「內嵌影片播放器」外掛程式的語言。載入 SDK 後，變更 src 的值來使用您的語言設定。將 en_US 替換為您的語言設定，例如 fr_FR 為法語（法國）：

src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v3.2"

您可能需要調整社交外掛程式的寬度來配合不同語言。您可在本地化和翻譯頁面找到更多資訊。

Wordpress

如果您的 Wordpress 網站已使用 Facebook JavaScript SDK，則只需在貼文中加入 fb-video 標籤，便可使用「內嵌影片播放器」外掛程式：

<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" 
  data-width="500" data-allowfullscreen="true"></div>

如果您未使用 Facebook JavaScript SDK，而是透過複製與貼上程式碼片段來內嵌影片（程式碼片段可從各則影片貼文取得），則「內嵌影片播放器」外掛程式很可能無法顯示，因為 Wordpress 會將所有 & 字元轉換為 #038;，而損壞播放器。

請改將下列程式碼加入外掛程式：

<script>window.fbAsyncInit = function() {
  FB.init({
    xfbml      : true,
    version    : 'v3.2'
  });
  }; (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" data-width="500" data-allowfullscreen="true"></div>

我們即將推出全新的 Wordpress 整合功能，操作更加簡便。

常見問題

是否可使用圖形 API video 的 embed_html 屬性？

否，您不應使用 embed_html 屬性。請改用「內嵌影片播放器」外掛程式！

關於 embed_html 屬性：

圖形 API 端點 video 會提供名為 embed_html 的屬性。其值包含的 HTML 元素可內嵌於網頁以播放所要求的影片。

請勿將此值與「內嵌影片播放器」外掛程式相互混淆。建議您不要再使用這項屬性，請改用「內嵌影片播放器」外掛程式！

如果您使用 embed_html 屬性值，影片播放器將：

  • 無法在行動裝置和平板電腦上運作
  • 不會包含其他任何資訊，如觀看次數、影片標題等。

embed_html 屬性範例（已過時）：

{
  "embed_html": 
    "<iframe 
      src=\"https://www.facebook.com/video/embed?video_id=1234567890\"
      width=\"1280\" 
      height=\"720\"
      frameborder=\"0\">
    </iframe>"
}