How to Display Facebook Events Calendar on Your WordPress Website

Are you looking for easy ways to display a Facebook events calendar on your website?

Showing your Facebook page’s events calendar on your WordPress site is a great way to inform visitors about important dates, such as product launches or upcoming promotions.

But, embedding a Facebook events calendar on your website can be complicated.

In this article, we’ll show you how to display a Facebook events calendar in WordPress, step-by-step, using these methods:

• Display events with the Facebook page plugin widget
• Embed Facebook events with a WordPress plugin

To get started, let’s talk about why it’s important to embed a Facebook events calendar on your website.

Or, click here to skip to the easiest way to add a Facebook events page to your WordPress site.

Why Embed Facebook Events on Your Website?

The biggest reason to embed Facebook events on your website is to tell site visitors about upcoming events so they can join.

In fact, here are some other great reasons to embed Facebook events on your website.

• You can get your website visitors to follow your Facebook page by showing them interesting events.
• Adding relevant Facebook content on your site shows visitors that you’re actively engaging with your community.
• Displaying Facebook events on WordPress keeps people on your site for longer, which is better for your site’s SEO.
• You can boost Facebook page engagement and help your content appear higher up in the news feed, raising awareness and increasing traffic to your page.

Display Events With the Facebook Page Plugin Widget

The 1st method uses Facebook’s official developer tool for embedding aspects of your Facebook page on your website.

The downside is that this method involves copying and pasting code snippets to WordPress. Plus, you don’t have a dedicated support team who will help you.

If you don’t want to deal with coding, just try the other techniques in this article.

Step 1: Use the Facebook Page Plugin Code Generator Tool

The first step in adding a Facebook event calendar widget to your website is to visit the page plugin code generator tool here.

Next, enter your Facebook page URL, and in the Tabs field, delete “timeline” and enter “events” as you can see below:

A preview of your page’s events appears in the box below to give you an idea of how it will look live on your website.

Once you’ve entered your page details, click the Get Code button.

Step 2: Generate the Facebook Event Code

Along the top of the code box, you can choose JavaScript or iFrame.

For this example, select the iFrame option and copy all of the code in the box.

You might want to paste the code into a blank text file or notepad on your computer so you don’t lose it.

Step 3: Paste the Facebook Event Code on Your Website

The next step is to embed the Facebook event code on your website.

In WordPress, head to your admin area and decide where you’d like to display your Facebook events calendar.

We’ll add our calendar to a widget in our site’s sidebar for this tutorial.

To start, head to the Appearance » Widgets menu from your WordPress admin area.

Next, you can choose between the Sidebar or Footer for your new WordPress events calendar.

We’ll go with the sidebar for this tutorial.

After that, click on the plus (+) icon to add a new widget to your website.

Then, select the Custom HTML widget from the options.

Finally, paste your iFrame code from earlier into the new widget.

You’ll see your Facebook events displayed in your sidebar when you navigate to your main website.

In our example, we changed the iFrame code’s width in the Facebook page plugin so the widget fits our sidebar better.

Display Facebook Events with a WordPress Plugin [Best Way]

For the next method, we’ll use a Facebook feed plugin to display Facebook events on a website.

That way, you can let the plugin automatically fetch the events and add them to your website in a beautiful feed — no need to hire a Facebook developer or deal with coding!

And the bet option that you can use is the Facebook Feed Pro plugin.

As the best Facebook feed plugin for WordPress, it can help you seamlessly integrate your Facebook content with WordPress in just minutes.

Besides displaying Facebook events on your site, this Facebook feed WordPress plugin has the following features:

• Display multiple Facebook feed types on your site, including Facebook posts, photos, video feeds, and more.
• Control the information displayed in your feeds, such as headers, dates, descriptions, and more.
• Easily manage and display multiple Facebook account feeds on a single website.
• Completely customize your feed’s look and feel with layout templates like Facebook slider and styling options to match your website branding.
• Supports lots of feed types, so you can create an album feed, video feed, Facebook group feed, and much more.
• Display your feeds beautifully on mobile devices with the mobile-friendly design
• Show Facebook reviews on your website to establish social proof and increase sales for your business.
• And much more!

Even better, you can do all that without having to write a single line of code, making it super-easy for beginners to get started with.

Here’s our video tutorial that’ll show you the simplest way you can embed your Facebook events in WordPress.

Want a text guide instead? We’ll go through the step-by-step guide on embedding Facebook events below!

Step 1: Download and Install Facebook Feed Pro

Get your copy of Facebook Feed Pro and then install and activate the plugin to get started.

If you need help with that, just look at our step-by-step guide on how to install a WordPress plugin.

Step 2: Create Your Facebook Events Calendar

Once you’ve installed and activated the plugin on your site, go to the Facebook Feed » All Feeds menu from your dashboard. 

To start creating your Facebook events calendar, click on Add New.

After that, you can see that 9 different types of feeds are available here, including a timeline feed, photos feed, videos feed, events feed, Facebook group feed, reviews feed, and much more.

Just select Events from a list of options and then click the Next button to proceed.

Step 3: Connect to Your Facebook Page or Group

Once you’ve created your feed, you can choose the source for your events. That can be a Facebook page or a group where you’ve planned your events.

To do that, click on the Add New button.

You can now see a new pop-up where you’ll have to add your Facebook Page ID and Event Access Token.

We’ll show you how to get all 3 of these below.

To get your page, open your Facebook page and then click on the About tab at the top.

After that, click on the Page Transparency option, and you can find the Page ID on the right.

Now that you have your Page ID, remember to save it somewhere safe before you continue.

The next step is to get your Events Access Token.

In case you don’t have one yet, check out our step-by-step guide on how to create a Facebook Events Access Token.

To get the iCal URL, open your Facebook homepage and make sure you’ve logged in as your Facebook page.

Then, click on the Events option on the left to continue.

Now, click the Your Events option on the left to bring up the active events you’ve planned.

All you have to do now is copy the URL of the Add to calendar button on the top right.

Once you’ve done that, return to your website and enter your Page ID, Events Access Token, and iCal URL.

Finally, click on the Add Source button below.

Now that you’ve connected this source, you can freely reuse it for any of your future Facebook feeds if you like.

To proceed, you can just select the newly added source and click on Next.

Step 4: Customize Your Facebook Events Calendar

With that, you can move on and customize your events calendar. First, you can select a theme for your new Facebook feed.

You have 5 different Facebook themes to choose from:

• Default
• Modern
• Social Wall
• Outline
• Overlap

Just select the theme and click on Next to continue.

Next, the plugin will let you choose between 7 different feed templates. Each of these templates has a unique layout that you can import:

• Default
• Single Masonry
• Widget
• Large Grid
• Latest Album
• Showcase Carousel
• Simple Carousel

Just select your template and then click on the Next button.

You can now see a live preview of your feed on the right, and the customization options are on the left.

With these options, you can customize the feed type, layout, color, header design, post design, and a lot more.

First, select the Feed Layout option on the left.

For your events calendar, you have 3 different layouts: List, Masonry, and Carousel.

If you want your events to be listed one after another, you can go for the list layout.

To show your Facebook events in columns instead, you can try the masonry layout instead.

And there’s also a carousel layout where you can show events in a beautiful carousel slider.

After you’ve picked the feed layout, click on the Customize option at the top to go back to the previous customization options.

You can then pick the color scheme for your Facebook feed. To do that, select the Color Scheme option on the left.

Now, you can pick between 4 different options for your feed color.

• Inherit from Theme: Copy the color scheme of your website
• Light: Have a light background with dark-colored text
• Dark: Turn the background dark with light-colored text
• Custom: Enter all the colors yourself

Then you can customize other parts of your events calendar, like the header design, feed size, margins, and a lot more.

Once you’re happy with the design of your Facebook events calendar, click on the Save button.

You can then go to the final step where we show you how to embed Facebook events in a website’s page, sidebar, or footer.

Step 5: Display Your Facebook Events Calendar

After you’re done customizing, you can now display your Facebook events calendar on your website. Now, you can do it in 2 different ways just by clicking — no need to deal with any shortcode.

Embed Facebook Events Calendar on Your Pages

How can you embed Facebook events in WordPress? To post your Facebook events calendar on your WordPress page, first, click on the Embed button in the top right corner of your live editor.

You can see a new popup to let you choose where to post your Facebook events calendar. There, just click on the Add to a Page button to proceed.

After you do that, you can now pick from your list of pages. Just select the one where you want to post your Facebook events calendar and click on Add.

Now, the plugin will send you to the page you’ve just chosen.

On this page, click on the small plus icon (+) and select the Custom Facebook Feed widget in the dropdown menu to add your Facebook events calendar.

And you’ve now added your Facebook events calendar to your website! You can just check your website and see how it all looks.

Next, we’ll show you how to embed Facebook event feeds on your website’s sidebar or footer using this plugin.

Now let’s take a look at how you can dispay facebook events widget on your website.

Display Facebook Events Calendar on Your Sidebar or Footer

The second way is to embed Facebook events in your website’s widget-ready areas like the sidebar or footer

To get started, you’ll first have to open your feed in the live editor.

Go to the Facebook Feed menu from your WordPress dashboard, and you can see all of your Facebook feeds listed.

From that list, click on your Facebook events feed.

Now, you’ll be back in the live editor. Here, just click on the Embed button at the top.

Now, the plugin will show you a popup where you can choose the location of your Facebook events widget. You can just click on the Add to a Widget button to continue.

After you do that, the plugin will automatically send you to the widgets page. Here, you can add the Facebook calendar widget to your sidebar or footer.

From the list of all the options, just click on Sidebar.

To show your Facebook events calendar widget on your footer, you can click on the Footer option instead.

For now, we’ll post the Facebook events widget on the sidebar.

Once you click either the sidebar or the footer, you can see all the active widgets in a drop-down menu.

There, you can click on the plus icon (+) to add a new widget.

You can pick the Custom Facebook Feed widget from the options to display your Facebook calendar widget on your website sidebar.

And you’re done! Just go and check your website and see how your Facebook events calendar widget looks.

And that’s it!

We hope this article helped you learn how to display a Facebook events calendar on your website. Using Facebook Feed Pro, you can have an events calendar for your site in just a few clicks.

In just minutes, you can boost your Facebook events, get more followers, engage your website visitors, and a whole lot more.

Ready to embed your events calendar? Get started with Custom Facebook Feed Pro now!

Interested in more tips on Facebook marketing? You can check out our next article on how to get more likes on your Facebook page.

While you’re here, you can also see this post on how to embed your YouTube channel on Elementor.