Displaying Facebook Events
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 or Group.
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.
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:
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:
No upcoming events
If you want to show both upcoming and past events then you’d need to use two shortcodes, like so:
No upcoming events No upcoming events
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:
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:
No upcoming events
Problem displaying Facebook posts. Backup cache in use.
Type: OAuthException
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: eventsource=timeline
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: eventoffset=6
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
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
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 > Style Posts (Typography)Â > Event Title
Shortcode Option:Â eventtitleformat
Title Size
The size of the Event title.
Location:Â Customize > Style Posts (Typography) > Event Title
Shortcode Option:Â eventtitlesize
Title Weight
The font weight of the Event title.
Location:Â Customize > Style Posts (Typography) > Event Title
Shortcode Option:Â eventtitleweight
Title Color
The color of the Event title.
Location:Â Customize > Style Posts (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 > Style Posts (Typography) > Event Title
Shortcode Option:Â eventtitlelink
Event Date
Event Date Size
The size of the Event date.
Location:Â Customize > Style Posts (Typography) > Event Date
Shortcode Option:Â eventdatesize
Event Date Weight
The font weight of the Event date.
Location: Customize > Style Posts (Typography) > Event Date
Shortcode Option: eventdateweight
Event Date Color
The color of the Event date.
Location: Customize > Style Posts (Typography) > Event Date
Shortcode Option: eventdatecolor
Event Date Position
Whether to display the event date above or below the Event title.
Location: Customize > Style Posts (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 > Style Posts (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 > Style Posts (Typography) > Event Date
Shortcode Option: eventdatecustom
Event Details
Event Details Size
The size of the Event details text.
Location:Â Customize > Style Posts (Typography) > Event Details
Shortcode Option:Â eventdetailssize
Event Details Weight
The font weight of the Event details text.
Location: Customize > Style Posts (Typography) > Event Details
Shortcode Option: eventdetailsweight
Event Details Color
The color of the Event details text.
Location: Customize > Style Posts (Typography) > Event Details
Shortcode Option: eventdetailscolor
Event Details Link Color
The color of the links in the Event details text.
Location: Customize > Style Posts (Typography) > Event Details
Shortcode Option:Â eventlinkcolor
‘View on Facebook’ Link
Link Text Size
The size of the ‘View on Facebook’ text.
Location:Â Customize > Style Posts (Typography) > Link to Facebook
Shortcode Option:Â linksize
Link Text Weight
The font weight of the ‘View on Facebook’ text.
Location:Â Customize > Style Posts (Typography) >Â Link to Facebook
Shortcode Option:Â linkweight
Link Text Color
The color of the ‘View on Facebook’ text.
Location:Â Customize > Style Posts (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 > Style Posts (Typography)>Â Link to Facebook
Shortcode Option:Â facebooklinktext
No upcoming events