display facebook events on website

How to Display a Facebook Events Calendar on Your Website

Are you looking for easy ways to display business events on your website? Showing your Facebook page’s events calendar on your site is an effective way to inform visitors about important dates such as trade shows or upcoming promotions.

But embedding a Facebook events page on your website involves several steps that can be confusing for beginners.

So in this article, we show you how to display a Facebook Events calendar in WordPress, step-by-step, using a few different methods which are as follows:

  1. Display Events With the Facebook Page Plugin Widget
  2. Display Facebook Events with a WordPress Plugin

Why Embed Facebook Events on Your Website?

There are several reasons why your business might want an events calendar displayed on your website. The most obvious is to tell site visitors about upcoming events so they can join in. More importantly, if your visitors aren’t already aware of your Facebook page, showing your page’s events encourages them to like your page for further updates.

Here are a few more reasons for embedding Facebook events in WordPress:

  • You can promote your events to a relevant audience outside your Facebook community to increase attendance.
  • It encourages visitors to engage with and explore your Facebook page leading to more potential followers.
  • Increased Facebook page engagement helps your content appear higher up in the news feed, raising awareness and increasing traffic to your page.
  • Displaying Facebook events on a web page keeps people on your site for longer, improving the chances of converting them into paying customers.

Now that you know the benefits of embedding a Facebook events calendar in WordPress, let’s look at how to do it.

To use the solutions below, you should first ensure your business has a Facebook page set up. You also need to set up Facebook events for your page for the different methods to work.

When you’ve done that, come back to this guide to move on with adding Facebook events to your website.

Display Events With the Facebook Page Plugin Widget

The first method for displaying Facebook events on your website is to use the Facebook page plugin widget. This is Facebook’s official developer tool for embedding aspects of your Facebook page on your website.

This method involves copying and pasting code snippets to WordPress. So if you’re not comfortable with doing this on your site, try the other techniques in this article that don’t require that.

Otherwise, let’s get started with the first step.

Step 1: Use the Facebook Page Plugin Code Generator Tool

The first step in adding Facebook Events 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 we demonstrate below.

Facebook Page code generator

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.

events code generator preview

Step 2: Generate the Facebook Event Code

Once you’ve entered your page details, click the Get Code button. This generates the code needed to display your events in WordPress.

Along the top of the code box, you have the option of choosing JavaScript or IFrame. The JavaScript code requires you to edit your site’s theme files, whereas the IFrame code lets you embed the code in your posts, pages, or widget-ready areas.

IFrame Facebook events code

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.

For this tutorial, we’re adding our calendar to a widget in our site’s sidebar. To follow along, head to Appearance » Widgets for an overview of your widgets and sidebars.

Then drag the Custom HTML widget to your chosen sidebar. Give the widget a title to inform visitors what it’s for and paste the code you copied earlier into the box. Then click Save and Done to save your changes.

Paste Facebook events code in the custom HTML widget

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

Facebook events widget

In our example, we changed the IFrame code’s width, so the widget fit our sidebar better. But what if you’re not comfortable with editing code, and you’d like a more straightforward and customizable option?

The next method is so easy to get up and running; even complete beginners can do it with a couple of clicks.

Display Facebook Events with a WordPress Plugin

For the next method, we’re using a WordPress plugin to display Facebook events on a website.

WordPress plugins extend the functionality of WordPress without the difficulty of manually coding your website. Just upload the plugin file, activate it, and click a few settings to get going.

For this example, we’re using the Custom Facebook Feed Pro plugin from Smash Balloon. It’s the most popular Facebook feed plugin for WordPress and helps you seamlessly integrate your Facebook content with WordPress in a few clicks.

Custom Facebook Feed Pro Plugin

Besides displaying Facebook events on your site, this Facebook feeds plugin has the following excellent features:

  • Display multiple Facebook feed types on your site, including news, photo, video feeds, and more.
  • Control the information displayed in your feeds by removing information like dates, descriptions, and so on.
  • Easily manage and display multiple Facebook account feeds on a single website.
  • Completely customize your feeds’ look and feel with layout and styling options to match your website branding.
  • Display your feeds beautifully on mobile devices with the mobile-friendly design.

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

Step 1: Install the Custom Facebook Feed Pro Plugin

The first step in adding Facebook events to your site with a plugin is to get your copy of Custom Facebook Feed Pro. After that, follow these steps to install a WordPress plugin.

Next, navigate to Facebook Feed » Settings where you can connect your Facebook account to WordPress.

To do that, click the blue Connect a Facebook Account button and follow the instructions to link your Facebook page.

Connect a Facebook account

On the same page, you can continue setting up the plugin by choosing how many posts to display in your feed initially, your date and timezone settings, and how often the plugin should check for new posts.

Facebook feed general settings

After that, click the Save Changes button and move on to the Customize tab.

Step 2: Configure the Post Type Settings

On the Customize page, you’re faced with several General settings for choosing how your feeds display on your website. They include changing your feed’s width and height and setting the padding, background colors, and columns.

The next section is for the types of posts you’d like to display in your Facebook feed. Since you want to show your Facebook events feed, untick all the boxes apart from the Events checkbox.

Facebook event feed post types

Then set your Event Source as the Events Page and choose how many hours you’d like to display events for after their start times. Here you can also set the image size in your feed as the full event image or a square cropped image.

Click Save Changes when you’re finished.

Step 3: Choose Your Facebook Event Calendar Layout

Now it’s time to choose the perfect layout for your event feed. From the Customize page, click the Post Layout tab to see the different layout options available to you.

Facebook event feeds layout options

There are 3 different layouts you can choose from, including:

  1. Thumbnail: Show a small thumbnail image with event details to the right.
  2. Half-width: Display your event image at half the width of your content, with the details on the right-hand side.
  3. Fullwidth: Show a fullwidth event image with the details either above or below.

Further down the page, you can show or hide specific details from your Facebook event feed, including post actions, the author name and avatar, and much more.

Show and hide Facebook event details

Just remember to click Save Changes before you move on to customizing further elements of your feed.

Step 4: Customize Event Posts in The Feed

Next, click the Post Styles tab at the top of the page. Here you can customize how your events posts look when they’re displayed in the Facebook feed on your website.

Style posts in your Facebook feed

There are 2 post styles to choose from, including the regular style with a line separating posts and the boxed style. The boxed style separates posts in your event feed with individual boxes.

On this page, you can also customize the text, link colors, and event title and details.

Step 5: Embed Your Facebook Events in WordPress

Now that you’ve set up the Facebook feed plugin, and configured all your settings, it’s time to embed your Facebook events in WordPress.

To embed a Facebook events page on your website, navigate to Pages » Add New from the WordPress admin area. Then once you’ve given your page a title, click the Plus (+) icon to add a new content block.

New WordPress content block

In the search box, type Facebook to bring up the Facebook Feed content block and click it to add it to your new page. A preview of your events feed will appear in the WordPress editor so you can see how it looks before publishing.

facebook-feed-content-block

Then once you’re happy with your feed, click Publish, and when you preview the page, your Facebook events calendar will be live for your visitors to browse.

Facebook events feed in wordpress

For help with more Facebook events feed settings, see the documentation here.

And that’s it!

We hope this article helped you learn how to display a Facebook events calendar on your website.

What are you waiting for?

Get started with Smash Balloon now!

And do follow us on Twitter and Facebook for more helpful content about social media marketing.