SeedProd Logo

Latest SeedProd News

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Embed Facebook Events on WordPress

How to Embed Facebook Events on WordPress 

Are you looking for an easy way to embed Facebook events on WordPress?

Facebook events are an excellent way to organize business events with built-in social media features. Yet, website visitors can easily miss your events if you don’t add them to your website.

So in this article, we’ll show you how to embed Facebook events on your WordPress site to improve their reach and engagement.

Why Embed Facebook Events on Your Website?

Adding a Facebook events calendar to your WordPress site provides users with an easy way to learn about your upcoming events. At the same time, users can register their interest and share the event with their friends.

What’s more, showing events from Facebook on your website is an excellent way to build engagement and grow your Facebook followers. And since it pulls your events from Facebook automatically, it also saves tons of time.

For example, you won’t have to add events to your website manually. Instead, you can use a WordPress Facebook plugin to show them on your site automatically.

How to Embed Facebook Events on WordPress

In this tutorial, we’ll share 3 ways to add Facebook events on WordPress.

The first method involves adding some code to your website. While it’s easy enough for users who don’t want to use a Facebook plugin, it lacks customization options to make your events calendar look good.

We’ll use a Facebook Feed plugin to display events anywhere on your website in the second method. And because it has tons of customization options, you have complete control over how Facebook events look.

Lastly, the third method shows you how to add Facebook events to a dedicated WordPress landing page. This is an excellent way to remove distractions and encourage visitors to register for your event.

With that in mind, let’s jump right into method 1.

Method 1. Add Facebook Events to Your Site Without a Plugin

If you’re not a fan of using too many WordPress plugins on your website, you can embed Facebook events on WordPress without a plugin.

Yet this method requires you to add some code to your site, so it’s not something we recommend for beginners. It also doesn’t offer much control over how your events look.

1. Visit the Facebook Page Plugin website.

To get started with this method, you’ll need the Facebook Page Plugin. This isn’t a WordPress plugin but a standalone tool by Facebook for developers.

So head to Facebook Plugin tool and paste your Facebook page URL.

Visit the facebook page plugin tool

After entering your Facebook page URL, the tool will show a preview of your timeline. Since we want to show your Facebook events, delete the word “timeline” in the Tabs field and enter “events.”

enter "events" tab field

2. Generate Your Facebook Event Embed Code

Now you will see a list of your page’s events in the preview panel, so click the Get Code button below the preview.

Click the Get Code button

Clicking the Get Code button opens a lightbox popup with 2 tabs: JavaScript SDK and IFrame. Click the IFrame tab, then copy the embed code to your clipboard.

Copy the Facebook events IFrame embed code

3. Embed the Facebook Events Code in WordPress

Next, head to your WordPress website and edit the post or page where you want to show your Facebook Events.

On the post or page edit screen, click the plus (+) icon and find the Custom HTML WordPress block.

Add the custom HTML WordPress block

Now, click inside the HTML block and paste the embed code from the Facebook Page Plugin tool.

Paste the Facebook Page Events embed code

You can then save or publish the post, and when you preview it, you’ll see your Facebook Events live on your website.

Example of emebed Facebook events on WordPress without a plugin

If you want to change how this feed displays, you’ll need to return to the Facebook Page Plugin and generate the wp embed Facebook code again. That said, there are limited Facebook settings you can change.

But if you’d like more control over how your Facebook Event feeds look, we suggest trying the following method where we use the Custom Facebook Feed Pro plugin.

Method 2. Embed Facebook Events with Facebook Feed Pro Plugin

smash balloon facebook feed pro

You’ll need to install and activate the Smash Balloon Custom Facebook Feed Pro plugin for this method. For help with this step, check out this step-by-step guide on how to install a WordPress plugin.

1. Create a New Facebook Feed

After installing and activating the plugin, go to the Facebook Feed » All Feeds menu from your WordPress dashboard. From there, click the Add New button to start creating your event feed.

Add a new facebook feed

On the following page, you’ll see 9 different types of Facebook feed you can add to your website, including:

  • Timeline
  • Photos
  • Videos
  • Albums
  • Events
  • Reviews
  • And more

Choose the Events option and click the Next button to continue.

Select the event feed type

2. Select a Facebook Page Source

After selecting a feed type, it’s time to choose a Facebook page source. This can be a Facebook group or a page where you post your business’s events.

To add a source, click the Add New button.

Add a new source for your event feed

This opens a popup asking for your Facebook Page ID and Event Access Token.

Follow these instructions to find the app ID and app secret token for your page if you’re unsure how to do this.

Enter you facebook page ID and access token

After entering your Facebook app details, click the Add Source button.

On the next screen, you’ll see your newly added Facebook page. Just select that page and click Next to continue.

Select your facebook page events source

3. Customize Your Facebook Events Calendar Layout

Now you can start customizing your Facebook Events calendar. The customization options are on the left-hand side, while a preview of your feed is on the right.

The customization options allow you to change the feed type, layout, color, header design, post design, and more.

First, choose the Feed Layout option on the left.

Choose a facebook events layout

This option offers 3 different settings, including List, Masonry, and Carousel layouts.

To show events one after the other, choose the List layout option.

List layout for facebook events calendar

Or, if you prefer to show your events in a multi-column layout, you can select the Masonry option.

Masonry feed layout for facebook events

And lastly, there’s the Carousel option that allows you to show your events in a stunning image slider.

Carousel layout for facebook events

Go ahead and select a layout that best suits your website. Then, click the Customize button once more to return to the previous settings.

4. Customize Your Facebook Events Feed Color Scheme

If you’d like to change the color of your Facebook events feed, click the Color Scheme heading. In this panel, you can choose from 4 different color options, such as:

  • 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
Select a color scheme for your Facebook events feed

After, you can customize other settings, including the header design, feed size, margins, and more.

When you’re happy with how everything looks, click the Save button.

5. Embed Facebook Events in WordPress Pages

Now you’re ready to embed your Facebook Events on your WordPress website, and Smash Balloon allows you to do this in 2 ways.

First, click the Embed button in the top-right corner. This opens a popup with different publishing options.

Click on the embed facebook event feed button

Click the Add to a Page button to embed your Facebook Events in a regular WordPress page.

Click the add to a page button

From there, you can choose any page on your website from the list and click the Add button.

Choose a page for your events calendar

Clicking that option takes you to the editing screen for your chosen page. From there, click the plus icon (+) and select the Custom Facebook Feed widget to add your Facebook events calendar.

Add the custom facebook feed block

When you update or publish the page, you can preview it to see how your events calendar looks.

Preview your facebook events calendar

6. Embed Facebook Events in WordPress Sidebars

If you prefer to add your Events feed to a sidebar area, simply click the Add to a Widget button in the Embed window.

Add your facebook events calendar as a widget

Clicking that option sends you to the widgets page, where you can choose a sidebar to display your events.

After choosing a sidebar, click the plus icon (+) to add a new widget and choose the Custom Facebook Feed widget.

Choose the custom facebook feed pro widget

Once you’ve done that, you can preview your website and see your Facebook Events in your website’s sidebar area.

Preview your facebook events calendar in the sidebar

Now that we’ve shown you how to Embed Facebook events manually and with a WordPress plugin, there’s one more method we want to share.

And that’s embedding Facebook events to landing pages with SeedProd’s page builder plugin.

Method 3. Embed Facebook Events on WordPress with SeedProd

SeedProd best WordPress landing page plugin

SeedProd is the best drag-and-drop WordPress page builder, with coming soon and maintenance mode functionality. You can use this plugin to create high-converting landing pages without writing code or hiring a developer.

Not only can you use hundreds of templates right out of the box, but it also includes tons of content blocks designed to generate leads for your business.

Most notably are the Facebook blocks, which include:

  • Facebook Like
  • Facebook Comments
  • Facebook Page
  • Facebook Embed

We’ll use the Facebook Page block to embed Facebook events right on your landing page for this method. And the best part, there are no access tokens or IDs to copy and paste.

1. Install and Activate SeedProd

To get started, install and activate the SeedProd plugin. For this guide, we’ll use SeedProd Pro because it has the advanced Facebook blocks we need.

2. Create a WordPress Landing Page

After installing SeedProd on your WordPress site, you’ll need to create a new landing page.

Luckily, you can follow this step-by-step guide on creating a landing page in WordPress to get started quickly.

Or, if you’re most interested in a page dedicated to Facebook, follow this tutorial on how to create a Facebook landing page.

Once your landing page design is in place, navigate to SeedProd » Pages and click Edit on the landing page you made by following our tutorial.

Edit your seedprod landing page

This will open the SeedProd visual editor, where you can add your Facebook events.

3. Add the Facebook Page Block

Next, find a space on your page where you’d like to display your Facebook Events calendar. Then, go to the Advanced blocks section on the right and find the Facebook Page block.

Add SeedProd's Facebook page block

To add this block to your page, simply drag it from the left and drop it onto your preview.

Then in Facebook Page block content settings, you can add your Facebook Page URL.

Enter your facebook page URL

By default, SeedProd displays your Facebook page timeline automatically. To show your events instead, click the Events option under the Tabs heading.

Choose the facebook events tabs option

You can also change the header style in the same panel, show or hide your cover photo, adjust the alignment, and more.

And if you want to increase your Facebook page engagement more, you can use the Facebook Embed block to embed a post, video, or comment right alongside your events schedule.

4. Publish Your Landing Page with Facebook Events Calendar

All that’s left to do is click the dropdown arrow next to the Save button in the top-right corner and click Publish.

Publish your facebook events landing page

Then when you click Preview, you’ll see your events calendar live on your landing page.

Example of a facebook events calendar on WordPress landing page

There you have it!

With the help of this post, you now know 3 different ways to embed Facebook Events on WordPress.

You might also like this post on how to run Google Optimize A/B split testing to improve your website results.

Thanks for reading. Please follow us on YouTube, Twitter, and Facebook for more helpful content to grow your business.

Get SeedProd

Join Our Newsletter

Subscribers to get Free WordPress Tips and Resources

We do not sell or share your information with anyone.

Let's Connect

Most Popular

Copyright © 2022 SeedProd LLC. SeedProd is a trademark of SeedProd, LLC

PayPal Verified Badge
WPBeginner Verified Badge