Facebook 貼文與影片嵌入

想將 Facebook 粉絲專頁的精彩內容同步顯示在網站上嗎?無論是「圖文貼文」還是「影音內容」,只要跟著以下步驟,就能輕鬆將 FB 內容嵌入到您的網頁中。

一、嵌入 Facebook 貼文 (文章)

Step 1 開啟文章選單

開啟 Facebook 您想要嵌入的文章頁面,點擊文章右上方的 「三個點點」 選單圖示。

點擊文章選單

Step 2 選擇嵌入功能

在下拉選單中,找到並點選 嵌入 選項。

選擇嵌入

Step 3 取得程式碼

系統會跳出預覽視窗,請點擊 取得程式碼 按鈕。

取得程式碼

Step 4 選擇 IFrame 並複製 (重要)

1. 請務必在上方頁籤切換選擇 「IFrame」
2. 確認預覽畫面無誤後,複製畫面中的程式碼。

複製IFrame代碼

Step 5 貼上至網站後台

🚀 操作路徑: 網站後台編輯頁面 工具列 原始碼

1. 點選編輯器工具列左上角的 原始碼 按鈕。
2. 將剛剛複製的代碼貼入編輯器區塊中。

貼上原始碼

Step 6 返回編輯模式

再次點擊 原始碼 按鈕,返回一般編輯畫面。此時您會看到一個 IFRAME 的預覽區塊。

IFRAME區塊顯示

Step 7 開啟屬性設定

1. 將滑鼠移到該 IFRAME 區塊上。
2. 點擊 滑鼠右鍵
3. 選擇 IFrame 屬性

右鍵選擇屬性 點擊IFrame屬性

Step 8 調整 RWD 寬度 (關鍵步驟)

💡 重要設定提醒:
請務必將 寬度 (Width) 設定為 100%,以確保在手機版自動縮放。
高度 (Height) 可依照您的需求填入數值,設定完成後請按「確定」。
設定寬度為100%

Step 9 儲存變更

確認預覽畫面正常後,按下後台下方的 儲存 按鈕即完成操作。

儲存按鈕

二、嵌入 Facebook 影片

Step 1 點擊分享

開啟 Facebook 您想要嵌入的影片頁面,點擊下方的 分享 按鈕。

點擊分享

Step 2 選擇嵌入功能

在分享選單中,點選 嵌入 選項。

選擇嵌入

Step 3 複製代碼

點擊 複製代碼 按鈕,將完整的程式碼複製到剪貼簿。

複製代碼

Step 4 貼上至網站後台

回到網站後台編輯頁面:
1. 點選編輯器工具列左上角的 原始碼 按鈕。
2. 將剛剛複製的代碼貼入編輯器區塊中。

貼上原始碼

Step 5 返回編輯模式

再次點擊 原始碼 按鈕,返回一般編輯畫面。

IFRAME區塊

Step 6 選取 IFRAME

將滑鼠移到 IFRAME 的區塊上,點擊 滑鼠右鍵

右鍵點擊

Step 7 開啟屬性設定

在右鍵選單中,點擊 IFrame 屬性

選擇屬性

Step 8 調整 RWD 寬度 (關鍵步驟)

💡 重要設定提醒:
請務必將 寬度 (Width) 設定為 100%
高度 (Height) 可依照需求填入,設定完成後請按「確定」。
設定寬度100%

Step 9 儲存變更

確認預覽畫面正常後,按下後台下方的 儲存 按鈕即完成。

儲存按鈕