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.