如何在您的網站上嵌入響應式 Facebook 視頻

已發表: 2022-11-29

正在尋找將響應式 Facebook 視頻嵌入添加到您的網站的方法?

通過顯示 Facebook 視頻,您可以保持網站訪問者的參與度,甚至可以將他們轉化為新的關注者。

但是,如果您不習慣處理代碼,嵌入響應式 Facebook 視頻可能會很困難。

因此,我們將向您展示在您的網站上嵌入 Facebook 視頻的最簡單方法,從而為您提供幫助。

在此之前,讓我們看看顯示來自 Facebook 的響應式視頻如何幫助您的業務。

或者您可以單擊此處並跳至教程。

為什麼要向您的網站添加響應式 Facebook 視頻嵌入?

Facebook 是目前最大的社交媒體平台,也是引人入勝的視頻內容的絕佳來源。

如果您想以一種簡單的方式讓訪問者留在您的網站上,您只需嵌入相關的 Facebook 視頻即可。

如果您的 Facebook 視頻具有響應性,那麼使用移動設備的用戶也可以查看它們。

除了提高訪問者的參與度之外,如果人們在您的網站上花費更多時間,您還可以獲得更好的 SEO。

此外,您還可以在您的網站上嵌入響應式 Facebook 視頻,以便:

  • 在您的產品頁面上顯示視頻評論和推薦,將訪問者轉化為客戶
  • 展示您的直播視頻並吸引更多人加入您的直播活動
  • 宣傳您自己的 Facebook 視頻以獲得更多觀看次數、點贊和關注者
  • 添加問答環節、採訪等內容,以與訪客建立關係
  • 以及更多…

通過嵌入來自 Facebook 的視頻,您可以提升您的 Facebook 影響力、獲得更多銷售額並發展您的業務。

在您的網站上顯示 Facebook 視頻的另一種方法是使用 iFrame。 但是,如果您希望您的網站發展壯大,使用嵌入比 iFrame 更好。

畢竟,像 Google 這樣的搜索引擎實際上無法從 iFrame 中讀取內容。

如果您改為使用 Facebook 嵌入,搜索引擎可以識別您網站上關鍵字豐富的社交媒體內容,並幫助您的網站排名更高。

現在,讓我們繼續看看嵌入響應式 Facebook 視頻的最簡單方法。

向 WordPress 添加響應式 Facebook 視頻嵌入的最簡單方法

要在您的網站上顯示 Facebook 視頻,您可以使用 2 個選項:

  • 手動方式:為您的 Facebook 視頻生成嵌入代碼,然後將代碼添加到您的網站。
  • 自動方式:使用可以自動將 Facebook 視頻嵌入您網站的 WordPress 插件——無需編碼。

通過選擇手動方法,您將不得不處理大量嵌入代碼,這會花費大量時間和精力。

示例手動嵌入 facebook live

除非您聘請設計師或手動調整所有代碼,否則您無法更改 Facebook 視頻的外觀。 因此,嵌入式視頻播放器可能會與您網站的設計發生衝突。

另外,如果在向您的站點添加嵌入代碼時出現任何問題,您將沒有支持團隊來幫助您。

解決方案?

您可以使用 Facebook 提要插件在您的網站上嵌入響應式視頻。 最好的選擇是 Facebook Feed Pro。

自定義 facebook feed pro 插件

Facebook Feed Pro 是一個用戶友好的插件,您只需點擊幾下即可使用它來顯示 Facebook 內容——無需觸摸一行代碼。

由於該插件在構建時考慮到了速度,因此您的 Facebook 視頻在用戶點擊它們之前不會自動播放。 因此,您可以嵌入任意數量的視頻,而且您的網站仍將如閃電般快速。

您所要做的就是遵循一個 3 步流程,該流程將幫助您創建 Facebook 提要、自定義它們並將它們嵌入您的網站。

用於創建提要的引導流程粉碎氣球

使用您的 Facebook 源,您可以顯示響應式視頻、直播、照片、相冊、Facebook 帖子等等。

此外,您可以使用預先設計的模板和可視化定制器來選擇提要在您網站上的顯示方式。

最好的部分? 您可以從 WordPress 專家團隊獲得幫助,他們隨時準備為您提供幫助。

憑藉所有這些驚人的功能,Facebook Feed Pro 獲得了來自全球超過250,000 名用戶4.9/5 星評級。

來自用戶的自定義 facebook feed pro 評論

準備好顯示響應式 Facebook 視頻嵌入了嗎? 為您的站點獲取 Facebook Feed Pro。

讓我們來看看如何使用此插件輕鬆顯示響應式 Facebook 視頻。

如何在您的網站上嵌入響應式 Facebook 視頻

要使用 Facebook Feed Pro 插件顯示適合移動設備的 Facebook 視頻,您只需按照以下分步指南操作即可:

第 1 步:安裝 Facebook Feed Pro 插件

您需要做的第一件事是從此處獲取 Facebook Feed Pro 插件的副本。

一旦你有了插件,你就可以在你的 WordPress 網站上安裝並激活它。

不確定如何? 您可以查看我們關於如何安裝 WordPress 插件的指南。

安裝並激活插件後,您可以繼續執行第 2 步

第 2 步:創建 Facebook 視頻源

要在您的網站上顯示響應式 Facebook 視頻,您可以從創建新的 Facebook 提要開始。

為此,請從您的 WordPress 儀表板區域打開Facebook Feed » All Feeds菜單,然後單擊Add New

創建一個新的 Facebook 提要

之後,您可以選擇要創建的 Facebook 提要類型。 使用 Facebook Feed Pro,您可以創建供稿以嵌入您的時間線、相冊、活動日曆、評論等。

由於我們顯示的是響應式視頻,因此選擇Videos提要類型並單擊Next

為 Facebook 選擇視頻提要類型

就這樣,您的 WordPress 網站現在有了一個新的 Facebook 視頻源。 在第 3 步中,您可以嘗試將此提要連接到您的 Facebook 帳戶。

第 3 步:連接您的 Facebook 帳戶

通過連接您的 Facebook 帳戶,您的新提要可以從 Facebook 獲取視頻,然後將它們顯示在您的網站上。

要開始,請單擊此處的添加新按鈕。

添加源 facebook feed pro

接下來,您可以選擇顯示來自主頁群組的響應式視頻。

選擇您想要的選項後,單擊下面的“連接到 Facebook ”按鈕。

使用 facebook feed pro 連接到 facebook

您的 WordPress 網站現在會將您轉到 Facebook,以便您完成帳戶連接。

在執行此操作之前,請在彈出窗口中選擇要連接的頁面或組,然後單擊下一步。

選擇 Facebook 頁面

接下來,該插件將請求對您的 Facebook 帳戶的只讀訪問權限,以便它可以查看 Facebook 數據。 由於訪問權限是只讀的,因此插件根本無法進行任何更改。

要授予只讀訪問權限並連接您的 Facebook 帳戶,請單擊完成

允許只讀訪問 facebook feed pro

這樣做將再次打開您的網站,您可以在其中添加此 Facebook 頁面或組作為來源。

為此,請單擊彈出窗口中的添加按鈕。

選擇 Facebook 群組頁面

下次您創建 Facebook 提要時,您可以從這裡選擇這個來源——無需離開您的網站!

在這裡,單擊“下一步”以完成此步驟。

選擇來源 facebook feed pro

現在您已經連接了您的帳戶,您可以開始自定義響應式 Facebook 視頻在您的網站上的外觀。

第 4 步:自定義您的 Facebook 視頻源

您使用此插件創建的 Facebook 提要將自動響應,甚至會復制您網站的設計。

除此之外,您還可以通過不同的方式自定義您的 Facebook 視頻源。

首先,該插件會要求您為您的 Facebook 提要選擇一個模板。 這些預建模板具有獨特的設計,您只需單擊一下即可導入。

您所要做的就是選擇要使用的提要模板,然後單擊“下一步”

選擇您的 Facebook 提要模板

接下來,您可以選擇兩種方式來顯示您的響應式 Facebook 視頻:

  • 顯示所有視頻:顯示您在頁面或組中擁有的所有視頻
  • 從特定播放列表中顯示:僅顯示選定播放列表中的視頻

選擇您喜歡的選項,然後單擊下一步繼續。

選擇視頻提要類型 facebook

對於此示例,我們將繼續使用“顯示所有視頻”選項。

執行此操作後,該插件將在可視化定制器中打開您的提要。

在這裡,您可以使用左側的選項單擊幾下,更改您的佈局、提要大小、顏色、標題、帖子樣式、加載更多按鈕等等。

facebook feed pro video 的實時 feed 編輯器

在右側,您可以看到 Facebook 提要的實時預覽。 這樣,您就可以實時跟踪所有更改。

首先,您可以通過單擊配色方案來編輯 Facebook 視頻源的顏色。

facebook feed pro 的配色方案選項

Facebook Feed Pro 提供 3 種配色方案供您選擇:

  • 從主題繼承:複製 WordPress 主題的所有顏色
  • 淺色:為您的提要顯示淺色背景和深色字體
  • 深色:改用深色背景和淺色字體
  • 自定義:手動選擇提要的所有顏色
選擇你的配色方案 facebook feed pro

選擇配色方案後,單擊“保存”按鈕。

要繼續設計您的 Facebook 視頻源,請單擊左上角的自定義按鈕。

自定義按鈕 facebook feed 直播

這樣做將使您返回主提要自定義菜單。 使用視覺定制器,您還可以在 Facebook 視頻源上方顯示標題。

要更改標題的外觀,請單擊此處的標題選項。

Facebook Feed Pro 直播的標題選項

現在,在左側查找標題類型選項以選擇所需的標題類型。

您可以在此處選擇 2 個不同的選項:

  • 視覺:顯示帶有封面照片、個人資料照片、點贊數等的圖形標題
  • 文本:寫一個簡短的標題並將其顯示在您的 Facebook 視頻源的頂部。
標題類型 facebook feed pro

選擇標題類型後,單擊“保存”按鈕以確認您的更改。

現在,您可以使用其餘選項自定義視頻數量、佈局、按鈕設計、點贊框等。

一旦您對響應式 Facebook 視頻源的外觀感到滿意,請單擊“保存”按鈕。

您現在已準備好進入最後一步並嵌入新的 Facebook 視頻源。

第 5 步:在您的網站上嵌入響應式 Facebook 視頻

要在 WordPress 中嵌入您的 Facebook 視頻,您有兩種選擇:

  • 在您的頁面上嵌入響應式 Facebook 視頻
  • 在側邊欄或頁腳嵌入響應式 Facebook 視頻

下面讓我們看看如何使用這兩種方法:

在您的頁面上嵌入響應式 Facebook 視頻

使用可視化定制器,只需點擊幾下,您就可以開始嵌入您的 Facebook 訂閱源。

首先,通過單擊“嵌入”按鈕打開供稿的嵌入選項。

嵌入您的直播視頻 wordpress

您現在會看到一個彈出窗口,您可以在其中選擇響應式 Facebook 視頻的位置。

現在,單擊“添加到頁面”選項繼續。

將您的直播視頻添加到網站頁面

之後,該插件將顯示可用於顯示視頻的 WordPress 頁面列表。

從列表中選擇一個頁面,然後單擊下面的“添加”按鈕。

選擇 wordpress 頁面 facebook live

您現在可以看到在 WordPress 編輯器中打開的頁面。 要在此處嵌入您的 Facebook 視頻源,您只需添加一個內容塊即可。

單擊加號圖標 (+)以添加塊,然後從選項中選擇自定義 Facebook Feed

在 wordpress 塊編輯器中嵌入 facebook 提要

如果您單擊“更新”按鈕,Facebook 視頻源將在您的網站上直播。

要查看您的響應式視頻的外觀,您可以打開您的網站並親自查看。

Facebook 直播視頻示例

有了這個,讓我們看看另一種嵌入響應式 Facebook 視頻的方法。

在側邊欄或頁腳嵌入響應式 Facebook 視頻

您還可以使用 Facebook 小部件在您網站的側邊欄或頁腳區域顯示響應式視頻。

首先,從 WordPress 儀表板打開Facebook Feed » 所有 Feeds菜單,然後單擊要嵌入的 Feed。

在編輯器中打開 Facebook 直播

您現在可以再次在可視化定制器中看到打開的 Facebook 提要。

在這裡,單擊“嵌入”按鈕以選擇要顯示視頻的位置。

嵌入您的直播視頻 wordpress

這次,您可以單擊彈出窗口中的“添加到小部件”按鈕。

通過這樣做,您可以開始向您的 WordPress 網站添加一個新的 Facebook 小部件。

添加 facebook 直播網站側邊欄頁腳

現在,您可以在頁腳和側邊欄之間進行選擇,以顯示您的 Facebook 視頻。

想要在側邊欄上顯示響應式 Facebook 視頻嵌入嗎?

只需單擊此處的側邊欄面板。

打開側邊欄面板以嵌入實時 Instagram 提要

對於這個例子,我們將只使用側邊欄來顯示 Facebook 視頻。

但是,如果您想改用頁腳區域,則可以單擊“頁腳”面板。

打開頁腳麵板以嵌入實時 Instagram 提要

您現在可以單擊底部的加號 (+) 圖標,將新的小部件添加到側邊欄或頁腳。

執行此操作後,從選項中選擇自定義 Facebook Feed小部件。

Facebook 社交媒體提要小部件

最後,單擊“更新”按鈕將來自 Facebook 的視頻嵌入到您的網站上——所有這些都無需 HTML、CSS 或任何類型的編碼。

如果您想查看它的外觀,請立即打開您的網站。

在網站側邊欄嵌入 Facebook 直播

你有它!

現在您知道如何在您的 WordPress 網站上嵌入響應式 Facebook 視頻了。 如您所見,在 Facebook Feed Pro 的幫助下,這非常容易——即使您不熟悉編碼。

就這樣,您可以保持訪問者的參與度、增加您的 Facebook 關注度、將人們轉化為客戶等等。

想要嵌入響應式 Facebook 視頻? 立即獲取 Facebook Feed Pro!

如果您還想顯示適合移動設備的 YouTube 視頻,請查看我們的指南,了解如何在 WordPress 上嵌入響應式 YouTube 視頻。

覺得這有幫助嗎? 您可以在 Facebook 和 Twitter 上關注我們,以獲取更多有用的社交媒體營銷提示和技巧。