Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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.

How to 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.

A Facebook event calendar, created using Smash Balloon

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.

Adding a license key to your Smash Balloon social media plugin

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.

Creating an event calendar feed in WordPress

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.’

Creating an events timeline using Smash Balloon

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.

Getting events from a Facebook page or group

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.

How to create a new Facebook app

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.

Choosing a Facebook use case

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.’

Creating a business application in Facebook

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.’

Creating a Facebook application in the Developers console

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 application settings in the Facebook developers console

The dashboard shows the App ID by default.

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

The Facebook App ID and App Secret

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.’

Adding permissions to your Facebook app

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.’

Adding event permissions to a Facebook app

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.

Adding the events from a Facebook page

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.

Enabling event permissions for your Facebook calendar feed

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.’

Linking your WordPress website and Facebook page

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.’

Extending the Facebook access 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.

Adding an event token to your WordPress website

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.

Getting the Facebook page ID

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.’

Adding a Facebook access token to your WordPress website

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.’

Choosing a template for your Facebook events calendar

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.

The Smash Ballon Facebook event calendar editor

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.

How to change the event template for your Facebook calendar

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.

Smash Balloon's 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.

Changing the layout of an embedded Facebook events calendar

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.

How to create a mobile responsive Facebook events calendar in WordPress

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.

Customizing your Facebook calendar for smartphones

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.

Creating different layouts for desktops, tablets, and smartphones

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.’

How to change the color scheme of a Facebook events calendar

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.

Changing the event calendar color scheme with Smash Balloon

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.

Smash Balloon's color scheme settings

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.

Adding a custom header to a Facebook event calendar

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.

How to add a text header to a Facebook event feed

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.

Removing the header from your Facebook calendar

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.

Customizing the event style

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.

Adding a boxed layout to a custom Facebook feed

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.

Smash Balloon's regular event layout

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.

Customizing individual elements inside a Facebook event

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.

Removing content from your social media events feed

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.

Changing individual elements inside a social media feed

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.

How to add a Facebook like box to your WordPress website

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.

How to create a custom Facebook like box with Smash Balloon

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.

Smash Balloon's '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.’

How to add your own messaging to the social media 'Load More' button

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.

Smash Balloon's lightbox feature

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.

Creating a custom lightbox popup for your Facebook event calendar

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.

Smash Balloon's lightbox settings

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.

How to add a Facebook event calendar to your WordPress website

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.

Adding a custom Facebook feed block to your WordPress website

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.’

Adding an event calendar to your website using shortcode

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.

Adding a Facebook event calendar to a widget

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.

Adding the Custom Facebook Feed block to the widget editor

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.’

Adding an events calendar to a widget-ready area using shortcode

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.

Adding an event calendar using the WordPress full site 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 WordPress full site editor

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.

Editing a block-enabled WordPress theme

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.

Adding a Facebook events calendar to WordPress using the full site editor

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.

Adding a block to an FSE template

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

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

Adding the Custom Facebook Feed to a block 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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

8 CommentsLeave a Reply

  1. I’m trying method 1: Add Facebook Events to Your Site Without a Plugin but it does not work. I can get the preview correct but when I publish or view the page it’s not transferred there, don’t get any information about events or anything on the page. It’s blank. Is this method still correct?

    • Unless we hear otherwise, this method should still be working. Don’t forget to clear any caching on your site as a possible reason.

      Admin

  2. “Something went wrong. Your change may not have been saved. Please try again. ”

    Each time I try to edit the header.php file per the instructions, I get an error. Is this method still valid with all of the updates Facebook has made?

  3. I tried the method 1 and a weird gray square under the footer appeared on my website, the facebook events are not there.

  4. I found this very easy to follow. I’ve added many text widgets before. Do you have any idea why I can see it while I’m in WordPress (view my site) but not on my phone or any other computer? There’s not even a space for it in the sidebar. It’s simply not there. Again, I see it on my end and definitely saved it.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.