如何在 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 上找到我们。