17713433920 info@mac163.com

最近,一位读者问我们如何在其WordPress网站上添加Facebook事件日历?

Facebook活动是社区组织具有内置社交功能的活动的简便方法。但是,如果您也没有在网站上宣传这些事件,则您的网站访问者可能会错过这些事件。

在本文中,我们将向您展示如何在WordPress中添加Facebook事件日历以最大程度地扩大影响范围。

为什么要在您的网站上添加Facebook活动日历?

将Facebook活动日历添加到您的网站后,访问者可以轻松地找到有关您即将发生的事件的信息。您的用户可以将自己标记为有兴趣或在Facebook上参加活动。

这是吸引更多Facebook粉丝并建立参与度的好方法。由于它会自动从Facebook中提取事件,因此还节省了您的时间和精力。

您将不需要使用WordPress日历插件将事件手动添加到您的网站。您可以直接创建Facebook事件,然后自动在您的网站上显示它们。

如何在wordpress中添加facebook活动日历
如何在wordpress中添加facebook活动日历

注意:您将需要一个Facebook页面,而不是个人资料。此页面将至少需要1个事件。

在本教程中,我们将引导您完成两种将Facebook事件日历添加到WordPress网站的方法。

第一种方法需要在您的网站上输入一些代码,对于那些不想使用插件的用户来说,这很容易。但是,它不提供任何自定义选项。

第二种方法是我们推荐给想要自定义事件日历显示并对显示内容进行更精细控制的用户。这是我们制作的自定义Facebook事件日历显示的示例:

方法1.在没有插件的情况下将Facebook事件添加到您的站点

如果您根本不想使用插件怎么办?无需使用插件即可将Facebook事件添加到WordPress网站。

此方法涉及向您的站点添加一些代码。如果您是初学者,我们不建议您这样做。它也不能完全控制事件的显示方式。

要使用此方法,您将需要使用专为开发人员设计的Facebook工具。它称为Facebook Page插件。不要让这个名字使您感到困惑。它不是WordPress插件。

首先,转到页面插件工具,然后输入您的Facebook页面的URL。

Facebook现在将显示您页面供稿的预览。接下来,您需要删除“标签”字段下的“时间轴”一词,而是添加“事件”。您还可以在此处设置事件供稿的宽度和高度。

现在,您将在预览框中看到您的事件。只需单击预览下方的“获取代码”按钮。

这将弹出一个弹出窗口,您需要在其中切换到iFrame标签并复制嵌入代码。

接下来,转到WordPress网站的管理区域,然后编辑要显示Facebook事件的帖子或页面。

在帖子编辑屏幕上,单击(+)图标添加一个新块,然后在“格式”块中找到HTML块。

接下来,您需要做的是将Facebook Page Plugin工具中的代码粘贴到此代码块中:

之后,您可以保存或发布您的帖子。现在,您可以访问此帖子或页面,以查看您的Facebook事件供稿。

要更改其显示方式,您将需要返回Facebook Page Plugin工具并再次创建代码。但是,您只能更改一些设置。

如果您想自定义事件的显示方式并更好地控制选项,则建议使用WordPress插件“ 自定义Facebook Feed Pro”,我们将在下一种方法中介绍。

方法2.使用自定义Facebook Feed Pro插件

对于本教程,您将需要安装并激活Smash Balloon Custom Facebook Feed Pro插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

安装插件后,您需要将其连接到您的Facebook帐户。

将您的Facebook帐户与Smash Balloon连接

通常,使用Smash Balloon,您可以自动连接您的帐户。为此,您只需转到Facebook Feed»设置,然后单击“连接Facebook帐户”按钮。

但是,由于最近Facebook API更改,该方法当前不适用于在您的网站上显示事件。

您将需要手动生成Facebook访问令牌才能显示事件。这涉及几个不同的步骤,但是幸运的是,Smash Balloon具有一些使它尽可能简单的工具。

首先,您需要转到Facebook for Developers网站,并使用通常的Facebook登录信息注册开发者帐户。

如果您已经拥有开发者帐户,只需单击右上角的“我的应用程序”链接,然后单击“添加新应用程序”按钮。

如果您以前从未创建过应用程序,则只需单击“创建应用程序”按钮以​​继续。

这将弹出一个弹出窗口,您需要单击“其他所有内容”选项:

接下来,您需要输入应用的显示名称,然后单击“创建应用ID”按钮。

系统可能会提示您输入Facebook密码并完成验证码。之后,您将看到您的应用仪表板:

在信息中心的左侧,您需要点击设置»基本

现在,只需单击“应用程序秘密”旁边的“显示”按钮。这样做时,系统可能会提示您再次输入您的Facebook密码。

此步骤所需要做的就是将“应用程序ID”和“应用程序机密”复制到“ 粉碎气球”页面上的步骤13中的框中:

现在,我们将创建访问令牌。首先,您需要转到Facebook Graph API资源管理器页面。

在右侧,确保在“ Facebook应用”下拉菜单中选择了您的应用名称。然后,继续并点击“生成访问令牌”按钮:

这将弹出一个弹出窗口,您只需单击“继续为”按钮即可继续。

此处的下一步是为访问令牌添加特殊权限。为此,您需要做的就是将其复制并粘贴pages_read_user_content到“添加权限”行中,然后在出现在小弹出窗口中时单击它,如下所示:

添加该权限后,它应如下所示:

现在,您需要再次单击“生成访问令牌”按钮。现在,您将看到一个这样的弹出窗口。只需单击“继续…”按钮:

然后,Facebook将要求您选择要使用的页面。选择要显示事件的页面。在这里只选择一页很重要。选中所选页面旁边的框后,点击“下一步”按钮。

然后,Facebook将显示最终屏幕。

在这里,您需要做的就是单击“完成”。Facebook上有关将您的应用程序提交审查的消息不适用于您,因为该应用程序仅处于开发模式。

接下来,您只需要在最后一次单击“获取访问令牌”按钮即可。现在,Facebook将为您提供一个临时访问令牌。

此令牌只能用于进行您的第一个API调用。这就是为什么您需要使用Smash Ballon的文档页面进行该API调用并获取扩展令牌的原因。

只需在此页面上的第 23步将其复制并粘贴到框中即可。

将其复制到框中后,单击“扩展我的令牌”按钮。然后,您会在一个大框中看到扩展令牌:

请将其保持在单独的标签中,或将其复制并粘贴到安全的位置,以方便您稍后使用。

现在我们有了所需的所有信息,让我们将您的WordPress博客连接到Facebook。

只需转到WordPress仪表板中的Facebook Feed»设置,然后单击“手动连接帐户”按钮:

您会看到一个下拉列表,只需选择“页面”选项即可:

接下来,输入页面名称,页面ID(Facebook页面URL的最后一部分)和您先前创建的扩展访问令牌。然后,继续并单击“连接帐户”按钮。

完成此操作后,您将在“自定义Facebook Feed Pro”设置中看到已连接的页面:

这里的最后一步是单击“制作主要Feed”按钮:

完成此操作后,您将在屏幕上看到上面的Facebook ID和Facebook Access令牌已被填写:

完成此操作后,不要忘记单击“保存设置”按钮。

设置您的Facebook活动日历Feed

接下来,我们将设置Facebook feed,使其仅显示事件,而不是所有帖子。为此,您需要转到“ 自定义”»“常规”页面。

在这里,您需要向下滚动页面到“帖子类型”部分。到达该部分时,您需要取消选中“事件”以外的所有复选框。

现在,您可以将活动供稿添加到网站上的任何帖子或页面上。您甚至可以使用小部件将其添加到侧边栏或页脚中。

我们将为我们的Facebook活动创建一个页面。转到页面»添加新页面以创建新页面。

在帖子编辑屏幕上,单击(+)图标以添加一个新块。在“小部件”部分中找到“自定义Facebook Feed”块,或使用搜索栏进行搜索。

然后,您将在块编辑器中看到您的Facebook事件供稿。您可以预览页面以在网站上实时查看它。

注意:我们在事件Feed中添加了一些额外的样式。我们稍后将说明如何执行此操作。

如果您使用的是经典编辑器,则可以使用简码 将供稿添加到页面中[custom-facebook-feed]。只需输入您希望事件显示在页面上的位置即可:

您也可以使用该简码将您的Facebook Feed添加到侧边栏或任何其他启用了小部件的区域中。

为此,请转到WordPress信息中心中的外观»小部件。只需将一个文本小部件添加到边栏中,然后将简码复制并粘贴到其中:

自定义您的Facebook事件供稿在WordPress中的显示方式

您可能想要更改默认设置,以使您的Facebook事件在您的网站上看起来尽可能好。

使用自定义Facebook Feed Pro,您可以更改各种详细信息,包括事件中列出的信息以及事件的样式设置。

首先,请转到Facebook Feed»定制页面,然后单击“帖子类型”链接或向下滚动到页面的该部分。在那里,您将看到事件供稿的各种选项。

我们建议使用“事件页面”作为事件的来源。这样,它们将按事件发生的顺序显示,而不是您添加它们的时间显示。

如果需要,可以将事件偏移量更改为在事件开始后尽快停止显示。例如,您可以在事件开始1小时后删除事件,而不是默认的6小时:

进行更改后,请确保单击页面底部的“保存更改”按钮。

下一步是确定事件日历的布局。要选择此选项,请转到“ 自定义”»“后布局”,然后只需选择其中一个选项。我们将对事件使用半角显示。

如果向下滚动页面,将看到显示/隐藏各种详细信息的选项。您可以根据需要选择是否选中它们。

完成此页面上的更改后,请确保单击“保存更改”按钮。

您可能还想自定义事件帖子在您网站上的外观。为此,请转到Facebook Feed设置中的“ 自定义»样式文章”部分。

您可以在圆角的常规样式或盒装样式之间切换

选择样式后,您可以继续向下滚动页面以获取更多选项,例如文本颜色,大小和格式。

对设置满意后,请确保单击页面底部的“保存更改”按钮。


微信二维码

微信扫描二维码联系我们!
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等!


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
回到顶部