Displaying Facebook Events

The Custom Facebook Feed WordPress plugin makes it easy to display events directly from your Facebook page.

Displaying your Facebook events on your WordPress site using the Custom Facebook Feed WordPress plugin

Please note: To display events from a Facebook Group a “User” Access Token is now required. See this FAQ for more infodrmation.

How to show events

If your primary feed is going to be showing your Facebook Events then you can just uncheck all of the other post types in the Post Types section (Customize page > General). This will then reveal some options only available when showing only the Events post type.

Use the settings in the Post Types section to select only Events from the Facebook post types

Alternatively, if you are displaying multiple Facebook feeds on your site and you want your secondary feed to display events then you can use the plugin’s Shortcode Options to specify the post type directly in the shortcode, like so:

[custom-facebook-feed type=events eventsource=eventspage]


Displaying Past Events

By default, only your upcoming/future events will be displayed. You can display a feed of your Facebook page’s past events by using the following shortcode:

[custom-facebook-feed type=events eventsource=eventspage pastevents=true]

If you want to show both upcoming and past events then you’d need to use two shortcodes, like so:

[custom-facebook-feed type=events eventsource=eventspage]
[custom-facebook-feed type=events eventsource=eventspage pastevents=true]

They are split up like this to give you greater control over how to display the events, rather than displaying them all in one feed by date order.


Events from multiple different Facebook pages

To combine events from multiple different Facebook pages into one single feed you would need to use our Multifeed extension. This allows you to specify multiple Facebook IDs and can then merge all of the events into one single feed, ordered by date:

[custom-facebook-feed id="ID_1, ID_2, ID_3" type=events eventsource=eventspage]


Displaying specific single events

To display specific events you’re need to use our Featured Post extension. This allows you to display single posts or events based on their ID:

[custom-facebook-feed type=event eventsource=eventspage featuredpost=671123009612491]


Event Settings

The plugin contains a range of settings that allow you to control how events appear. These options are available both on the plugin’s Customize page within the WordPress admin and also as Shortcode Options.

Number of events to display

This is the same setting used when choosing how many Facebook posts to display.
Location: Settings
Shortcode Option: num

Display events from your Events page or Facebook Timeline

Displaying events from your Events page is the best option for displaying events, however, you can also select to show the posts from your Facebook timeline instead – the posts which are created on your timeline when you create an event.
Location: Customize > General > Post Types
Shortcode Option: N/A

Display events for __ hours after their start time

This allows you to determine how long an event should be shown for after it’s start time on Facebook. The default is 6 hours, but it can be set up to 168 hours (the equivalent of 1 week).
Location: Customize > General > Post Types
Shortcode Option: N/A

Event image size

You can decide whether to show the Full event image or the Square cropped version.
Location: Customize > General > Post Types
Shortcode Option: eventimage

Show events containing certain hashtag or string

You can choose to filter your events and only show events which contain a certain hashtag or string. You can also choose to show events which don’t contain a certain hashtag or string.
Location: Customize > General > Filter by String
Shortcode Option: filter, exfilter

Event Layout

You can choose from either a Thumbnail, Half-width or Full-width layout for your events.
Location: Customize > Post Layout
Shortcode Option: layout

events-3

If you need finer control over the size of the images in the layout then you can use the following snippet in the plugin’s Custom CSS section, which is under the Misc tab on the plugin’s Customize page:

#cff .cff-photo{ width: 40% !important; }
#cff .cff-details { width: 57% !important; }

You can adjust the percentages accordingly. The first line controls the width of the image and the second line controls the width of the event details.

Show/Hide parts of the event

You can select to show or hide the event image, title, details or ‘View on Facebook’ link. Note: You can also change the text or translate the ‘View on Facebook’ link on the ‘Custom Text/Translate’ page.
Location: Customize > Post Layout > Show/Hide
Shortcode Option: include

Customizing Event appearance

Beyond all of the general styling options built into the plugin (height, width, background color, header etc..) you can also customize specific parts of the events.

Event Title

events-4

Title Format

You can select to choose the HTML format to display your title in, for example, an h3, h4, h5, h6 or paragraph tag.
Location: Customize > Typography > Event Title
Shortcode Option: eventtitleformat

Title Size

The size of the Event title.
Location: Customize > Typography > Event Title
Shortcode Option: eventtitlesize

Title Weight

The font weight of the Event title.
Location: Customize > Typography > Event Title
Shortcode Option: eventtitleweight

Title Color

The color of the Event title.
Location: Customize > Typography > Event Title
Shortcode Option: eventtitlecolor

Link title to Facebook event page

Whether to link the Event title directly to the event on Facebook.
Location: Customize > Typography > Event Title
Shortcode Option: eventtitlelink

Event Date

events-5

Event Date Size

The size of the Event date.
Location: Customize > Typography > Event Date
Shortcode Option: eventdatesize

Event Date Weight

The font weight of the Event date.
Location: Customize > Typography > Event Date
Shortcode Option: eventdateweight

Event Date Color

The color of the Event date.
Location: Customize > Typography > Event Date
Shortcode Option: eventdatecolor

Event Date Position

Whether to display the event date above or below the Event title.
Location: Customize > Typography > Event Date
Shortcode Option: eventdatepos

Event Date Formatting

The date format to display the Event date in. See the Date Formatting Reference for examples.
Location: Customize > Typography > Event Date
Shortcode Option: eventdateformat

Event Date Custom Format

Use your own custom format for the Event date. See the Date Formatting Reference for examples.
Location: Customize > Typography > Event Date
Shortcode Option: eventdatecustom

Event Details

events-6

Event Details Size

The size of the Event details text.
Location: Customize > Typography > Event Details
Shortcode Option: eventdetailssize

Event Details Weight

The font weight of the Event details text.
Location: Customize > Typography > Event Details
Shortcode Option: eventdetailsweight

Event Details Color

The color of the Event details text.
Location: Customize > Typography > Event Details
Shortcode Option: eventdetailscolor

Event Details Link Color

The color of the links in the Event details text.
Location: Customize > Typography > Event Details
Shortcode Option: eventlinkcolor

‘View on Facebook’ Link

events-7

Link Text Size

The size of the ‘View on Facebook’ text.
Location: Customize > Typography > Link to Facebook
Shortcode Option: linksize

Link Text Weight

The font weight of the ‘View on Facebook’ text.
Location: Customize > Typography > Link to Facebook
Shortcode Option: linkweight

Link Text Color

The color of the ‘View on Facebook’ text.
Location: Customize > Typography > Link to Facebook
Shortcode Option: linkcolor

Custom Link Text

The text to use in place of the default ‘View on Facebook’ text
Location: Customize > Typography > Link to Facebook
Shortcode Option: facebooklinktext