How to Add a Facebook Event Calendar to WordPress
With the number of users nearing three billion, Facebook is easily the most popular social network at the moment. Part of the reason for its popularity with users are its features – on Facebook, people connect with people, businesses connect with clients, and communities can form organically, whatever else you may think of the network.
One of Facebook’s popular features is event organization and planning. If you are running a website for a business or a community (such as a hobby club or a neighborhood association) which holds meetings or events with any frequency, chances are you also run a Facebook group or page to organize and inform attendees.
Of course, you can use WordPress to embed a Facebook group feed or page timeline into your website, but suppose you only want the event calendar? We’ve got your back. But before we get into the nuts and bolts of the how-to, let us take some time to go into the why and wherefore.
Qode Themes: Top Picks
View Collection
Why Add a Facebook Event Calendar to Your Website?
Popular as it is, many people only use Facebook irregularly (or only to keep in touch with family and friends), while visiting their favourite websites daily for news. Also, your website visitors and your Facebook followers or group members might not overlap. With a Facebook Event calendar on your website, your visitors will be notified of upcoming events at a glance, even if they don’t don’t want to log into Facebook to mark themselves as interested or going.
Sure, you could just create an event registration page on your website, but that only doubles the work if you also want to create events for your Facebook community. Furthermore, with Facebook, registering for an event just takes a click, which makes it a good option for informal events or large gatherings. We do think a comprehensive form or RSVP plugin is better for invitation-only events, but for club meetings, open-air events and similar, simpler is better.
How to Add a Facebook Event Calendar to WordPressBefore you begin, you’ll need a Facebook page with at least one upcoming event. Once you have a Facebook page with an event, you’ll need its URL. Simply load your page in your browser and copy it.
You then need to access Facebook’s Page Plugin page in order to generate the code you need.
The first thing you need to input is the Facebook Page URL. Once you do, you will get a preview of your page timeline in the preview box, with your page posts in descending order from latest to first. This is about events, though, so in the Tabs field you need to replace “timeline” with “events”. Once you press enter, you will see that the preview has changed to show upcoming events only, with the most immediate ones first.
This is where you can also customize the look of the widget which will appear to your visitors. You can set the Width and the Height, with Width being limited to anything between 180 and 500 pixels, while Height has to be over 70 pixels. If you leave these fields blank, you will get the default values of 340 by 500 pixels.
The checkboxes below the Width and Height fields govern the style of your Event Calendar: you can select a Small Header or Hide the Cover Photo to give more space to your event content, and you can also choose to uncheck Adapt to plugin container width and Show Friend’s Faces, which are checked by default.
If you are of a more technical bent, you can scroll down and read through some of the attributes used by Facebook’s plugin. If not, you can just click the Get Code button underneath the preview box to, well, get your code.
You will get two pieces of code, and you need both of them. Copy the first one.
You need to copy your first piece of code into your header.php file. You will find it by navigating to Appearance/Theme Editor.
Find the header.php in the right-hand side menu and click to open it. Next, find the <body> tag, and paste the first piece of code directly underneath it, making sure you don‘t upset any other tags. Finally, scroll down and click Update File.
Next, go back to the Facebook Page Plugin page and copy the second piece of code.
This is the code to the actual event calendar widget, and you can use it in any widget area on your website, minding the height and width. We will use it as part of a post, but you can use it whenever you like.
Once you have created a post, click on the plus sign to add a block, then select the HTML block.
All that‘s left to do is paste the code into your HTML block. Of course, this goes for Gutenberg users. If you are using Elementor, you need the Custom HTML element, while a Classic Editor user can simply paste the code where they want it, provided they are using the Text view.
And your event calendar will be there for your visitors to peruse.
In Conclusion
As we have shown, embedding a Facebook event calendar into your WordPress website is quick and easy and uses Facebook‘s own code. So, in the interest of time-saving for you and for your website visitors, take a while to set up this simple solution. Your visitors will know what events you‘ve got in the pipeline at a glance, and your community will have more ways of staying informed. Best of all? This widget updates itself constantly, meaning you only ever need to create an event once – on Facebook.
