社交附加程式

內嵌帖子

內嵌帖子是將專頁或用戶在 Facebook 上發佈的公開帖子嵌入您網站或網頁內容的簡單方法。您只可以嵌入來自 Facebook 專頁和個人檔案的公開帖子。

程式碼產生器

帖子的網址
帖子的像素闊度（介乎 350 到 750 之間）
取得代碼

設定

設定 說明 預設

data-href

帖子的絕對網址。

n/a

data-lazy

true 代表您可透過設定 loading="lazy" iframe 屬性來使用瀏覽器的延遲載入機制。隨之產生的影響是，如果附加程式並非靠近檢視區，則瀏覽器不會顯示附加程式，且您可能永遠無法看到此附加程式。其設定可以是 true 或 false（預設）其中一個。

false

data-width

帖子的寬度。最低 350 像素；最高 750 像素。如要使用流動寬度，可以將此留空。

流動寬度

data-show-text

已套用至相片帖子。如果 Facebook 帖子包含文字，請設為 true 以納入相關文字。

false

從帖子取得程式碼

1.前往您的帖子

您可以直接從帖子本身取得內嵌程式碼。如果帖子為公開，請點擊顯示在 Facebook 帖子右上方的圖示。

從下拉式選單中選擇 Embed Post：

如果是相片帖子，請選擇右下方的 Embed Post 按鈕：

2.複製並貼上程式碼

您會看到一個對話框，其中顯示內嵌帖子的程式碼。複製此程式碼，然後貼至您要其在網頁上顯示的位置。

如需了解技術細節，請參閱手動新增程式碼區塊

手動新增程式碼

除了使用程式碼產生器之外，您還可以手動嵌入程式碼。

1.取得帖子網址

首先，您需要取得要分享的帖子網址。此帖子必須為公開；如果帖子發佈時間旁邊顯示灰色地球圖示，即代表此為公開帖子：

您可以使用下列範例網址作測試：

"https://www.facebook.com/20531316728/posts/10154009990506729/"

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-post-url} 替換為您的帖子網址。

<div class="fb-post" data-href="{your-post-url}"></div>

4.測試

完成以上步驟後，您便可以測試自己的內嵌帖子。如果整合完成，結果會如下所示：

<html>
  <title>My Website</title>
<body>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>  
  <div class="fb-post" 
      data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
      data-width="500"></div>
</body>
</html>

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

5.自訂設定

按照本頁下方的指示操作，以調整大小、語言和其他設定。

取得帖子網址

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

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

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

透過 Graph API

如果您想在網站中自動整合內嵌帖子，有可能會使用 Graph API 來彙總帖子。舉例來說，您可能會使用專頁動態消息 API 端點和 fields 參數 permalink_url。

系統會就您對 /{page-id}/feed?fields=permalink_url 的要求傳送類似下方的回應：

{
  "data": [
    {
      "id": "1234567890_3456789012", 
      "permalink_url": "https://www.facebook.com/1234567890/posts/3456789012"
    }
  ]
}

桌面電腦版面配置

您可以透過內嵌帖子標籤的 data-width 屬性，調整內嵌帖子在桌面電腦上的寬度，如下例所示。選擇 350 至 750 的像素值。

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

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

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

流動版網頁版面配置

在流動版網頁上，內嵌帖子會自動調整大小，以符合容器寬度。

WordPress

如果您已在 WordPress 網站上使用 Facebook JavaScript SDK，則只需在 WordPress 帖子中加入 fb-post 標籤，便可使用內嵌帖子附加程式：

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>

如果您未有使用 Facebook JavaScript SDK，而是透過複製並貼上程式碼片段來嵌入帖子（程式碼片段可從各則 Facebook 帖子取得），則系統很可能無法顯示內嵌帖子附加程式，因為 WordPress 會將所有的 & 字元轉換為 #038;，因而損壞附加程式。

請改為使用下列程式碼，以加入附加程式：

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v21.0'
    });
  }; 
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
  
<div 
  class="fb-post" 
  data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" 
  data-width="500"></div>

我們會在日後推出新方式，讓您輕鬆整合 WordPress。

常見問題

如果您使用的是 HTML5 或 XFBML 版本，則需要在為資料庫進行實例化時包含語言代碼。

載入 SDK 時，您可更改 js.src 的值，以使用您的本地語言。將 en_US 改為您想要的本地語言，例如代表法文（法國）的 fr_FR：

// Example 1:
'https://connect.facebook.net/fr_FR/sdk.js';

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

請參閱 Facebook 本地語言 XML 檔案，以了解我們支援的本地語言。

視乎您選擇的語言，您或需要調整社交附加程式的寬度。如欲了解更多相關資訊，請查看本地化與翻譯頁面。

固定連結

內嵌帖子會顯示任何附加媒體，以及在帖子上讚好、分享和回應的次數。內嵌帖子可讓用戶使用您的網站看到 Facebook.com 顯示的相同豐富資訊，並且可讓用戶直接從內嵌帖子對內容作者或專頁加以追蹤或讚好。

固定連結

在內嵌帖子的位置會顯示以下訊息：

固定連結