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

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.

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

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.

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.

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.

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

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

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:

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.

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.

First, go to the Page Plugin tool and enter your Facebook page’s 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.

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.

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

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

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

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.

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.

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.

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.

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

Connecting Your Facebook Account with 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.

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

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.

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.

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.

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

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.

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:

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

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:

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:

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 will then bring up a final screen.

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.

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.

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.

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

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.

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

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.

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

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

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:

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

Setting Up Your Facebook Events Calendar 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.

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.

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.

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

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

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:

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

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:

Customizing How Your Facebook Events Feed Displays in WordPress

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

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.

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.

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:

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.

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.

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.