How to Show Facebook Events on WordPress Site?

dsm-facebook-events-wordpress-plugin
In this post, you will learn how to show Facebook events on WordPress site. Our WordPress plugin will be used to achieve this output.

The WP plugin’s source code is based on one of our most popular blog post: How To Display Facebook EVENTS on Website? I decided to make a WordPress plugin version of that code because many people are requesting it. So here’s what I came up with.

Contents of this post include:

1.0 Overview
2.0 Feature Details & Download
3.0 Feature Screenshots
4.0 How To Use?
5.0 Live Demos
6.0 What People Say
7.0 Related WordPress Plugins
8.0 Some Notes

1.0 Overview

You or your client is using Events on Facebook? Don’t miss the opportunity to display it on your WordPress site! Our WordPress plugin can help you with that.

Through our WordPress plugin, we can display your Events from Facebook to your website. Automatically. In real-time. Your site will have an ‘instant’ events information for your customers.

Once you create or edit an event on Facebook, your website will be updated as well. Facebook events will be displayed as list view and calendar view. How cool is that?

On more thing, did you know that your can control the look & feel of Facebook events on your website? You surely can! Our WordPress plugin has this settings dashboard where you can control colors like background colors, button color, font color and more!

On the next section, let’s take a closer look at the feature details of our DSM Facebook events WordPress Plugin – PRO Version!

2.0 Feature Details & Download

FEATURESOUR WORDPRESS PLUGIN CAN DO IT
Save Your Precious Time
Manage events for your Facebook Page and website onceYES
Save time figuring out and coding these features on your websiteYES
Display events from multiple Facebook pagesYES
Display events by dateYES
Display List of Upcoming Events
Display event cover photo (profile picture if none)YES
Display event titleYES
Display event locationYES
Display link to view full mapYES
Display event date and timeYES
Display button to read ‘More Details’ about the eventYES
Display button link to ‘Get Tickets’ (if set)YES
Display events from multiple Facebook pages in one feedYES
When ‘More Details’ Button Was Clicked
Load more details about the event without page refreshYES
Display loading animation while loading more details of eventYES
Display loaded event details below the clicked eventYES
Display full image of eventYES
Display full title of eventYES
Display host of event, with link to its Facebook pageYES
Display date and time of eventYES
Display location of event with Google mapYES
Display description of eventYES
Display link of event to FacebookYES
Display each event section with font-awesome iconsYES
‘More Details’ button becomes ‘Close Details’ button with (x) iconYES
Clicking ‘Close Details’ button will hide event ‘more details’YES
No need to reload event ‘more details’ again when it was already loadedYES
No need to reload list when ‘Upcoming’ tab was clicked againYES
Display List of Past Events
Display loading animation when ‘Past’ tab was clickedYES
All display features above of upcoming events are the same with past eventsYES
No need to reload list when ‘Past’ tab was clicked againYES
Calendar View
Display loading animation when ‘Calendar’ tab was clickedYES
Display current month by defaultYES
Display previous month button with iconYES
Display loading animation when previous month button was clickedYES
Display previous month eventsYES
Display next month button with iconYES
Display loading animation when next month button was clickedYES
Display next month eventsYES
Display calendar of events from multiple Facebook pagesYES
Highlight calendar dates with Facebook eventsYES
Clicking a calendar event will display loading animation below the calendarYES
Display event details of clicked calendar dateYES
Can display event details of one or more in one calendar dateYES
Display features of calendar event details are the same with upcoming events aboveYES
No need to reload calendar view when ‘Calendar’ tab was clicked againYES
Responsive
Changes tabs to drop down options when viewed on mobileYES
Changes layout of upcoming and past event items on mobileYES
Calendar still viewable and clickable in mobileYES
Customize Look & Feel of your Facebook Events
Our plugin’s settings can be found in WordPress Settings > DSM Facebook EventsYES
Choose your event background colorYES
Choose your event text colorYES
Choose your highlight background colorYES
Choose your highlight text colorYES
Choose your button background colorYES
Choose your button text colorYES
Choose your border colorYES
Easily choose colors with color pickerYES
Updates and Support
Free plugin updates for 2 yearsYES
Fast and friendly email support for 1 yearYES
DSM FACEBOOK EVENTS WORDPRESS PLUGIN
BUY TO DOWNLOAD NOW!
Use for up to 3 websites or projects.
Use for up to 10 websites or projects.
Use for UNLIMITED websites or projects.
* You can use your debit or credit card with PayPal.

Do you need more reasons to download our WordPress plugin?

MORE REASONS TO GET DSM FACEBOOK EVENTS WORDPRESS PLUGIN
No different kind of licenses.YES
No monthly or any recurring fees.YES
No need to rely on another website to render Facebook events.YES
No need for codes from other websites.YES
Completely customizable.YES

3.0 Feature Screenshots

The following are some of the features in screenshot with small descriptions. Aside from this, you can always view the live demo of our output in section 7.0 below.

3.1 Show Upcoming Events

Our WordPress plugin can show list of upcoming events. Clicking the ‘More Details’ button will show you more details above the event.

dsm-facebook-events-upcoming-events-wordpress-plugin

3.2 Show Past Events

Our WordPress plugin can show list of past events.

dsm-facebook-events-past-events-wordpress-plugin

3.3 Responsive Layout Of Events

Events are still viewable even in mobile.

dsm-facebook-events-wordpress-plugin-responsive-cards

3.4 Calendar Of Events

Your customers can easily know your events on the current month, next month and even previous months! Clicking a date will show you more details about the event.

dsm-facebook-events-calendar-of-events-wordpress-plugin

3.5 Responsive Tabs

Tabs becomes drop down in mobile view.

dsm-facebook-events-wordpress-plugin-responsive-tabs

3.6 Settings Dashboard

This is where you control the look and feel of your Facebook events on your website.

dsm-facebook-events-wordpress-plugin-settings-dashboard

4.0 How To Use?

4.1 How to use DSM Facebook Events WordPress Plugin? You only need 5 easy steps.

1. Download our plugin.
2. Upload our plugin to your WordPress site.
3. Go to WordPress Settings > DSM Facebook Events to Customize settings.
4. Put shortcode to your Facebook page, post or widget. The shortcode is:

[dsm_facebook_events]

5. Hit save button.

4.2 How to display events from multiple Facebook pages? Your shortcode will look like the following.

[dsm_facebook_events page="Museums.Sheffield,Echostage"]

4.3 How to display events from multiple Facebook pages and by date? Your shortcode will look like the following.

[dsm_facebook_events page="Museums.Sheffield,Echostage" date="2016-10-20"]

4.4 How to display only one event from Facebook?
1. Get the event’s ID. How? Go to the Facebook event link and get the number part on the URL.

For example:

https://www.facebook.com/events/1586444591653799/

2. Use the shortcode that looks like the following.

[dsm_facebook_events event_id="1586444591653799"]

4.5 How to display calendar view by default?
Use the shortcode that looks like the following.

[dsm_facebook_events page="CelebrityTheatre" view="calendar"]

4.6 How to display past events by default?
Use the shortcode that looks like the following.

[dsm_facebook_events page="CelebrityTheatre" view="past"]

 

4.7 How to display upcoming events with simple layout?
If you want the upcoming events to be shown in a simple view, use the shortcode that looks like the following.

[dsm_facebook_events layout="simple" tabs="no" all_events_link="https://www.yourwebsite.com/events/"]

The “all_events_link” parameter is used to render an “All Events” link at the end of the events list.

Congratulations! You just displayed Facebook events to your website.

7.0 Live Demos

Enjoy the following live demo of our DSM Facebook Events WordPress plugin.

6.0 What People Say?

Here’s what people say on our social media products.

★★★★★ “Hi Mr. Dalisay, My name is Clinton and I’m a front end designer. I purchased two (Facebook) scripts from you today. Thank you for your time and what a great tutorial and was happy to support your projects.”

Clinton Moore
Web Developer & Owner, Netchanics

★★★★★ “This guy is the best. There was a small issue and he helped me right away. I recommend this (Facebook Feed) script to everybody. Instead of wasting time by copy pasting, just purchased the package and saved a lot of time.”

Aykun Cetinkaya
Media Representative, LinkedIn Profile

★★★★★ “Just wanted to say thank you. Just purchased the (Social) Script PRO Pack today not too long ago and modified it a bit to make it a dark theme and it’s working great. It saved me A LOT of time! Thank you!!!!!!!”

Daniel Mort
Web Developer & Owner, Morthub

7.0 Related WordPress Plugins

8.0 Some Notes

Need support? Have a feature request? Don’t hesitate to send me an email about it. My email address is mike@codeofaninja.com.