Docs    Facebook    Getting Started

Displaying Facebook Events using the WordPress plugin

Due to some recent Facebook API changes there it is currently only possible to display events that you are a host of and are from a Facebook “Page” that you are an admin of. To do this, you need a Page Access Token for your Facebook page. To display events from Facebook pages that you’re not an admin of see this FAQ for a temporary workaround. We apologize for any inconvenience!

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

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]


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 pastevents=true]


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

Note: When using a built-in date format the plugin will hide the event end date if the event ends on the same day that it starts.  For example, instead of using “June 1st, 5pm – June 1st 9pm” it will simply use “June 1st, 5pm – 9pm”.  If you are using your own custom date format then the plugin doesn’t know which part of the end date to hide.  To get around this, you can use the <k> tag in the custom date to let the plugin know which part you want to hide. For example, eventdatecustom="<k>F jS, </k>g:i a". The plugin will then hide the text which is inside the <k> tag in the end date.

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

Technical Support

Still have questions? We are here to help you succeed.

Open a support ticket