如何在 WordPress 中嵌入 Facebook 視頻

已發表: 2023-02-03


你想在 WordPress 中嵌入 Facebook 視頻嗎?

您發佈到 Facebook 的視頻也為您的網站提供了很好的內容。 通過嵌入 Facebook 視頻源,您可以讓您的網站保持新鮮和有趣,同時增加您的 Facebook 關注者。

在本文中,我們將向您展示一種在 WordPress 中嵌入 Facebook 視頻的簡單方法。

How to embed a Facebook video in WordPress

為什麼在 WordPress 中添加 Facebook 視頻?

視頻是與觀眾建立聯繫並保持他們參與度的好方法。 無論您運行的是個人博客還是商業網站,都是如此。

但是,如果您想使用 WordPress 在線博客賺錢,則視頻特別有用。 事實上,根據最新的博客統計數據,88% 的人在觀看視頻後購買了產品或服務。

創建引人入勝且有趣的視頻需要時間和精力,因此如果您將視頻發佈到 Facebook,那麼在您的 WordPress 網站上重複使用它們是有意義的。

通過將您的網站鏈接到您的 Facebook 帳戶,您發佈到 Facebook 的任何新視頻都會自動出現在您的網站上。 通過這種方式,您只需很少的日常工作就可以讓您的網站保持新鮮。

嵌入式視頻甚至可以幫助擴大您的 Facebook 頁面。 如果網站訪問者看到很多有趣的視頻和播放列表,那麼他們就會想在 Facebook 上關注您。 這可以為您帶來一些額外的關注者和更多參與度。

話雖如此,讓我們看看如何輕鬆地將 Facebook 視頻嵌入 WordPress。

在 WordPress 中安裝 Facebook 視頻插件

在 WordPress 中嵌入 Facebook 視頻的最簡單方法是使用 Custom Facebook Feed Pro 插件。

它是最好的社交媒體源插件,可讓您輕鬆地將 Facebook 相冊、評論、評論、社區帖子、視頻等嵌入您的 WordPress 網站。

A Facebook video feed, created using Smash Balloon

在本指南中,我們將使用 Smash Balloon 的專業版,因為它允許您在 WordPress 中嵌入視頻,包括高清、360和 Facebook 直播視頻。

Smash Balloon Pro 還允許您在自定義 Facebook 提要中顯示照片,並在每個帖子下方顯示喜歡、分享、評論和反應的總數。 但是,如果您剛剛起步並且預算有限,那麼您也可以使用免費版本。

首先,安裝並激活 Custom Facebook Feed Pro 插件。 有關更多詳細信息,請參閱我們關於如何安裝 WordPress 插件的分步指南。

激活後,轉到Facebook Feed » 設置,然後在“許可證密鑰”字段中輸入您的許可證密鑰。

Adding your Smash Ballon license in WordPress

您可以在 Smash Balloon 網站上的帳戶下找到此信息。

輸入密鑰後,單擊“激活”按鈕。

將您的 Facebook 頁面或組連接到 WordPress

Smash Balloon Custom Facebook Feed 允許您嵌入來自 Facebook 頁面和群組的視頻。 您甚至可以在燈箱彈出窗口中顯示視頻,以便人們可以直接在您的 WordPress 網站上觀看完整視頻。

第一步是將您的 Facebook 頁面或群組連接到 WordPress,因此請轉到Facebook Feed » All Feeds ,然後單擊“Add New”。

How to embed Facebook videos in WordPress

Smash Balloon 可讓您顯示來自 Facebook 時間線、相冊、Facebook 狀態、事件等的帖子。

由於我們要在 WordPress 中嵌入 Facebook 視頻,因此您需要選擇“視頻”,然後單擊“下一步”。

Creating a Facebook video feed using Smash Balloon

現在,您需要選擇從中獲取視頻的 Facebook 頁面或群組。

為此,請單擊“添加新項”。

Choose a source for your Facebook video embeds

接下來,選擇是否要顯示來自 Facebook 頁面或群組的視頻。

完成後,點擊“連接到 Facebook”。

How to connect Facebook to WordPress

這將打開一個彈出窗口,您可以在其中登錄您的 Facebook 帳戶並選擇要與 Smash Balloon 一起使用的頁面或組。

之後,單擊“下一步”。

Connecting Facebook accounts to WordPress

現在,Facebook 將顯示 Smash Balloon 可以訪問的所有信息,以及它可以執行的操作。

要限制 Smash Balloon 訪問您的 Facebook 帳戶,只需單擊以禁用任何開關。

請注意,這可能會影響您可以嵌入 WordPress 博客或網站的視頻,因此我們建議啟用所有開關。

Giving Smash Balloon access to your WordPress website

如果您對權限設置感到滿意,請點擊“完成”。

片刻之後,您應該會看到一條消息,確認您已將 WordPress 網站連接到 Facebook。

完成後,您就可以點擊“確定”了。

Connecting Facebook pages and groups to WordPress

Smash Balloon 現在會自動將您返回到 WordPress 儀表板。

如何在 WordPress 中嵌入 Facebook 視頻

此時,您會看到一個彈出窗口,其中包含您剛剛鏈接到您網站的 Facebook 群組或頁面。 只需選擇您要使用的頁面或組旁邊的單選按鈕,然後單擊“添加”按鈕。

Choosing a Facebook page or group to use with WordPress

如果您不小心關閉了彈出窗口,請不要擔心。 您只需刷新頁面即可重新打開彈出窗口。

完成後,WordPress 會自動將您帶回Facebook Feed » All Feeds頁面。 就像以前一樣,單擊“添加新”,選擇“視頻”,然後單擊“下一步”按鈕。

現在,選擇您的 Facebook 頁面或群組,然後單擊“下一步”。

Selecting the Facebook page or group to use with WordPress

在此屏幕上,您可以選擇要用於視頻源的模板。

所有這些模板都是完全可定制的,因此您可以根據您希望如何在您的網站上顯示 Facebook 視頻來微調設計。

我們使用的是“默認”模板,但您可以選擇任何您想要的模板。 做出選擇後,點擊“下一步”。

Using the WordPress video template

之後,您可以選擇是顯示 Facebook 頁面或群組中的所有視頻,還是僅顯示特定播放列表中的視頻。

如果您選擇“從特定播放列表中顯示”,則需要輸入該播放列表的 URL。

Adding a Facebook playlist to WordPress

做出決定後,請繼續並單擊“下一步”按鈕。

Smash Balloon 現在將根據您的來源和您選擇的模板創建一個提要。 這是一個好的開始,但您可能想要微調視頻在您網站上的顯示方式。

如何自定義您的嵌入式 Facebook 視頻

Smash Balloon Custom Facebook Feed 插件為您提供了多種方式來自定義視頻在您網站上的顯示方式。 話雖這麼說,值得看看這些設置。

在 WordPress 儀表板中,轉到Facebook Feed » All Feeds 。 在這裡,找到您剛剛創建的視頻源,然後單擊它旁邊的“編輯”按鈕,它看起來像一支小鉛筆。

Customizing the Facebook video feed for WordPress

這將打開 Smash Balloon 提要編輯器,它會在右側顯示您的 Facebook 視頻提要的預覽。

在左側,您會看到所有可用於自定義這些視頻在您的 WordPress 網站上的顯示方式的不同設置。 大多數這些設置都是不言自明的,但我們將很快涵蓋主要領域。

The Smash Balloon video feed editor

如果您想更改模板,請單擊“模板”。

然後,選擇“更改”按鈕。

Changing the Facebook video feed layout

這將打開一個彈出窗口,顯示您可以用於視頻源的所有不同模板。

只需選擇您想要使用的設計,然後點擊“更新”。

Changing the video feed layout

下一個設置是“Feed Type”,它允許您在 Feed 中顯示不同的內容。 例如,您可能決定顯示照片、相冊或事件而不是視頻。

由於我們要嵌入 Facebook 視頻,您通常會希望忽略此區域。

接下來,點擊“Feed Layout”。

Embedding Facebook videos in your WordPress website

在這裡,您可以選擇不同的佈局,例如砌體和網格,並更改進紙高度。

當您進行更改時,預覽會自動更新,因此您可以嘗試不同的設置以查看最佳效果。

Changing the social media feed layout

默認情況下,Smash Balloon 會在台式電腦和智能手機等移動設備上顯示相同數量的視頻。

您可以使用右上角的一排按鈕預覽您的視頻在台式電腦、平板電腦和智能手機上的效果。

Testing the video feed on smartphones and tablets

移動設備的屏幕通常較小,可能難以處理大量大型高分辨率視頻。 訪客也可能使用他們的移動數據而不是免費 Wi-Fi。

話雖如此,您可能希望在智能手機和平板電腦上顯示更少的視頻。 為此,只需在“帖子數”下的“移動”字段中輸入不同的數字即可。

Creating a mobile-responsive Facebook video feed

默認情況下,與台​​式電腦相比,Facebook 提要在智能手機和平板電腦上顯示的列較少。 這有助於您的所有視頻輕鬆適應較小的屏幕。

但是,在測試 WordPress 網站的移動版本後,您可能會對這些列在平板電腦和智能手機上的外觀感到不滿意。

您可以使用“列”設置更改 Smash Balloon 在平板電腦、手機和台式計算機上使用的列數。

Changing the columns in a mobile responsive layout

下一個設置頁面是“配色方案”。

Smash Balloon 默認使用從您的 WordPress 主題繼承的顏色,但在此屏幕上,您可以切換到“淺”或“深”配色方案。

另一種選擇是通過選擇“自定義”創建您自己的配色方案,然後使用控件更改背景顏色、更改 WordPress 中的文本顏色等。

Adding a custom color scheme to a social media feed

Smash Balloon 可以將標題添加到您的供稿中,這是您的 Facebook 個人資料圖片和頁面或組的名稱。 這讓訪問者知道嵌入視頻的來源,以及他們可以在 Facebook 上的什麼地方找到這些內容。

要添加此部分,請單擊左側菜單中的“頁眉”。

Changing the Smash Balloon header settings

然後,您可以單擊“啟用”開關。

添加標題後,您可以更改此區域的外觀,包括隱藏或添加您的 Facebook 個人資料圖片、更改個人簡介文本的大小等。

Removing the Facebook header from a WordPress embed

如果您想完全刪除標題,請單擊以關閉“啟用”切換。

默認情況下,Smash Balloon 會顯示每個視頻的標題。 如果您想隱藏標題,請從 Smash Balloon 編輯器主菜單中選擇“帖子”。

然後,繼續並單擊“發布樣式”。

Changing the video post style

在此屏幕上,您可以通過單擊“顯示視頻標題”滑塊來隱藏視頻標題。

如果您沒有為所有視頻添加標題,或者您的標題在 Facebook 之外沒有意義,這將很有用。

Hiding the Facebook video titles

在此屏幕上,您還可以隱藏或顯示視頻說明。 例如,您可以使用這些描述來提供有關視頻的額外信息。

要添加描述,只需單擊以啟用“顯示視頻描述”開關。

默認情況下,Smash Balloon 不會將 Facebook 的“贊”按鈕添加到您的視頻源中。 如果訪問者喜歡您嵌入的視頻,那麼他們可能想在 Facebook 上關注您。

話雖如此,您可能希望通過從編輯器的左側菜單中選擇“喜歡框”來向提要添加“喜歡”按鈕。

之後,只需單擊“啟用”按鈕,使其變為藍色。

Adding a Facebook like button to WordPress

Smash Balloon 將此按鈕添加到您的視頻源下方,但您可以通過打開“位置”下拉菜單並選擇“頂部”來更改它。

在此屏幕上,您還可以更改“喜歡”部分的外觀,包括更改其寬度、顯示在 Facebook 上關注您的人數、添加自定義號召性用語等。

How to customize the Facebook like button in WordPress

當您對按鈕的外觀感到滿意時,您可以通過選擇“加載更多按鈕”進入下一個設置頁面。

“加載更多”按鈕鼓勵訪問者滾動瀏覽更多視頻源,因此 Smash Balloon 默認將其添加到您的嵌入式 Facebook 源中。

Adding a Load More button to WordPress

由於它是一個如此重要的按鈕,您可能希望通過更改其背景顏色、懸停狀態、標籤等來自定義此按鈕。

另一種選擇是通過單擊“啟用”開關來完全刪除該按鈕。 例如,您可以刪除此按鈕,然後鼓勵訪問者查看您的 Facebook 頁面以觀看更多視頻。

Removing the Load More button from WordPress

默認情況下,Smash Balloon 允許訪問者在不離開您的 WordPress 網站的情況下觀看您的 Facebook 視頻。

他們只需單擊任何視頻縮略圖即可在燈箱中將其打開,如下圖所示

Smash Balloon's lightbox popup feature

訪問者可以使用箭頭滾動瀏覽您提要中的視頻。

如果他們想給照片點贊、發表評論或將視頻分享到他們的頁面,則他們可以單擊“在 Facebook 上查看”鏈接。

A 'View on Facebook' link created by Smash Balloon

您可以通過幾種不同的方式自定義 Smash Balloon 的默認燈箱。

要查看您的選項,請單擊左側菜單中的“燈箱”。

 Customizing the lightbox popup using Smash Balloon

在這裡,您可以更改燈箱的文本、鏈接和背景顏色的顏色。

燈箱功能允許訪問者在彈出窗口中觀看您的視頻。 如果您願意,您可以禁用燈箱,以便您的所有視頻都以小縮略圖的形式播放,嵌入到頁面內容中。

通過這種方式,您可以鼓勵人們訪問您的 Facebook 頁面,觀看完整尺寸的視頻。 要禁用燈箱,只需單擊“啟用”開關將其從藍色變為灰色。

Disabling the lightbox popup feature

當您對視頻源的外觀感到滿意時,請不要忘記點擊“保存”。

您現在已準備好將 Smash Balloon 提要嵌入您的網站。

如何將 Facebook 視頻添加到 WordPress

借助 Smash Balloon,您可以使用塊、小部件或短代碼將視頻源添加到您的 WordPress 網站。

如果您使用 Smash Balloon 創建了多個提要,那麼如果您要使用小部件或塊,則需要知道提要的代碼。

要獲取此代碼,請轉至Facebook Feed » All Feeds ,然後查看簡碼的feed=""部分。 您需要將此代碼添加到塊或小部件中,因此請記下它。

在下圖中,我們需要使用feed="6"

Getting the code for a Facebook video feed

如果您想在頁面或帖子中嵌入您的 Facebook 提要,那麼我們建議使用自定義 Facebook 提要塊。

只需打開您想要嵌入 Facebook 視頻的頁面或帖子。 然後,單擊“+”圖標以添加新塊並開始輸入“自定義 Facebook Feed”。

當出現正確的塊時,單擊以將其添加到頁面或帖子中。

The Custom Facebook Feed WordPress block

默認情況下,該塊將顯示您的 Smash Balloon 提要之一。 如果您想改用其他視頻源,請在右側菜單中找到“簡碼設置”。

在這裡,只需添加feed=""代碼,然後單擊“應用更改”。

Adding a video feed to WordPress using code

該塊現在將顯示來自您的 Facebook 頁面或組的視頻。 只需發布或更新頁面,即可在您的網站上直播視頻。

另一種選擇是將提要添加到任何小部件就緒區域,例如側邊欄或類似部分。 這允許訪問者從您網站的任何頁面觀看您的 Facebook 視頻。

只需轉到外觀 » 小部件,然後單擊藍色的“+”按鈕。

Adding videos to Facebook using a widget

之後,找到“自定義 Facebook Feed”小部件。

然後,只需將其拖到要顯示視頻源的區域即可。

Embedding Facebook videos using a widget

該小部件將自動顯示您的 Smash Balloon 提要之一。

要改為顯示不同的提要,請將提要的代碼鍵入或粘貼到“簡碼設置”框中,然後單擊“應用更改”。

Adding a Facebook video feed to WordPress using shortcode

您現在可以通過單擊“更新”按鈕使小部件生效。 有關更多信息,請參閱我們關於如何在 WordPress 中添加和使用小部件的分步指南。

最後,您可以使用短代碼將視頻嵌入任何頁面、帖子或小部件就緒區域。

只需轉到Facebook Feed » All Feeds並複制“簡碼”列中的代碼。 您現在可以將此代碼添加到任何簡碼塊中。

如需有關放置簡碼的幫助,請參閱我們關於如何添加簡碼的指南。

在 WordPress 中添加特定的 Facebook 視頻

有時您可能希望在頁面或帖子中嵌入特定的 Facebook 視頻。 例如,您可能有一個 Facebook 視頻與您最新的博客討論相同的主題,或者有一個宣傳視頻展示您剛在網上商店推出的產品。

要嵌入特定視頻,您需要購買並安裝 Featured Posts 擴展,因為它允許您使用其 ID 顯示特定的帖子或事件。

首先,轉到Facebook Feed » Extensions

在這裡,找到“精選帖子”擴展並單擊其“添加”按鈕。

How to install the Featured Posts WordPress extension

這將在新選項卡中打開 Smash Balloon 網站,其中包含有關如何購買擴展程序的說明。

一旦你有了擴展,你就可以像安裝插件一樣安裝它。 如果您需要幫助,請參閱我們關於如何安裝 WordPress 插件的指南。

激活插件後,轉到Facebook Feed » All Feeds並單擊“Add New”。

在“高級提要類型”下,選擇“單一精選帖子”,然後單擊“下一步”。

How to show a specific Facebook video in WordPress

您現在可以按照上述相同的過程選擇要用作源的頁面或組。

在下一頁上,您需要輸入要嵌入的視頻的 ID。

Adding a Facebook post URL or ID to WordPress

要獲取此 ID,請在新選項卡中訪問 Facebook,然後打開您要嵌入的視頻。

您現在可以繼續複製 URL。

How to get the post ID for a Facebook video

之後,只需將 URL 發佈到您的 WordPress 儀表板中,然後單擊“下一步”。

完成後,您可以設置視頻樣式,然後按照上述相同過程將其添加到您的網站。

我們希望本文向您展示瞭如何在 WordPress 中嵌入 Facebook 視頻。 您可能想查看我們關於如何創建電子郵件通訊的指南以及我們專家挑選的最佳 YouTube 視頻庫插件。

如果您喜歡這篇文章,請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。 您還可以在 Twitter 和 Facebook 上找到我們。