How to Add a Facebook Event Calendar in WordPress

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.

Adding a Facebook event calendar in WordPress

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:

The events calendar shown live on the website

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.

The Facebook for Developers page plugin tool

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.

Click the Get Code button to get the code for your events feed

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

Copy the code from the iFrame tab of the popup box

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.

Add an HTML block to your WordPress page

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

Copying the iFrame code into an HTML block on your site

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.

The Facebook Events feed produced from Facebook's code

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.

Connect your Facebook account to the Facebook Feed Pro plugin

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.

Add new Facebook app

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

Click to create a new app

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

Choose the'Everything Else' option at the bottom of the list

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

Give your app a name

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

Your dashboard on the Facebook for Developers site

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.

Faccebook app ID and secret keys

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:

Enter your Facebook App ID and App Secret into the appropriate boxes

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

Generating your access token using the Facebook Graph API explorer

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:

Generating your access token

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

Click to continue when the popup appears

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:

Add the correct permission to your Facebook app

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

The correct permission has now been added to the Facebook app

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:

Click the continue 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.

Select the page that you want to use for your events feed

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.

Click the Done button to continue

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.

Click the Get Access Token button again

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:

Copy your page access token

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:

Click the button to manually connect your Smash Balloon account to your Facebook events feed

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

Select Page from the dropdown

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.

Enter your page name, page ID, and access token

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

The list of your connected accounts, in Facebook Feed Pro

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

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:

Your Facebook page details should now have been entered into the top boxes on this page

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.

Click Customize then General in the Facebook Feed Pro settings

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.

The list of post types for Facebook Feed Pro

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.

Adding the Facebook feed block to a page

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.

The events calendar shown live on the website

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:

Adding the Custom Facebook Feed shortcode in the classic WordPress editor

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:

Adding a custom Facebook feed to a widget

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.

Click the Post Types link or scroll down to that section

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:

Changing the event feed options

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.

Select how you want your Facebook events to display on your site

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.

Decide what options you want to show/hide in the posts within your events feed

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
Choosing the style for the events posts in your custom Facebook feed

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

Changing the settings for the titles of your events

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.