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’ll 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 you can let visitors know about your upcoming events and increase attendance.

An embedded Facebook calendar can also get you more engagement on social media.

After viewing the calendar on your site, visitors can then mark themselves as interested or going to the event on your Facebook page. They may even decide to start following you on social media too.

You can add events to your website using a WordPress calendar plugin. However, adding each event manually can take a lot of time, especially if you run lots of different events.

For that reason, we recommend embedding a Facebook events feed in your WordPress website. This saves you time and effort since the feed automatically pulls events from Facebook. 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’ll be using the Pro version of Smash Balloon, as it allows you to embed Facebook events. Smash Balloon Pro also lets you show photos in a custom Facebook feed and display the total number of likes, shares, comments, and more below each post.

However, if you’re 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, 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’ll 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 show the events in a lightbox popup so 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.

Since we want 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’ll get the event calendar from.

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

Due to the way Facebook is set up, you’ll 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’re logged into the Facebook Developers dashboard, go ahead and click on the ‘Create App’ button.

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

To embed Facebook events, you’ll 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’re happy with the information you’ve entered, click on ‘Create app.’

After a few moments, you’ll 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, 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’re happy with how the permissions are set up, click on ‘Done.’

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

Back in the Graph API Explorer dashboard, you’ll 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 show the events on your website.

We’re 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’ll be taken to the Smash Balloon editor automatically.

On the right-hand side, you’ll see a preview of your Facebook events calendar. On the left-hand side, you’ll 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’ll quickly cover some key areas.

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

When you’re finished with these settings, 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’re 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’re showing 3 columns on desktop, 2 columns on tablets, and 1 column on mobile devices.

When you’re 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 background color, change the link color, 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’re using the ‘Visual’ style, then you can also use the controls to change the size of the header text and its color, hide the cover photo, show your bio, and more.

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

You can also change the text 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’ve 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 border 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’ve added a thicker line to the calendar and changed the line’s 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’ll now see all the different content that Smash Balloon shows for each event, such as its title, date, and the 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 shows a ‘Like’ box 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 use these settings to change the box’s size or width, or add your page’s cover photo.

To encourage more people to follow you on Facebook, you may want to show how many people already like your Facebook page by clicking on the ‘Show fans’ switch.

The like box can help grow your social following, but if you prefer to remove it, then simply click on the ‘Enable’ switch to turn it from blue to grey.

When you’re 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.

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 it turns from blue to grey.

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

When you’re happy with how the Facebook event calendar looks, don’t forget to click on ‘Save’ to store your changes. You’re 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’ve created more than one event calendar or feed using Smash Balloon, then you’ll 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 look at the feed="" part of the shortcode. You’ll need to add this code to the block or widget, so make a note of it.

In the following image, we’ll need to use feed="9".

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 feed="" 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 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 the arrow next to ‘Home.’

You can then choose a template from the dropdown menu, like the footer template, for example.

Another option is to click on ‘Browse all templates.’

You will now see a list of all the templates you can edit. Simply click on the template where you want to add your Facebook events calendar.

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’ve 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 pick of the best Facebook plugins for your blog, or 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.