How to Display Facebook Events on Your WordPress Site

Do you want to display Facebook Events on your WordPress site. Facebook events allow you to promote your events while leveraging the power of the world’s largest social network. In this article, we will show you how to display your Facebook Events on WordPress.

Method 1: Add Facebook Events Using Facebook Page Plugin

This method uses Facebook’s social plugins to add your Facebook events on WordPress. You will need to edit your WordPress theme files. If you are not comfortable with adding code manually, then try other methods described in this article.

Let’s get started.

First you need to visit the Page Plugin on Facebook developers website. In the Facebook Page URL field, enter the URL of your Facebook page.

Facebook page plugin can show multiple tabs from your page including the events tab. Simply enter ‘events’ in the tabs field, and you will notice the preview window reload to show your page’s events tab.

fbpageplugin

You can also adjust other settings like cover photo size, container height and width, etc.

Once you’re satisfied, click on the ‘Get Code’ button. This will bring up a popup showing two boxes of code.

fbsdkcode

The first part of the code needs to be added into your theme’s header.php file right after the <body> tag.

Next, you need to copy the second part of the code and paste it in a WordPress post, page, or a text widget.

Don’t forget to save your changes.

That’s all you can now visit your website and you will see Facebook Page Plugin showing your page’s events.

eventembed

Method 2. Add Facebook Events Using a WordPress Plugin

This method allows you to add Facebook Events in WordPress without adding any code to your theme files.

First thing you need to do is install and activate the WP Embed Facebook plugin.

Upon activation, you need to visit Settings » Embed Facebook page to configure plugin settings.

The settings page for the plugin is divided into multiple tabs. You will land on the ‘Magic Embeds’ tab. Scroll down a little to the Facebook settings section.

embedfbsettings

You need to enter a Facebook app ID and secret keys. You can obtain these keys by visiting the Facebook Developers website and creating a new app.

newfbapp

This will bring up a popup where you will be asked to provide a name for your app and choose a category.

appname

Click on create app ID button to continue.

Facebook will now create your app, and you will be redirected to the app dashboard. Click on the settings link from the menu on your left to view app keys.

appkeys

Now you will see your app ID key and secret key which will be hidden, and you will need to click on the show button to copy it.

Enter both keys in the respective fields on WP Embed Facebook plugin’s settings page for your WordPress site.

Don’t forget to click on the ‘Save all settings’ button to store your changes.

You are now ready to add your event in WordPress. Edit a post or page where you want to display your Facebook event and add this shortcode:

[fb_plugin page href="https://www.facebook.com/YourFBPage" tabs="events"]

Don’t forget to use your own Facebook page URL in the shortcode.

This shortcode will display the Facebook Page plugin with only your Events tab. You can now visit your website to see it in action.

You can also add the shortcode to a text widget. But before you do that you will need to enable shortcodes for your sidebar widgets.

Add an Event Not Created by a Facebook Page or Group

Some users may need to share a Facebook event created by their personal profiles. These events are not associated with a page. Here is how you will show them using the custom embeds feature of the plugin.

Instead of using the Facebook page plugin shortcode, you will need to use the custom embeds shortcode like this:

[facebook https://www.facebook.com/events/1796069560608519/]

Replace the URL in the shortcode with the URL of your Facebook Event.

You can now preview your website to see the Facebook events embed in action.

singleevent



Leave a Reply