首页 » 博文 » wpbeginner » 最佳教程 » 如何在 WordPress 中嵌入 Facebook 相册

如何在 WordPress 中嵌入 Facebook 相册

您想在 WordPress 中嵌入 Facebook 相册吗?

嵌入 Facebook 相册是提高 WordPress 网站和 Facebook 页面参与度的好方法。它还可以增加您的社交媒体关注者。

在本文中,我们将向您展示如何在 WordPress 中轻松嵌入 Facebook 相册。

如何在 WordPress 中嵌入 Facebook 相册

在 WordPress 中嵌入 Facebook 相册

在WordPress 网站上显示相册可以使您的页面更具吸引力。

当您向 Facebook 添加更多照片时,它们会自动显示在您的网站上,因此这也是保持网站新鲜度的好方法,即使对于普通访问者也是如此。

WordPress 过去内置了对 Facebook 相册的嵌入支持。就像嵌入 YouTube 视频一样,您只需复制并粘贴任何 Facebook 相册的 URL,WordPress 就会自动显示该相册。

然而,Facebook 和 Instagram 此后对其 API 进行了更改。这些变化使得 WordPress 无法继续 oEmbed 支持 Facebook 和 Instagram。

如果您尝试嵌入相册链接,您将收到一条错误消息。

Facebook 相册嵌入错误

值得庆幸的是,有一种方法可以使用插件修复 WordPress 中的 Facebook 和 Instagram 嵌入。

让我们看看如何在 WordPress 中轻松嵌入 Facebook 相册,包括如何在任何页面或帖子上显示特定相册。

安装 Facebook 相册插件

在 WordPress 中嵌入 Facebook 相册的最佳方法是使用Smash Balloon 自定义 Facebook Feed 插件。

该插件可让您在您的网站上嵌入 Facebook 状态更新、评论、评论、社区帖子等。

如何使用 Smash Balloon 将 Facebook 照片嵌入您的 WordPress 网站

它还可以让访问者通过打开灯箱弹出窗口来仔细查看您的照片和图像,而无需访问 Facebook。

在本指南中,我们将使用 Smash Balloon 的专业版,因为它允许您嵌入 Facebook 相册、显示视频、在自定义 Facebook 源中显示照片等。不过,还有一个免费版本,可以让您为 WordPress 创建自定义 Facebook feed,无论您的预算是多少。

您需要做的第一件事是安装并激活Smash Balloon Custom Facebook Feed 插件。有关更多详细信息,请参阅我们有关如何安装 WordPress 插件的指南。

激活后,您需要转到Facebook Feed » 设置,然后在“许可证密钥”字段中输入您的许可证密钥。

将您的许可证密钥添加到 Smash Balloon

您可以在 Smash Balloon 网站上您的帐户下找到此信息。

输入密钥后,单击“激活”按钮。

将您的 Facebook 页面或群组连接到 WordPress

该插件允许您嵌入来自 Facebook 群组或页面的提要。您甚至可以在每张照片下方显示最新评论,以及总喜欢和分享。

要将您的 Facebook 页面或群组连接到 WordPress,请转到Facebook Feed » 所有 Feed,然后单击“添加新的”。

将 Facebook 群组或页面添加到 WordPress

Smash Balloon 可让您显示相册、时间线、事件等中的帖子。

要嵌入您的 Facebook 相册,您需要点击“相册”,然后点击“下一步”。

选择粉碎气球“专辑”模板

现在,您需要选择从中获取照片的 Facebook 页面或群组。

首先,单击“添加新项”。

选择 Facebook 相册的来源

在下一个屏幕上,选择是否要显示页面或组中的相册。

之后,只需点击“连接到 Facebook”即可。

如何将 Smash Balloon 和 WordPress 连接到 Facebook

这将打开一个弹出窗口,您可以在其中登录您的 Facebook 帐户并选择您想要从中获取相册的页面或群组。

做出此决定后,单击“下一步”。

选择要嵌入相册的 Facebook 页面和群组

完成此操作后,Facebook 将显示 Smash Balloon 将有权访问的所有信息以及它可以执行的操作。

要限制 Smash Balloon 访问您的 Facebook 帐户,只需单击任意开关将其从“是”更改为“否”。请注意,这可能会影响您可以嵌入WordPress 博客或网站的相册和照片。

话虽如此,我们建议启用所有开关。

授予 Smash Balloon 访问您 Facebook 页面的权限

准备好后,点击“完成”。

片刻之后,您应该会看到一条消息,确认您已将WordPress 网站连接到 Facebook。完成后,是时候单击“确定”了。

如何将 Facebook 相册连接到您的 WordPress 网站

Smash Balloon 现在会自动带您返回 WordPress 仪表板。

如何在 WordPress 中嵌入 Facebook 相册

现在,您将看到一个弹出窗口,其中包含您刚刚链接到网站的组或页面。只需选择来源旁边的单选按钮,然后单击“添加”按钮即可。

如何嵌入 Facebook 页面或群组中的相册

如果您不小心关闭了弹出窗口,请不要惊慌。您只需刷新选项卡即可重新打开弹出窗口。

之后,WordPress 会自动带您返回Facebook Feed » All Feeds页面。就像以前一样,单击“添加新”按钮,选择“相册”,然后单击“下一步”按钮。

现在,选择您的 Facebook 页面或群组,然后单击“下一步”。

选择 Facebook 相册的来源

在此屏幕上,您可以选择用作 Feed 起点的模板。所有这些模板都是完全可定制的,因此您可以根据您希望如何在网站上显示 Facebook 相册来微调设计。

我们使用“默认”模板,但您可以选择任何您想要的模板。

为您的 Facebook 相册选择模板

完成后,单击“下一步”按钮。

Smash Balloon 现在将继续根据您的来源和您选择的模板创建专辑源。这是一个好的开始,但您可能需要微调相册在 WordPress 网站上的外观。

如何自定义您的嵌入式 Facebook 相册

Smash Balloon Custom Facebook Feed 插件为您提供了多种自定义相册显示方式的方法。考虑到这一点,值得看看您可以做出哪些改变。

Facebook Feed » All Feeds屏幕上,找到您的相册 feed,然后单击其看起来像一支小铅笔的“编辑”按钮。

自定义您的 Facebook 相册源

这将打开 Smash Ballon 源编辑器,其中会在右侧显示 Facebook 相册的预览。

在左侧,您将看到可用于自定义这些相册在您网站上的显示方式的所有不同设置。大多数设置都是不言自明的,但我们将快速介绍一些关键领域。

编辑 Facebook 相册提要

首先,您可以通过单击“提要布局”来更改相册的显示方式。

在此屏幕上,您可以在不同布局之间切换并更改进纸高度。您甚至可以 通过选择“轮播”布局来创建响应式滑块。

当您进行更改时,预览将自动更新,以便您可以尝试不同的设置以查看最佳效果。

在 WordPress 中选择新的 feed 布局

默认情况下,提要将在台式计算机和移动设备(例如智能手机)上显示相同数量的帖子。

您可以使用右上角的一排按钮预览相册在台式电脑、平板电脑和智能手机上的外观。

在 WordPress 中选择新的 feed 布局

移动设备通常具有较小的屏幕和较低的处理能力,因此您可能希望在平板电脑和智能手机上显示较少的专辑。

为此,只需在“帖子数量”下的“手机”字段中输入不同的数字即可。

更改嵌入的 Facebook 相册在移动设备上的显示方式

通过尝试不同的布局,您可以创建一个看起来很棒的社交媒体源,无论访问者使用什么设备。

默认情况下,与台式电脑相比,Facebook feed 在智能手机和平板电脑上显示的栏目较少。这有助于您的所有相册和照片舒适地适应较小的屏幕。

测试 WordPress 网站的移动版本后,您可能对这些列在智能手机和平板电脑上的显示效果不满意。如果是这种情况,您可以通过更改“列”部分中的数字来显示更少的列。

使用 Smash Balloon 更改列布局

当您对所做的更改感到满意时,请单击“自定义”链接。

这将带您返回主 Smash Balloon 编辑器,准备好探索下一个设置屏幕,即“配色方案”。

更改 Facebook 照片源的配色方案

默认情况下,Smash Balloon 使用从WordPress 主题继承的配色方案,但此屏幕允许您切换到“浅色”或“深色”外观,

您还可以通过选择“自定义”来创建自己的配色方案,然后使用控件更改背景颜色、更改 WordPress 中的文本颜色等。

将自定义颜色添加到您的 Facebook 相册源

默认情况下,Smash Balloon 会在您的 Feed 中添加一个标题,即您的 Facebook 个人资料图片以及页面或群组的名称。这可以添加一些额外的上下文,而不是简单地 将您的 Facebook 视频和照片嵌入到 WordPress 中。

要更改此部分的外观,请单击左侧菜单中的“标题”。

自定义 Facebook 相册提要的标题

在此屏幕上,您可以更改标题的大小、颜色、隐藏或显示您的 Facebook 个人资料图片等等。

如果您想完全删除标题,请单击以关闭“启用”开关。

如何在 WordPress 中嵌入 Facebook 相册

默认情况下,Smash Balloon 显示每个专辑的标题。如果您想隐藏标题,请从 Smash Balloon 编辑器主菜单中选择“帖子”。

然后,点击“帖子样式”。

更改 Facebook 相册源的样式

在这里,您可以通过单击“显示专辑标题”滑块来删除专辑标题。

如果您的相册标题分散了人们对照片的注意力,或者它们嵌入到您的网站上时没有意义,那么这会很有用。

在您的 WordPress Facebook feed 中显示专辑标题

在此屏幕上,您还可以选择是否显示每个相册中有多少张照片。

要添加此数字,只需单击“相册中的帖子数”开关即可。

在 WordPress 中将号码添加到 Facebook 相册

默认情况下,Smash Balloon 不会在您的 Feed 中包含 Facebook“点赞”按钮。要获得更多 Facebook 关注者,您可能需要通过从编辑器左侧菜单中选择“Like Box”来添加此按钮。

之后,只需单击“启用”按钮即可使其变为蓝色。

在 WordPress 中向 Facebook 相册提要添加“喜欢”按钮

默认情况下,Smash Balloon 会在嵌入的相册下方添加此按钮,但您可以通过打开“位置”下拉列表并选择“顶部”来更改此设置。

在此屏幕上,您还可以更改“喜欢”部分的外观,包括添加自定义号召性用语、显示有多少人在 Facebook 上关注您等。

在 WordPress 中自定义 Facebook 关注按钮

当您对“喜欢”按钮的外观感到满意时,您可以转到“加载更多按钮”屏幕。

“加载更多”按钮鼓励访问者滚动浏览更多 Facebook 动态,因此 Smash Balloon 默认将其添加到您的嵌入式相册中。

在 WordPress 中向自定义 Facebook 照片源添加“加载更多”按钮

由于它是一个如此重要的按钮,因此您可以通过更改背景颜色、文本颜色和标签来帮助“加载更多”脱颖而出。

另一种选择是通过单击“启用”开关来完全删除该按钮。

从嵌入的 Facebook 相册中删除“加载更多”按钮

默认情况下,Smash Balloon 允许访问者在不离开您的网站的情况下浏览您的 Facebook 相册。

他们只需单击任何相册即可打开灯箱,如下图所示。

粉碎气球的灯箱功能

然后,访问者可以使用箭头滚动浏览相册。

如果他们想要喜欢某张照片、发表评论或与 Facebook 好友分享该图像,则可以点击“在 Facebook 上查看”链接。

从灯箱访问 Facebook 群组或页面

您可以通过几种不同的方式来自定义默认灯箱。

要查看您的选项,请单击左侧菜单中的“灯箱”。

自定义 Facebook 照片灯箱

在这里,您可以更改灯箱文本、链接和背景颜色的颜色。

灯箱功能使人们可以轻松地与您的照片互动,而且还允许人们在不访问您的 Facebook 页面的情况下滚动浏览您的相册。如果您想让更多访问者访问您的 Facebook 页面,则可以通过单击“启用”开关来禁用灯箱功能。

禁用 WordPress 网站上的灯箱功能

现在,如果访问者点击相册,他们将被重定向到新选项卡中的 Facebook 页面。

当您对相册的外观感到满意时,请不要忘记单击“保存”来存储您的更改。

您现在已准备好将这些相册添加到您的 WordPress 网站。

如何将 Facebook 相册添加到 WordPress

您可以使用块、小部件或短代码将 Facebook 相册添加到 WordPress。

如果您使用 Smash Balloon 创建了多个 feed,那么如果您要使用块或小部件,则需要知道 feed 的代码。

只需转到Facebook Feed » All Feeds,然后查看feed=""短代码部分。您需要将此代码添加到块或小部件中,因此请记下它。

在下图中,我们需要使用custom-facebook-feed feed=1.

使用代码嵌入 Facebook 相册

如果您想将 Facebook 相册嵌入页面或帖子中,那么您通常会使用自定义 Facebook Feed 块。

只需打开您想要嵌入相册的页面或帖子即可。然后,单击“+”图标添加新块并开始输入“自定义 Facebook Feed”。

当右侧块出现时,单击将其添加到您的页面或帖子中。

如何向 WordPress 添加自定义 Facebook Feed 块

默认情况下,该块将显示您的 Smash Balloon feed 之一。如果您想使用不同的提要,只需在右侧菜单中找到“短代码设置”即可。

您现在可以将custom-facebook-feed feed=1代码添加到此框中。之后,单击“应用更改”。

使用简码将 Facebook 相册添加到网站

该块现在将显示您的 Facebook 页面或群组中的相册。只需发布或更新页面即可使专辑出现在您的网站上。

另一种选择是将提要添加到任何小部件就绪区域,例如侧边栏或类似部分。这允许访问者从您网站的任何页面查看您的 Facebook 照片。

只需转到WordPress 仪表板中的外观 » 小部件,然后单击蓝色的“+”按钮。

将 Facebook 相册添加到网站的侧边栏

完成此操作后,找到自定义 Facebook Feed 小部件。

然后,只需将其拖到您想要显示提要的区域即可。

如何在 WordPress 中嵌入 Facebook 相册和照片

该小部件将显示您使用 Smash Balloon 创建的提要之一。

要显示不同的提要,请在“短代码设置”框中输入提要的代码,然后单击“应用更改”。

如何使用短代码将 Facebook 相册嵌入小部件就绪区域

您现在可以单击“更新”按钮以使小部件生效。有关更多信息,请参阅我们有关如何在 WordPress 中添加和使用小部件的分步指南。

最后,您可以使用短代码将相册嵌入到任何页面、帖子或小部件上。

只需转到Facebook Feed » 所有 Feed并复制“短代码”列中的代码即可。您现在可以将短代码添加到网站上任何小部件就绪区域。

有关更多信息,请参阅我们有关如何在 WordPress 中添加短代码的详细指南。

在 WordPress 中添加特定的 Facebook 相册

Smash Balloon 还允许您在 WordPress 网站上的任何位置嵌入特定的 Facebook 相册。这使您可以向访问者显示最新的相册,或显示与页面其余内容相关的相册。例如,如果您已将Facebook 活动日历添加到 WordPress,那么您可能还想显示过去活动的相册。

要嵌入特定的 Facebook 相册,您需要前往Facebook Feed » 扩展购买并安装相册扩展。

在这里,找到“相册”扩展并单击其“添加”按钮。

《粉碎气球》单曲专辑扩展

这将在新选项卡中打开 Smash Ballon 网站,其中包含有关如何购买专辑扩展的说明。

获得扩展后,您可以按照与安装插件完全相同的方式安装它。如果您需要帮助,请参阅我们有关如何安装 WordPress 插件的指南。

激活插件后,转到Facebook Feed » All Feeds,然后单击“添加新的”。

在“高级源类型”下,选择“单个专辑”,然后单击“下一步”。

在您的 WordPress 网站上显示特定相册

您现在可以选择要用作源的页面或组,并按照上述相同过程选择模板。

在下一页上,您需要输入要嵌入的相册的 ID。

在 WordPress 中嵌入特定相册

在新选项卡中,只需打开您要显示的 Facebook 相册即可。

现在,您可以复制 = 符号后面以及句号和 & 符号之间的数字。例如,在下图中,我们需要复制 447443907512397。

获取 Facebook 相册的 ID

您现在可以将这些数字粘贴到 WordPress 仪表板中。

之后,单击“下一步”,Smash Balloon 将获取专辑。

将 Facebook 相册 ID 添加到 WordPress

之后,您可以按照上述相同的过程设置相册的样式并将其添加到您的网站。

奖励: 如何向 WordPress 添加更多社交媒体源

如果您想在 WordPress 中创建自定义 Facebook Feed 那么 Smash Balloon Facebook Feed 插件是一个不错的选择。 

然而,许多网站拥有多个社交媒体帐户,例如 YouTube 频道、Twitter 个人资料和 Instagram 帐户。如果您为每个平台创建独特的内容,那么在您的网站上显示此内容是有意义的。

如果您在 Instagram 上分享图像,那么您 可以创建自定义 Instagram 照片源 ,然后将其添加到任何页面、帖子或小部件就绪区域。您甚至可以 在 WordPress 中添加 Instagram 可购物图像。 

WordPress 中可购物的 Instagram 图像的示例

视频是吸引访问者注意力并将其留在您网站上的好方法。

考虑到这一点,您可能希望 显示 YouTube 频道中的最新视频

如何在 WordPress 中嵌入 YouTube 视频

我们希望本文能帮助您了解如何在 WordPress 中嵌入 Facebook 相册。您可能还想查看我们专家精选的WordPress 最佳 Twitter 插件,以及如何创建电子邮件通讯以便在访问者离开您的网站后与他们联系。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top