How to Add a Facebook Event Calendar in WordPress

Do you want to add a Facebook event calendar in WordPress?

Facebook is a great way to organize and promote live streams, meetups, conferences, and more. However, if you don’t post this information on your website, then some visitors may miss out on your events.

In this article, we will show you how to easily add a Facebook event calendar in WordPress.

Why Add a Facebook Events Calendar on Your Website?

A calendar makes it easy for people to learn about your upcoming webinars, virtual retreats, online sermons, coaching calls, and more.

Facebook has a built-in events calendar that you can use to promote both in-person and online events to your social media followers. However, people won’t see this schedule if they only visit your WordPress website.

With that in mind, it’s a good idea to add a Facebook calendar to WordPress so that more people can see your upcoming events. These people may even visit your Facebook page and mark themselves as interested in the event or start following you on Facebook.

You can add events to your website using a WordPress calendar plugin. However, adding each event manually can take a lot of time.

If you already use the Facebook events calendar, then it’s much easier to add a social media feed to your WordPress website. This feed will then automatically pull events from Facebook, saving you a ton of time and effort. It also means visitors will always see your latest events, which will keep your website fresh and interesting.

With that being said, let’s see how you can add a Facebook event calendar in WordPress.

How to Add a Facebook Event Plugin in WordPress

The easiest way to embed a Facebook event calendar in WordPress is by using the Custom Facebook Feed Pro plugin.

Smash Balloon is the best social media feed plugin on the market. It lets you easily display your Facebook page reviews, albums, videos, and more on your WordPress website.

In this guide, we will be using the Pro version of Smash Balloon, as it allows you to embed Facebook events.

However, if you are just starting out and have a limited budget, then there’s also a free version that allows you to embed Facebook status posts in WordPress.

First, you need to install and activate the Custom Facebook Feed Pro plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, head over to Facebook Feed » Settings and enter your license key into the ‘License Key’ field.

You will find this information under your account on the Smash Balloon website.

After entering the key, simply click on ‘Activate.’

Connect Your Facebook Page to WordPress

Smash Balloon Custom Facebook Feed allows you to embed events from your Facebook page. You can even display the events in a lightbox popup so that visitors can scroll through your entire schedule.

The first step is connecting your Facebook page to WordPress, so go to Facebook Feed » All Feeds and then click on the ‘Add New’ button.

On the next screen, you can see that Smash Balloon lets you embed Facebook videos in WordPress, show statuses, community posts, and more.

To add a Facebook event calendar in WordPress, select ‘Events’ and then click on ‘Next.’

Now, you need to select the Facebook page where you will get the event calendar from.

To do that, click on the ‘Add New’ button.

Due to the way that Facebook is set up, you will see a popup asking you to create an app and then enter a Page ID and Event Access Token. Let’s do this now.

In a new tab, go to the Facebook Developers page.

In the toolbar, click on ‘Log In’ and then enter the username and password for your personal Facebook account.

If this is your first time signing in to the Facebook Developer site, then click on ‘Get Started’ and then follow the onscreen instructions to create a free account.

Once you are logged into the Facebook Developers dashboard, go ahead and click on the ‘Create App’ button.

On the next screen, you will need to select your app’s main use case.

‘Set up Facebook login’ is useful if you want to add social login to WordPress. However, since you are adding an events calendar to WordPress, you will need to select ‘Other’ and then click on the ‘Next’ button.

Now, you will see all the different apps that you can create for your Facebook page.

To embed Facebook events, you will need to select ‘Business’ and then click on ‘Next.’

On the next screen, give your app a name. This is just for your reference, so you can use anything you want.

Here, you can also type in your email address and add an optional Business Account. When you are happy with the information you have entered, just click on ‘Create app.’

After a few moments, you will see the dashboard for your new Facebook app.

In the left-hand menu, click on ‘Settings’ and then select ‘Basic.’

The dashboard shows the App ID by default.

To see the App Secret, click on the ‘Show’ button.

In a new tab, head over to the official Smash Balloon documentation. Now, find step 13 and copy the App ID and App Secret into the fields.

In another new tab, head over to the Facebook Graph API Explorer. In the ‘Meta App’ dropdown, select the Facebook app we created earlier and then click on ‘Add a Permission.’

In the dropdown menu that appears, you need to click on ‘Events Groups Pages.’ Then, select all of the following permissions: page_events, pages_read_engagement, pages_read_user_content.

After adding these permissions, click on ‘Generate Access Token.’

In the popup that appears, check the box next to the Facebook page where you want to get events from.

Then, click on the ‘Next’ button.

Now, Facebook will show all the information that Smash Balloon will have access to and the actions it can perform.

To restrict Smash Balloon’s access to your Facebook page, simply click to disable any of the switches. Just be aware that this may affect the events that you can embed on your WordPress blog or website, so we recommend leaving all the switches enabled.

When you are happy with how the permissions are set up, click on ‘Done.’

After a few moments, you should see a message confirming that you have connected your WordPress website to Facebook. With that done, you are ready to click on ‘OK.’

Back in the Graph API Explorer dashboard, you will see a temporary access token, which is valid for around 1 hour.

To turn this into a permanent access token, switch back to the Smash Balloon documentation and scroll to step 23. You can now paste the temporary token into this field and click on ‘Extend my token.’

Smash Balloon will now create a permanent page access token.

Copy this value and switch back to your WordPress dashboard. You can now paste the token into the ‘Event Access Token’ field.

Finally, we need the ID of your Facebook page.

You can simply visit your page in a new tab and take a look at the address bar. The page ID is the value after id=. For example, in the following image, the page ID is 10006740374000.

Copy this value and then switch back to the WordPress dashboard.

You can now paste the ID into the ‘Facebook Page ID’ field and then click on ‘Add Source.’

On the next screen, choose the template that you want to use for the event calendar.

All of Smash Balloon’s templates are fully customizable, so you can fine-tune the design depending on how you want to display your custom Facebook feed in WordPress.

We are using the ‘Default’ template, but you can use any template you want. After making your selection, click on ‘Next.’

Smash Balloon will now create a feed based on your Facebook page and template. This is a good start, but you may want to fine-tune how the events appear on your site.

How to Customize Your Embedded Facebook Events Calendar

After creating your feed, you will be taken to the Smash Balloon editor automatically.

On the right-hand side, you will see a preview of your Facebook events calendar. On the left-hand side, you will see all the different settings you can use to customize how the events appear on your site.

Most of these settings are self-explanatory, but we will quickly cover some key areas.

If you want to change the template you are using, just click on ‘Template.’ Then, press the ‘Change’ button to choose a new template.

When you are finished with these settings, you can click on the ‘Customize’ link to return to the main Smash Balloon editor.

Next, we want to look at the ‘Feed Layout’ settings.

On this screen, you can switch between masonry and list layouts and change the feed height.

As you make changes, the preview will update automatically, so you can try different settings until you are happy with how the Facebook event calendar looks.

By default, Smash Balloon will show a different number of Facebook events on desktop computers and mobile devices.

You can preview how your event calendar will look on desktop computers, tablets, and smartphones using the row of buttons in the upper-right corner.

After testing the mobile version of your website, you may want to change how many events you show on smartphones and tablets so that all the content fits comfortably on the screen.

To make this change, simply find the ‘Number of Posts’ section and type a different number into the ‘Mobile’ field.

Another option is showing fewer columns on smartphones and tablets by changing the ‘Columns’ settings.

For example, we are showing 3 columns on desktop, 2 columns on tablets, and 1 column on mobile devices.

When you are happy with how the calendar looks on all devices, click on ‘Customize’ to return to the main editor screen.

Here, click on the next settings option, which is ‘Color Scheme.’

By default, Smash Balloon uses the same color scheme as your WordPress theme for the event calendar.

If you don’t like how this looks, then you can switch to a ‘Light’ or ‘Dark’ color scheme.

Another option is to design your own color scheme by selecting ‘Custom.’

You can use the controls to change the link color, background color, and change the text color in WordPress, and more.

By default, Smash Balloon adds a header above your event calendar. This lets visitors know that the events are related to your Facebook page or business and also encourages them to visit your Facebook page.

To customize the header section, click on ‘Header’ in the left-hand menu. To start, you can switch between the visual and text header styles.

If you are using the ‘Visual’ style, then you can also use the controls to change the header size, hide the cover photo, change the background color, and more.

If you are using a ‘Text’ style, then you can customize the text that’s shown in the header.

You can also change the font size, color, and more.

If you want to create a more simple event calendar, then you can always remove the header by clicking to turn off the ‘Enable’ toggle.

Once you have done that, you can change how the individual events look inside your calendar by selecting ‘Post Style’ from the left-hand menu.

Next, click on ‘Post Style’ again.

On this screen, you can choose between a regular and a boxed layout for your calendar.

If you select ‘Boxed,’ then you can create a colored background for each event. You can also make the border radius larger to create curved corners and add a box shadow.

If you choose ‘Regular,’ then you can change the thickness and color of the line that separates your different events.

In the following image, we have added a thicker line to the calendar and changed its color.

You can also customize the individual parts within each event by going back to the main settings screen.

Once again, select ‘Post Style,’ but this time choose ‘Edit Individual Elements’ instead.

You will now see all the different content that Smash Balloon shows for each event, such as its title, date, and event details.

To hide a piece of content, simply click to uncheck its box.

You can also change how an element looks by clicking on its name.

The options you can see on the next screen will vary. However, you can typically change the size of the text and the text color.

By default, Smash Balloon adds a Facebook like button underneath your event calendar, which allows visitors to follow your Facebook page or share it with other people.

This feature can get you more followers and social shares, so it’s worth clicking on ‘Like Box’ to see what changes you can make.

To start, you can change whether the box appears above or below your events calendar using the ‘Position’ dropdown.

You can also change the box’s size or width, or add your page’s cover photo.

A big follower count is great social proof that will encourage more people to follow you on social media and attend your events. With that in mind, you may want to click to enable the ‘Show fans’ switch.

If you prefer to remove the ‘like’ box, then simply click on the ‘Enable’ switch to turn it from blue to grey.

When you are happy with how the ‘Like’ button is set up, you can move on to the ‘Load More Button’ settings.

The ‘Load More’ button gives visitors an easy way to scroll through all your events. With that in mind, you may want to make this button stand out from the rest of your site by changing its background color, hover state, and text color.

The button shows ‘Load More’ by default, but you can replace this with your own messaging by typing into the ‘Text’ field.

For example, you may want to use something like ‘See More Events’ or ‘Explore our calendar.’

Smash Balloon has a lightbox feature that allows visitors to see your events in a popup.

Visitors can simply click an event’s image to open the lightbox popup.

Visitors can then scroll through all your events using the arrows, similar to embedding a Facebook album in WordPress.

To customize the default lightbox, simply select ‘Lightbox’ from the left-hand menu.

Here, you can change the color of the lightbox’s text, links, and background colors.

The lightbox popup makes it easy for visitors to explore your calendar, but it also allows people to scroll through all your events without visiting your Facebook group.

If you want to encourage people to visit your Facebook page, then you may want to disable the lightbox feature by clicking the ‘Enable’ toggle so that it turns from blue to grey.

If you do disable the lightbox feature, then clicking on an event will open your Facebook page in a new tab.

When you are happy with how the Facebook event calendar looks, don’t forget to click on ‘Save’ to store your changes. You are now ready to add this feed to your WordPress website.

How to Embed Your Facebook Event Calendar in WordPress

You can add the Facebook event calendar to your WordPress website using a block, widget, or shortcode.

If you have created more than one event calendar or feed using Smash Balloon, then you will need to know the calendar’s code if you’re going to use a block or widget.

To get this information, go to Facebook Feed » All Feeds and then copy the text under ‘Shortcode.’ In the following image, we will need to use custom-facebook-feed feed=16.

If you want to show your Facebook events calendar on a page or post, then you can use the ‘Custom Facebook Feed’ block.

Simply open the page or post where you want to embed the Facebook calendar. Then, click on the ‘+’ icon to add a new block and start typing ‘Custom Facebook Feed.’

When the Facebook block appears, click to add it to your page or post.

The Facebook block will show one of your Smash Balloon feeds by default. If this isn’t your Facebook event calendar, then find the ‘Shortcode Settings’ section in the right-hand menu.

You can now go ahead and add the custom-facebook-feed feed=16 code, then click on ‘Apply Changes.’

After that, be sure to publish or update the page to make the calendar live on your website.

Another option is to add the feed to any widget-ready area, such as the sidebar or similar section. This allows visitors to see your events no matter where they are on your website, which is great for promoting your events.

To get started, simply go to Appearance » Widgets in the WordPress dashboard and then click on the blue ‘+’ button.

Now, start typing ‘Custom Facebook Feed’ into the search bar.

When the widget appears, drag it to where you want to show the Facebook calendar.

The widget will automatically show one of the feeds you created using Smash Balloon.

If this isn’t your Facebook events calendar, then type the calendar’s code into the ‘Shortcode Settings’ box. Then, click on ‘Apply Changes.’

You can now click on the ‘Update’ button to make the widget live. For more information, see our complete guide on how to add and use widgets in WordPress.

Another option is adding the Facebook event calendar on any page, post, or widget-ready area using a shortcode.

Simply go to Facebook Feed » All Feeds and copy all the code in the ‘Shortcode’ column. You can now add this code to any shortcode block. For more information, please see our detailed guide on how to add a shortcode in WordPress.

Finally, if you have a block-enabled theme, then you can use the full-site editor to add the ‘Custom Facebook Feed’ block anywhere on your site.

In the WordPress dashboard, head over to Appearance » Editor.

By default, the full-site editor will show your theme’s home template.

If you want to add the event calendar to a different template, then go ahead and click on ‘Templates’ in the left-hand menu.

The editor will now show a list of all the templates that make up your WordPress theme.

Simply go ahead and click on the template you want to edit.

WordPress will now show a preview of the template.

If you’re happy to add the Facebook events calendar to this part of your site, then click on the pencil icon.

After choosing your template, hover your mouse over the area where you want to add the events calendar.

Then, click on the blue ‘+’ when it appears.

Once you have done that, start typing ‘Custom Facebook Feed.’

When the right block appears, click to add it to your template.

As always, Smash Balloon will show a feed by default. If this isn’t your event calendar, then you can add the calendar’s code following the same process described above.

We hope this article helped you learn how to add a Facebook event calendar in WordPress. You may also want to see our expert picks for the best Facebook plugins for your blog or learn how to create an email newsletter the right way.

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.