內嵌帖子

內嵌帖子可讓您輕鬆地將公開帖子(不論是 Facebook 專頁帖子或用戶帖子)置入您的網站或網頁的內容中。您僅能內嵌 Facebook 專頁和個人檔案的帖子。

程式碼產生器

帖子的網址
帖子的像素寬度(介乎 350 到 750 之間)

設定

設定 描述 預設

data-href

帖子的絕對網址。

n/a

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>(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. 在帖子的發佈時間上按滑鼠右鍵,然後複製連結位址。

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

透過 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 屬性,調整「內嵌帖子」在桌面上的寬度,如以下範例所示。選擇從 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 顯示的相同豐富資訊,並且可讓用戶直接從內嵌帖子對內容作者或專頁加以追蹤或讚好。