How to Display Facebook Page Events on Your Website

Displaying your Facebook page events on your website is actually quite simple once you realise you need to use the Facebook Page Plugin/Widget, but with the data-tabs setting configured to just show your Facebook events.

I had to do this for a friend of mine, but I kept going round in circles until I just RTFM and set data-tabs="events" - then the Facebook Page Widget only shows events - see this real world example which is just embedded in my friend's WordPress website via the page editor (it's just using an off-the-shelf WordPress theme, nothing fancy) > https://willkeatingcornwall.com/shows-gigs-events/

So, simple steps (at the time of writing):

1. Go to the Facebook Page Plugin developer tools > https://developers.facebook.com/docs/plugins/page-plugin/
2. Fill in the top section with the Facebook page url for which you want to show the events, what tabs to show (err events, duh), width, height and various other settings
3. Click get code
4. Copy paste the JavaScript SDK code onto any pages you want the Facebook events to appear - just once
5. Paste the widget code into your website's template, theme etc. wherever you want it to appear
6. Done

Here's the Facebook page widget element of the code used in my real world example:

<div 
class="fb-page" 
data-href="https://www.facebook.com/WillKeatingMusic/" 
data-tabs="events" 
data-height="780" 
data-small-header="true" 
data-adapt-container-width="true" 
data-hide-cover="true" 
data-show-facepile="true"
>
<blockquote cite="https://www.facebook.com/WillKeatingMusic/" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/WillKeatingMusic/">Will Keating</a>
</blockquote>
</div>

Oh and like my friend's Facebook page (winky face)