wordpress添加媒体_如何在WordPress中添加Facebook活动日历

wordpress添加媒体

Recently, a reader asked us how to add a Facebook event calendar to their WordPress site?

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

Facebook Events are an easy way for communities to organize events with built-in social features. However, your website visitors may miss those events if you don’t promote them on your website as well.

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

In this article, we’ll show you how to add a Facebook event calendar in WordPress to maximize your reach.

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

为什么要在您的网站上添加Facebook活动日历？ (Why Add a Facebook Events Calendar on Your Website?)

Adding a Facebook Events calendar to your website lets visitors easily find out about your upcoming events. Your users can mark themselves as interested or going to the event on Facebook.

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

This is a great way to get more Facebook followers and build engagement. It also saves you time and effort since it automatically pulls events from Facebook.

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

You will not need to manually add events to your website using a WordPress calendar plugin. You can simply create Facebook events instead and automatically show them on your site.

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

Note: You will need a Facebook page, not a personal profile. This page will need at least 1 event.

注意：您将需要一个Facebook页面，而不是个人资料。 此页面至少需要1个活动。

In this tutorial, we’ll take you through two ways to add a Facebook events calendar to your WordPress site.

在本教程中，我们将为您介绍两种将Facebook事件日历添加到WordPress网站的方法 。

The first method requires entering some code on your website, and it’s easy enough for those users who don’t want to use a plugin. However it does not offer any customization options.

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

The second method is the one we recommend for users who want to customize the event calendar display and have more fine-tuned control over what’s displayed. Here’s an example of custom Facebook events calendar display that we made:

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

方法1.在没有插件的情况下将Facebook事件添加到您的站点 (Method 1. Add Facebook Events to Your Site Without a Plugin)

What if you don’t want to use a plugin at all? It’s possible to add Facebook events to a WordPress site without using a plugin.

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

This method involves adding some code to your site. We don’t recommend it if you’re a beginner. It also doesn’t give you all that much control over how your events display.

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

To use this method, you will need to use a Facebook tool designed for developers. It’s called the Facebook Page Plugin. Don’t let the name confuse you. It’s not a WordPress plugin.

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

First, go to the Page Plugin tool and enter your Facebook page’s URL.

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

Facebook will now show a preview of your page’s feed. Next, you need to delete the word ‘timeline’ under Tabs field and add ‘events’ instead. You can also set the width and height of the events feed here.

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

Now, you’ll see your events listed in the preview box. Simply click on the ‘Get Code’ button below the preview.

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

This will bring up a popup where you need to switch to the iFrame tab and copy the embed code.

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

Next, go to your WordPress website’s admin area and edit the post or page where you want to display the Facebook events.

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

On the post edit screen, click on the (+) icon to add a new block and then find the HTML block in the Formatting blocks.

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

Next, you need to do is paste the code from the Facebook Page Plugin tool into this block:

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

After that, you can save your post or publish it. You can now visit this post or page to see your Facebook events feed in action.

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

To make changes to how this displays, you will need to return to the Facebook Page Plugin tool and create the code again. There are only a few settings you can alter, however.

要更改其显示方式，您将需要返回Facebook Page Plugin工具并再次创建代码。 但是，只有少数设置可以更改。

If you want to customize how your events are displayed and have more fine control over the options, then we recommend using the WordPress plugin Custom Facebook Feed Pro that we will cover in the next method.

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

方法2.使用自定义Facebook Feed Pro插件 (Method 2. Using the Custom Facebook Feed Pro Plugin)

For this tutorial, you will need to install and activate the Smash Balloon Custom Facebook Feed Pro plugin. For more details, see our step by step guide on how to install a WordPress plugin.

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

After you’ve installed the plugin, you will need to connect it to your Facebook account.

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

Connecting Your Facebook Account with Smash Balloon

将您的Facebook帐户与Smash Balloon连接

Normally with Smash Balloon, you can connect your account automatically. To do this, you just need to go to Facebook Feed » Settings, then click the ‘Connect a Facebook account’ button.

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

However, due to recent Facebook API changes, this method doesn’t currently work for showing events on your site.

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

You will need to manually generate a Facebook Access Token in order to display events. This involves a few different steps, but luckily Smash Balloon has some tools to make it as easy as possible.

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

First, you’ll need to go to the Facebook for Developers site and sign up for a developer’s account using your usual Facebook login details.

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

If you already have a developer’s account, simply click the ‘My Apps’ link on the top right and then click on the Add a New App button.

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

If you have never created an app before, then simply click on the ‘Create App’ button to continue.

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

This will bring up a popup window where you need to click on the ‘For Everything Else’ option:

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

Next, you’ll need to type in a display name for your app and then click on the ‘Create App ID’ button.

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

You may be prompted to enter your Facebook password and complete a Captcha. After that, you’ll see your apps dashboard:

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

On the left-hand side of your dashboard, you need to click Settings » Basic.

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

Now, simply click the ‘Show’ button next to ‘App Secret’. You may be prompted to enter your Facebook password again when you do so.

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

All you need to do for this step is copy the App ID and App Secret into the boxes in Step 13 on this Smash Balloon page:

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

We’re now going to create the access token. First, you need to go to the Facebook Graph API explorer page.

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

On the right hand side, make sure the name of your app is selected in the ‘Facebook App’ dropdown. Then, go ahead and click the ‘Generate Access Token’ button:

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

This will bring up a popup window where you simply need to click the ‘Continue As’ button to keep going.

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

The next step here is to add a special permission to your access token. To do this, all you need to do is copy and paste pages_read_user_content into the ‘Add Permission’ line and then click on it when it appears in a small popup, like this:

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

Once you’ve added that permission, it should look like this:

添加该权限后，它应如下所示：

You’ll now need to click the Generate Access Token button again. Now, you’ll see a popup like this. Simply click the ‘Continue As…’ button:

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

Facebook will then ask you to choose the page you want to use. Select the page that you want to display events from. It’s important to only pick 1 page here. After checking the box next to your chosen page, click the ‘Next’ button.

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

Facebook will then bring up a final screen.

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

Here, all you need to do is click ‘Done’. The Facebook message about submitting your app for review doesn’t apply to you, as the app will simply stay in development mode.

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

Next, you just need to click the ‘Get Access Token’ button for the final time. Now, Facebook will provide you with a temporary access token.

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

This token can only be used to make your first API call. This is why you need to use Smash Ballon’s documentation page to make that API call and get an extended token.

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

Simply copy and paste it into the box at step 23 on this page.

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

After copying it into the box, click on the ‘Extend my token’ button. You’ll then see your extended token in a large box:

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

Keep this open in a separate tab, or copy and paste it somewhere safe, as you’ll need it in a moment.

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

Now that we have all the information we need, let’s connect your WordPress blog to Facebook.

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

Simply go to the Facebook Feed » Settings in your WordPress dashboard and click on the ‘Manually connect account’ button:

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

You’ll see a dropdown list, where you just need to select the ‘Page’ option:

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

Next, enter your page name, page ID (the last part of your Facebook page’s URL) and the extended access token that you created earlier. Then, go ahead and click the ‘Connect Account’ button.

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

After doing so, you’ll see the connected page listed in your Custom Facebook Feed Pro settings:

完成此操作后，您将在“自定义Facebook Feed Pro”设置中看到列出的连接页面：

The last step here is to click the ‘Make Primary Feed’ button:

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

Once you’ve done that, you’ll see that the Facebook ID and Facebook Access Token above this on the screen have now been filled in:

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

Don’t forget to click the Save Settings button after doing this.

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

Setting Up Your Facebook Events Calendar Feed

设置您的Facebook活动日历Feed

Next, we’re going to set up the Facebook feed so that it only shows events, not all posts. To do this, you will need to go to the Customize » General page.

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

Here, you need to scroll down the page to the Post Types section. When you reach that section, you need to uncheck all the boxes except for Events.

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

You can now add your Events feed to any post or page on your site. You can even add it to your sidebar or footer using a widget.

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

We’re going to create a page for our Facebook events. Go to Pages » Add New to make a new page.

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

On the post edit screen, click on the (+) icon to add a new block. Find the Custom Facebook Feed block in the Widgets section, or search for it using the search bar.

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

You will then see your Facebook events feed within the block editor. You can preview your page to see it live on your site.

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

Note: We’ve added some extra styling to our events feed. We’ll explain how to do that in a moment.

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

If you’re using the classic editor, then you can add your feed to your page using the shortcode [custom-facebook-feed]. Simply enter that wherever you want the events to appear on the page:

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

You can also use that shortcode to add your Facebook Feed in your sidebar or any other widget-enabled area.

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

To do this, go to Appearance » Widgets in your WordPress dashboard. Simply add a text widget to your sidebar and copy and paste the shortcode into it:

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

Customizing How Your Facebook Events Feed Displays in WordPress

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

You may want to change the default settings to make your Facebook Events look as good as possible on your website.

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

Using Custom Facebook Feed Pro, you can change all sorts of details, including the information listed with your event and the way in which the events are styled.

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

To get started, go to the Facebook Feed » Customize page and click on the ‘Post Types’ link or scroll down to that section of the page. There, you will see various options for your events feed.

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

We recommend using the ‘Events page’ as the source of your events. That way, they’ll appear in order of when the event will be, not in order of when you added them.

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

If you want, you can change the Event Offset to stop displaying events sooner after they begin. For instance, you could remove your events 1 hour after they start, instead of the default 6 hours:

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

Make sure you click the Save Changes button at the bottom of the page after making changes.

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

The next step is to decide on the layout for your events calendar. To choose this, go to Customize » Post Layout, and simply pick one of the options. We’re going to use the Half-width display for our events.

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

If you scroll down the page, you will see the options to show/hide various details. You can check or uncheck these however you like.

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

Make sure you click the Save Changes button once you’ve finished changing things on this page.

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

You may also want to customize how your events posts look on your site. To do this, go to Customize » Style Posts section in Facebook Feed settings.

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

You can switch between a regular or boxed style with rounded corners

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

Once you’ve picked a style, you can go ahead and scroll down the page for more options like text color, size, and format.

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

Once you’re happy with your settings, make sure you click the Save Changes button at the bottom of the page.

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

We hope this article helped you learn how to add a Facebook event calendar in WordPress. You may also want to see our complete social media cheat sheet for WordPress and our comparison of the best email marketing services to promote your events.

我们希望本文能帮助您学习如何在WordPress中添加Facebook事件日历。 您可能还想查看我们针对WordPress的完整社交媒体备忘单，以及我们对最佳电子邮件营销服务以促进您的活动的比较。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-display-facebook-events-on-your-wordpress-site/

wordpress添加媒体