为何在你的WordPress网站上添加Facebook Like Box?
在WordPress网站添加Facebook Like Box有很多好处。首先,它能帮助人们更容易地喜欢你的Facebook粉丝页或商业页,这意味着你的帖子会出现在他们的Facebook动态中,让你能够超越你的网站继续接触用户。此外,Facebook Like Box显示了有多少人点赞了你的Facebook页面,这能作为社交证明,鼓励更多访客点击“赞”。
方法1:使用插件添加Facebook Like Box(适合初学者)
第一种方法是最简单并且推荐的给初学者的方法来在他们的网站上添加Facebook Like Box。它还允许你在网站上显示Facebook动态。这种方法使用Smash Balloon,这是一个用户友好的WordPress插件,可以在WordPress中嵌入各种社交媒体动态,包括Like Box。对于本教程,你可以使用免费的Smash Balloon Social Post feed插件。但如果你想要比Like Box更多的特性(例如显示视频、照片和事件),那么我们推荐升级到专业版。
设置Smash Balloon Facebook Feed插件
首先,你需要在管理区域安装WordPress插件。之后,进入Facebook Feed » 所有动态并点击“添加新的”。现在,选择“时间线”动态类型,然后点击“下一步”按钮。在这个阶段,你需要将你的Facebook页面连接到你的WordPress网站。点击“添加新的”按钮。
Smash Balloon将指导你进入新的屏幕。在这里,选择“页面”作为来源类型,然后点击“连接到Facebook”。现在,你需要登录你的Facebook账号。之后,选择你希望在WordPress博客或网站上显示Like Box的页面,然后点击“下一步”。
你现在会看到Smash Balloon的权限设置。我们建议启用所有权限以确保一切正常运行。现在,点击“完成”。最后一个弹出窗口将确认你已成功将Smash Balloon与Facebook连接。点击“确定”以继续。Smash Balloon将把你重定向到管理区域,在这里你必须选择一个Facebook页面用来显示在你的时间线动态中。选择一个页面并点击“添加”。你现在将看到你刚刚连接的Facebook页面作为Smash Balloon插件页面中的来源。选择那个页面并点击“下一步”。
定制Facebook Like Box
在这个阶段,Smash Balloon将带你进入Facebook动态编辑器。第一步是点击“动态布局”选项,然后滚动到“帖子数量”部分,设置桌面和手机的帖子数量为0,这将去除所有最近帖子的显示,只显示Like Box。如果你也想显示你的Facebook动态 juntamente com Like Box,你可以参考我们的教程:如何在WordPress中创建自定义Facebook动态。
现在,返回到主动态编辑器页面并打开“Like Box”设置,然后启动“Like Box”功能。在这里,你可以调整Like Box的尺寸、位置、封面照片显示、自定义宽度、自定义操作呼叫文本等。完成后,只需点击右上角的“保存”按钮。
在WordPress页面或文章中嵌入Facebook Like Box
在这个阶段,你可以在页面或小工具就绪区域(如侧边栏)显示Facebook Like Box。为此,点击右上角的“嵌入”按钮,现在会出现一个嵌入弹出窗口,提供两个选项来显示Like Box:一个是使用简码,另一个是直接添加到页面或小工具就绪区域。第二个选项更简单,所以我们将首先演示这个方法。如果你想将Like Box添加到特定页面,点击“添加到页面”按钮,选择一个页面并点击“添加”。然后进入Gutenberg区块编辑器,点击“+ 添加区块”按钮,打开区块插入器库,找到Facebook Feed区块,并将其拖放到页面上的合适位置。在区块中,选择你之前创建的带有Like Box的Facebook动态。区块将显示Like Box。
如果你有多个Facebook页面并已为每个页面创建了Like Box,你也可以在区块设置边栏中通过选择下拉菜单中的动态来切换它们。最后,点击“更新”按钮以使更改生效。 此外,你还可以使用简码在WordPress网站的其他部分嵌入Facebook Like Box。
方法2:使用代码添加Facebook Like Box
如果你只想显示Like Box而不添加任何其他类型的Facebook动态,那么使用Facebook页面插件可能显得多余。在这种情况下,你可以使用代码添加Like Box。这种方法可能对初学者来说有点吓人,但我们将向你展示如何使用WPCode插件插入代码。通过这个WordPress插件,你可以轻松地将自定义代码片段添加到WordPress而不会破坏你的网站。对于这个教程,免费版WPCode已经足够,尽管你可以升级到Pro版以获得测试模式和基于云的代码片段库等高级功能。
安装WPCode插件并添加自定义代码片段
首先,安装并激活WPCode插件。激活后,进入Code Snippets » + 添加片段,选择“添加自定义代码(新片段)”并点击“使用片段”。现在你会来到代码编辑器。首先为你的自定义代码片段命名以便以后识别。这个示例,我们将其命名为“Facebook JavaScript SDK”。保持这个标签页打开,同时在浏览器中新建一个标签页并访问Facebook开发者页面,点击“登录”并登录你的Facebook账号。
如果这是你第一次访问该页面,完成创建免费账户的引导向导。然后,进入Facebook开发者控制面板,点击“创建应用”按钮。在下一个页面中,选择“其他”作为使用案例,然后点击“下一步”。
你将看到可以为Facebook页面创建的各种应用。选择“商业”并点击“下一步”。为你的应用命名,可以是任何容易识别的名字,并输入你的邮箱地址,选择一个可选的商业账户。点击“创建应用”。返回到Facebook开发者页面的社交插件部分,填写你的Facebook页面URL,清空“标签”字段,并根据需要指定Like Box的宽度和高度。你还可以选择使用较小的标题,禁用封面照片等。我们还选择使Like Box适应容器宽度以使其大小根据放置在网站的位置自适应。
完成后点击“获取代码”按钮,将看到一个显示两种代码片段的弹窗:JavaScript SDK和iFrame。一般建议使用JavaScript SDK因为它们通常加载速度更快。在JavaScript SDK标签下,确保选择你之前创建的应用名称。然后复制步骤2的JavaScript SDK API代码,返回到WPCode标签并将代码粘贴在代码编辑框中,然后保存代码片段。
接下来,创建第二个代码片段,称之为“Facebook Like Box”。返回到Facebook开发者页面并复制步骤3的代码,导航回WPCode标签,将代码粘贴在代码预览框中,保存代码片段。配置插入设置后,使代码生效并保存片段。
在WordPress中嵌入Facebook Like Box部件
如果使用经典WordPress主题,你可能希望在小工具就绪区域(如侧边栏、页头或页脚)显示Facebook Like Box。进入嵌入弹出窗口,选择“添加到小工具”。与之前的方法一样,点击“+ 添加区块”按钮,找到Facebook Feed区块,拖动到适当位置。在区块中选择之前创建的包含Like Box的Facebook动态,点击“更新”,保存更改。