內嵌貼文

內嵌貼文是供粉絲專頁或 Facebook 上的用戶將公開貼文放入網站或網頁內容中的一種簡單方法。您僅能內嵌 Facebook 粉絲專頁和個人檔案的公開貼文。

代碼產生器

貼文的網址

貼文的像素寬度（介於 350 到 750 之間）

加上完整貼文

設定

設定	說明	預設
`data-href`	貼文的絕對網址。	`n/a`
`data-lazy`	`true` 意指透過設定 `loading="lazy"` iframe 屬性來使用瀏覽器的消極式載入機制。其效果為，如果外掛程式沒有靠近檢視區，瀏覽器將不會呈現該外掛程式，並且可能永遠不會顯示。可為 `true` 或 `false`（預設值）其中之一。	`false`
`data-width`	貼文寬度。最小值 `350` 像素；最大值 `750` 像素。將此欄位留白可使用彈性寬度。	彈性寬度
`data-show-text`	已套用至相片貼文。設定為 `true` 以包含 Facebook 貼文的文字（如果有的話）。	`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 所產生，而您只需要原始的貼文網址。有兩種取得貼文網址的方式：

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

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

透過圖形 API

如果您想要在網站中自動整合內嵌貼文，建議使用圖形 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 顯示的相同豐富資訊，並且可讓用戶直接從內嵌貼文對內容作者或粉絲專頁加以追蹤或按讚。

永久連結

如果刪除貼文或變更分享對象選擇器，會出現什麼情況？

在內嵌貼文的位置會顯示以下訊息：

永久連結