社交附加程式

內嵌影片及直播視像播放程式

內嵌影片播放程式讓您可以輕鬆地在網站上加入 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

若與影片關聯的 Facebook 帖子中有任何文字，請設為 true 以納入該文字。僅限桌面版網站使用。

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. 在帖子的發佈時間上點擊右鍵，然後複製連結位址。

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

透過 Graph API

如果您想在網站中自動整合內嵌影片播放程式，有可能會使用 Graph 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 後，變更 js.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，則只需在 WordPress 帖子中加入 fb-post 標籤，便可使用內嵌影片播放程式附加程式：

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

常見問題

我能否使用 Graph API 的 video 屬性 embed_html？

不能，您不應使用 embed_html 屬性。請改為使用內嵌影片播放程式附加程式！

關於 embed_html 屬性：

Graph 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>"
}