Home Facebook

How To Display Facebook EVENTS on Website?


Do you have an event manager on your website? Do you create events on your Facebook page?

If your answer is both YES, you’re wasting a lot of time managing your brand’s events information online.

What if there’s a way to create an event ONCE, and then let if appear both on your Website and Facebook page? Will you be happy saving your precious time?

Our code for today will make you happy then, just like we are!

Today we’re gonna talk about how to display publicly available Facebook Page EVENTS on your website.

This one is great if you want your Facebook events to be shown in your website in a synchronized way. Once you created or updated an event on Facebook, it will be automatically reflected on your website too.

A lot of people requested a WordPress plugin version of this code. Now it is available. We call it “DSM Facebook Events PRO”. You can download it in section 7.3 below. Thank you!

The advantages and risks of this is almost the same with what I discussed in my first post  related to this one.

Today post will include the following contents:

1.0 Source Code Overview
2.0 Final Code Output
3.0 Step by Step Programming (Steps 1-12)
4.0 How To Display Past Events?
5.0 How To Display Upcoming Events?
6.0 What People Say About This Code?
6.1 From Blog Comments
6.2 From Emails
6.3 From Facebook Messages
7.0 Download the Complete Source Code
8.0 Related Source Codes
9.0 You Don’t Like Coding? I’m Your Man!

1.0 Source Code Overview

Here’s an overview of what our code does:

1.1 Gets events listed with data such as event image, name, time, description, ect. from your Facebook fan page without using any Facebook PHP SDK, just the Facebook Graph API!

1.2 Display these event data to a webpage (assuming it is your WordPress or PHP website.)

1.3 Show some awesome UI powered by Bootstrap. If you’re not yet familiar with this awesome front-end framework, see our step by step Bootstrap tutorial here.

2.0 Final Code Output

We have to know where we are going, if we’re done with the code below, we will achieve this output:


More improvements were provided after the step by step tutorial. If you need more features, you might need the PRO version. It has the following output:




The demo above shows Celebrity Theatre’s gigs from his Facebook event link: https://www.facebook.com/CelebrityTheatre/events

See the full list of features in section 7.0 below. It has all the details of these features.

3.0 Step by Step Programming

Now here’s the fun part! Enjoy!

Step 1. Create an app on Facebook developers website.

You can follow our tutorial on how to create an app on Facebook developers website. Take note of the App ID and App Secret keys.

Step 2: Create an index.php file and put a page

We will declare a page title via PHP this way:

$page_title ="Display Facebook Page Events on Website";

Step 3: Make index.php Bootstrap ready

Add the following code on our index.php to make it Bootstrap ready. Bootstrap allows us to have a decent looking user interface, if you’re not familiar with it, please visit our Bootstrap step by step guide.

Notice that we put <?php echo $page_title; ?> inside the title tag. We have to make use of our Step 2 above.

<!DOCTYPE html>
<html lang="en">

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title><?php echo $page_title; ?></title>

	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<div class="container">

<!-- events will be here -->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>


Step 4: Add a page header

Again, we have to make use of our Step 2 above, the Bootstrap way.

<div class="page-header">
	<h1><?php echo $page_title; ?></h1>

Step 5: Get your Facebook page ID.

The testing Facebook page we used here is https://www.facebook.com/NinjaDummyPage, and its Facebook page id is 221167777906963. How did I get that ID? Just use this tool I made for you.

Once you get your Facebook page ID, put this code below the Step 4 code, just replace the ID with your own.

$fb_page_id = "221167777906963";

Step 6: Specify the “since” and “until” dates to get the events

Specifying the ‘since’ and ‘until’ dates below will get all the Facebook events 2 years before and 2 years after the current year in your page.

$year_range = 2;

// automatically adjust date range
// human readable years
$since_date = date('Y-01-01', strtotime('-' . $year_range . ' years'));
$until_date = date('Y-01-01', strtotime('+' . $year_range . ' years'));

// unix timestamp years
$since_unix_timestamp = strtotime($since_date);
$until_unix_timestamp = strtotime($until_date);

// or you can set a fix date range:
// $since_unix_timestamp = strtotime("2012-01-08");
// $until_unix_timestamp = strtotime("2018-06-28");

Step 7: Get your app’s access token.

Before you can get any data from the FB graph API, you need an access token. Prepare your App ID and App Secret keys from Step 1 above, we’ll use it to get your access token, here’s how:


Replace YOUR_APP_ID and YOUR_APP_SECRET with your own and run the link on the browser.

Put the value you see inside the $access_token variable. Change YOUR_ACCESS_TOKEN below.

$access_token = "YOUR_ACCESS_TOKEN";

Step 8: Prepare the FB graph API link

This link is where the JSON string will be retrieved. We get the JSON contents via PHP’s file_get_contents() function.


$json_link = "https://graph.facebook.com/{$fb_page_id}/events/attending/?fields={$fields}&access_token={$access_token}&since={$since_unix_timestamp}&until={$until_unix_timestamp}";

$json = file_get_contents($json_link);

Step 9: Decode the JSON String

We have to decode the JSON string using the json_decode() function and convert it to an associative array by setting the second parameter to true. We also used JSON_BIGINT_AS_STRING parameter since Facebook uses large integers (eid) and we don’t want PHP to simplify the value.

$obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING);

// for those using PHP version older than 5.4, use this instead:
// $obj = json_decode(preg_replace('/("\w+"):(\d+)/', '\\1:"\\2"', $json), true);

Step 10: Prepare the table and loop

This time we are actually retrieving the events from Facebook. We are going to put it in an HTML table powered by Bootstrap, that’s why we have to classes below.

echo "<table class='table table-hover table-responsive table-bordered'>";

    // count the number of events
    $event_count = count($obj['data']);

    for($x=0; $x<$event_count; $x++){
        // facebook events will be here

Step 11: Put the event values in variables

Inside our for loop, we are going to put the event values in variables.

// set timezone

$start_date = date( 'l, F d, Y', strtotime($obj['data'][$x]['start_time']));
$start_time = date('g:i a', strtotime($obj['data'][$x]['start_time']));
$pic_big = isset($obj['data'][$x]['cover']['source']) ? $obj['data'][$x]['cover']['source'] : "https://graph.facebook.com/{$fb_page_id}/picture?type=large";

$eid = $obj['data'][$x]['id'];
$name = $obj['data'][$x]['name'];
$description = isset($obj['data'][$x]['description']) ? $obj['data'][$x]['description'] : "";

// place
$place_name = isset($obj['data'][$x]['place']['name']) ? $obj['data'][$x]['place']['name'] : "";
$city = isset($obj['data'][$x]['place']['location']['city']) ? $obj['data'][$x]['place']['location']['city'] : "";
$country = isset($obj['data'][$x]['place']['location']['country']) ? $obj['data'][$x]['place']['location']['country'] : "";
$zip = isset($obj['data'][$x]['place']['location']['zip']) ? $obj['data'][$x]['place']['location']['zip'] : "";


if($place_name && $city && $country && $zip){
	$location="{$place_name}, {$city}, {$country}, {$zip}";
	$location="Location not set or event data is too old.";

Step 12: Put the values in td tags.

This is how we put values in the HTML table for our output. Put this code inside the for loop, after the code in step 11.

echo "<tr>";
	echo "<td rowspan='6' style='width:20em;'>";
		echo "<img src='{$pic_big}' width='200px' />";
	echo "</td>";
echo "</tr>";
echo "<tr>";
	echo "<td style='width:15em;'>What:</td>";
	echo "<td><b>{$name}</b></td>";
echo "</tr>";
echo "<tr>";
	echo "<td>When:</td>";
	echo "<td>{$start_date} at {$start_time}</td>";
echo "</tr>";
echo "<tr>";
	echo "<td>Where:</td>";
	echo "<td>{$location}</td>";
echo "</tr>";
echo "<tr>";
	echo "<td>Description:</td>";
	echo "<td>{$description}</td>";
echo "</tr>";
echo "<tr>";
	echo "<td>Facebook Link:</td>";
	echo "<td>";
		echo "<a href='https://www.facebook.com/events/{$eid}/' target='_blank'>View on Facebook</a>";
	echo "</td>";
echo "</tr>";

4.0 How To Display Past Events?

To display all past event, you just have to set the ‘since date’ to the past x years (set in $year_range variable), and the ‘until date’ to yesterday.

// get events for the past x years
$year_range = 1;

// automatically adjust date range
// human readable years
$since_date = date('Y-01-01', strtotime('-' . $year_range . ' years'));
$until_date = date('Y-m-d', strtotime('-1 day'));

// unix timestamp years
$since_unix_timestamp = strtotime($since_date);
$until_unix_timestamp = strtotime($until_date);

Important Notes:

In the Facebook Page events tab, there are two link buttons: “Upcoming Events” and “Past Events”, sometimes, when you click the “Past Events” link, it doesn’t show the past events you created. But it shows on our script which means it’s in the Facebook events database. I think this is a Facebook bug that they have to address.

I also recommend to set the “year range” to “1” because sometimes, Facebook returns the wrong data, like when you have a long date range or when you have a huge list of events within a long date range.


5.0 How To Display Upcoming Events?

To display the events today and in the future, you just have to set the ‘since date’ to today and the ‘until date’ to the future date (affected by the $year_range variable)

// get events for the next x years
$year_range = 1;

// automatically adjust date range
// human readable years
$since_date = date('Y-m-d');
$until_date = date('Y-12-31', strtotime('+' . $year_range . ' years'));

// unix timestamp years
$since_unix_timestamp = strtotime($since_date);
$until_unix_timestamp = strtotime($until_date);


6.0 What People Say About This Code?

I’m so glad that other people are delighted by this code, here are some of them!

6.1 From Blog Comments

★★★★★ “Hi Mike, amazing tutorial.” ~ simonerama

★★★★★ “Hello and THANK you for this amazing work! :)” ~ Sergio

★★★★★ “Did the trick for me. Thanks for the nice script!” ~ n0Fear

★★★★★ “Hi Mike, thanks for the great script. I’m a programming novice, but got this running the way I wanted to pretty quickly. I owe you a beer.” ~ Bas Koole

★★★★★ “Hi it’s working great :)” ~ Sebastian

6.2 From Emails

★★★★★ “I’ve got it working! You’re a great man, will do some ad for you!” ~ Markus

★★★★★ “Hi Mike! BOOM, works great! Thanks again!” ~ Nick

★★★★★ “Perfect! Thank you very much! If I have some new jobs, I will contact you! Greetings from Germany.” ~ Eric

★★★★★ “Thank you for the fast reply, yes this should work for me. I will contact you again. Thank you so much.” ~ Ruocco

6.3 From Facebook Messages

★★★★★ “Hey Mate, code’s a lifesaver (and time saver!)” ~ Andrew

★★★★★ “Thanks, I’ve been trying to get Facebook events on the website for 6+ months had no luck, decided last night to update the site which I haven’t done in a while and thought I’d give it another go and found you’re page through a google search.” ~ Ward

★★★★★ “Mike it’s great and simple! I like! Thank you!” ~ Jasmin

★★★★★ “You’re a life saver, thanks so much.” ~ Brendon

7.0 Download the Complete Source Code

You can get the source code by following the whole, well detailed tutorial above. But isn’t it more convenient if you can just download the complete source code we used, and play around it?

There’s a small fee in getting the complete source code, it is small compared to the value or skill upgrade it can bring you, or income you can get from your website project or business.

For a limited time only, I will give you the source code for a low price. Download the source code by clicking the green buy button below.

7.1 Download the BASIC Source Code

Manage events for your Facebook Page and website once Yes
Save time figuring out and coding these features on your website Yes
Display list of all events Yes
Display list of upcoming events Yes
Display list of past events Yes
Display event cover photo (profile picture if none) Yes
Display event title Yes
Display event date and time Yes
Display event location Yes
Display event description Yes
Link to actual Facebook event (opens in new tab) Yes
Bootstrap UI enabled Yes
Responsive layout (great for mobile devices) Yes
Free source code updates Yes
Fast and friendly email support Yes
If you will buy now, you will get Facebook Photos Basic for FREE!

7.2 Download the PRO Source Code

All features of the BASIC source code Yes
Load more events automatically when scrolling Yes
Display number of people attending the event Yes
Link to profiles of some people attending the event Yes
Display event in Google map with pointer Yes
Calendar view Yes
Responsive calendar view (great for mobile devices) Yes
Next Month button navigation Yes
Prev Month button navigation Yes
Highlight calendar cells with events Yes
Calendar cells with events will pop up event info when clicked Yes
“See more” and “See less” toggle in event description Yes
Share event buttons (Facebook, Twitter, Google) Yes
Font awesome icons Yes
Link to Google Maps to view full map Yes
Tickets Link Yes
If you will buy now, you will get Facebook Photos PRO for FREE!

Do you need more reasons to download it?

Buy only once, use on unlimited number of websites and Facebook pages! Yes
No different kind of licenses. Yes
No many different pricing schemes. 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
You can learn more how to code, I love teaching and can give you free tips! Yes
Familiarize yourself with the Facebook Graph API. Yes
Features are constantly improving, and you get it for free. Yes
Completely customizable. Yes

7.3 Download the DSM Facebook Events WordPress Plugin

You demanded it, we built it. Our WordPress plugin has all the features of our pro source code above. Calendar view coming soon.

Our WordPress plugin is super easy to install and use.

7.3.1 Settings Page

It also has a settings page where you can specify your Facebook page, show upcoming events for the next X number of days, limit and date range of events to display (more features coming soon).


7.3.2 Use The Shortcode

Use the following shortcode (on WordPress page, post or widget!) to display your Facebook events:


7.3.3 Plugin Live Demo

The following is a sample live demo for you. It shows events from CelebrityTheatre Facebook page. The button below will take you to another WordPress site.

7.3.4 Pricing

The DSM Facebook Events WordPress plugin costs $48 per year, that’s only $4 per month for one website.

Why do we have this pricing? Here are the reasons:

  1. You will get all the plugin feature update and extensions. No extra charge.
  2. You will get a fast and friendly email and chat support. No extra charge.
  3. You will never have to code anything. No extra charge.
  4. You will never have to worry again about frequent Facebook API updates. No extra charge.
  5. You can request a feature you want to be developed. No extra charge.
  6. We work full time to develop the best Facebook events WordPress plugin. No extra charge.

7.3.5 Feature List

Download the plugin now using the button below.

FEATURES WP Plugin – DSM Facebook Events PRO
All features of PRO source code above YES
Specify Facebook Page by Name or ID YES
Specify Number of events shown by default YES
Show upcoming events [X] days from now YES
Display events by date range YES
Blends well with any WordPress theme YES
Responsive – great for mobile browsers YES
Display events in WordPress page YES
Display events in WordPress post YES
Display events in WordPress widget YES
Fast and friendly email support. YES
Free WordPress plugin updates YES
More features coming soon! YES
DSM Facebook Events PRO – 1 Year Valid License Key: BUY AND DOWNLOAD NOW USING
If you will purchase now, you will get +3 months FREE!
DSM Facebook Events PRO – 3 Years Valid License Key: BUY AND DOWNLOAD NOW USING
If you will purchase now, you will get +6 months FREE!
DSM Facebook Events PRO – 6 Years Valid License Key: BUY AND DOWNLOAD NOW USING
If you will purchase now, you will get +1 year FREE!
* You can use your debit or credit card with PayPal.

7.3.6 What will happen after the payment?

1. You will receive the plugin download link via email.
2. We will send you the valid license key within 12-24 hour.

7.3.7 Any system requirements?

Plugin requires PHP version 5.4 and higher. Ask your web hosting provider to do it. Thanks!

7.3.8 Any feature request?

If you think there’s a missing feature, please let us know by sending me a message via email ninjazhai30@gmail.com, or via our official Facebook page! We can work on it!

Thank you for supporting our projects here at codeofaninja.com!

7.4 Download Our Social Media Scripts PRO Pack!

This pack contains all the 6 social media scripts we have (raw PHP scripts not WP plugins). If you will buy them all one by one, it will cost you $180. But, if you will download this pack, it will be $119 only. That’s more than 30% off!

Thank you for supporting our projects!

7.5 Do You Want a Demo?

If you want a demo to see if this will work with your own Facebook page, please send me a message via email ninjazhai30@gmail.com, or via our official Facebook page!

Please provide your Facebook page URL on the message, thanks!

7.6 Want To Donate More?

For those people who ask how to donate more for my works here at codeofaninja.com, send it to my PayPal ID: ninjazhai30@gmail.com, thanks a lot!!!

8.0 Related Source Codes

Did you know that you can also display other Facebook data to your website? I’ve created tutorials on them too, see the following:

#1 Display Instagram FEED on Website
#2 Display Facebook PHOTOS on Website
#3 Display Facebook Timeline FEED on Website
#4 Display Facebook VIDEOS on Website
#5 Display Facebook EVENTS on Website
#6 Display Twitter Feed on Website

9.0 You Don’t Like Coding? I’m Your Man!

If you don’t like coding but wanna make it work on your website, even with any customization, don’t worry, I’m always here to help you!

Just contact me by sending a message on our official Facebook page, or via my email ninjazhai30@gmail.com, I’m more than willing to help you!

Important note:

If you found a problem with this code, we can solve it faster via Email or FB message, please send me a message via email ninjazhai30@gmail.com, or via our official Facebook page!

Please be more detailed about your issue. Best if you can provide your test URL and FB page URL. Thanks!

Thanks for visiting our tutorial on how to display Facebook events on website using PHP and Facebook Graph API!