內嵌貼文

內嵌貼文可讓您輕鬆地將公開貼文(不論是 Facebook 粉絲專頁貼文或是用戶貼文)置入您的網站或網頁內容中。您僅能內嵌公開分享的 Facebook 粉絲專頁及個人檔案貼文。

程式碼產生器

貼文的網址
貼文的像素寬度(介於 350 到 750 之間)

設定

設定 說明 預設

data-href

貼文的絕對網址。

n/a

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>(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#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</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 src="//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5" 
      async></script>  
  <div class="fb-post" 
      data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
      data-width="500"></div>
</body>
</html>

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

5.自訂

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

取得貼文網址

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

  1. 瀏覽器的網址列複製永久連結的網址。
  2. 在貼文的發佈時間上按滑鼠右鍵,然後複製連結網址。

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

透過圖形 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 屬性,調整「內嵌貼文」在桌面版顯示的寬度,如以下範例所示。選擇從 350750 之間的像素值。

請勿使用 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    : 'v2.11'
    });
  }; 
  (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-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 顯示的相同豐富資訊,並且可讓用戶直接從內嵌貼文對內容作者或粉絲專頁加以追蹤或按讚。