Home / Facebook /

Display Facebook EVENTS on Website using PHP and Graph API

Display Facebook Events On WordPress or PHP Website

Hi guys! I was surprised because many of you requested me to post another PHP and Facebook Graph API related tutorial .

Today we’re gonna talk about how to display 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.

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: SEE THE LIVE DEMO HERE. Video demo coming soon.

More improvements were provided after the step by step tutorial. If you need more features, refer to section 7.3 below.

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:

<?php
$page_title = "Display All 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">
<head>

    <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">

</head>
<body>
    
<div class="container">

<!-- events will be here -->

</div>

<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>
<![endif]-->

</body>
</html>

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>
        <a href='index.php'>Main</a> / <?php echo $page_title; ?>
    </h1>
</div>

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.

<?php
$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:


https://graph.facebook.com/oauth/access_token?client_id=YOUR_APP_ID&client_secret=YOUR_APP_SECRET&grant_type=client_credentials

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.

$fields="id,name,description,location,venue,timezone,start_time,cover";

$json_link = "https://graph.facebook.com/{$fb_page_id}/events/feed/?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
    }
echo "</table>";

Step 11: Put the event values in variables

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

$start_date = date( 'l, F d, Y', strtotime($obj['data'][$x]['start_time']));

// in my case, I had to subtract 9 hours to sync the time set in facebook
$start_time = date('g:i a', strtotime($obj['data'][$x]['start_time']) - 60 * 60 * 9);

$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'];
$location = isset($obj['data'][$x]['location']) ? $obj['data'][$x]['location'] : "";
$description = isset($obj['data'][$x]['description']) ? $obj['data'][$x]['description'] : "";

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, just add the following on the WHERE clause of our FQL query:

// 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.

SEE THE LIVE DEMO HERE.

5.0 How To Display Upcoming Events?

To display the events today and in the future, just add the following on the WHERE clause of our FQL query:

// 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);

SEE THE LIVE DEMO HERE.

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

simonerama said:
display fb events - blog comment testimonial #1

Sergio said:
display fb events - blog comment testimonial #2

n0Fear said:
display fb events - blog comment testimonial #3

Bas Koole said:
display fb events - blog comment testimonial #4

Sebastian said:
display fb events - blog comment testimonial #5

6.2 From Emails

Markus said:
display fb events - email testimonial #1

Nick said:
display fb events - email testimonial #2

Eric said:
display fb events - email testimonial #3

Ruocco said:
display fb events - email testimonial #4

6.3 From Facebook Messages

Andrew said:
display fb events - fb message testimonial #1

Ward said:
display fb events - fb message testimonial #2

Jasmin said:
display fb events - fb message testimonial #3

Brendon said:
display fb events - fb message testimonial #4

7.0 Download the Complete Source Code

7.1 Getting the 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 any BUY button below.

7.2 Download the BASIC Source Code

The BASIC source code is the complete source code of our step by step tutorial above. But if you need more features, refer to section 7.3 and get that code.

7.3 Download the PRO Source Code

The PRO live demo shows Ed Sheeran’s gigs from his Facebook event link: https://www.facebook.com/EdSheeranMusic/events

TO SEE THE PRO LIVE DEMO, CLICK HERE

The PRO source code will give you the following features:

✔ “Load more” events automatically as you scroll.
✔ Responsive layout, great for mobile devices.
✔ Display upcoming events only.
✔ Display past events only.
✔ Display all events within a date range.
✔ Use it for different type of platforms. (WordPress, Weebly, Wix, Drupal, Joomla, etc.)
✔ Show event date and time.
✔ Show event in calendar view (responsive and great for mobile devices too!).
✔ Show number of attendees.
✔ Display attendees of your event with name and link to their profile.
✔ Display event cover photos, if it doesn’t exist, it will display the page primary picture.
✔ Change order of events from newest to oldest or vice versa (no auto load more).
✔ Link to actual Facebook event.
✔ Display map of your event using Google Maps.
✔ Free source code updates.
✔ Free email support.
✔ More features will be added soon.

7.4 More Reasons to Get it

I also want to highlight other benefits and WHY you should get our code here.

✔ Low price, but high quality code and support.
✔ Buy only once, use on unlimited number of websites and Facebook pages!
✔ No different kind of licenses.
✔ No different pricing schemes.
✔ No monthly or any recurring fees.
✔ No need to rely on another website to render Facebook events.
✔ No need for codes from other websites.
✔ You can learn more how to code.
✔ Familiarize yourself with the Facebook Graph API.
✔ Features are constantly improving, and you get it for free.
✔ Completely customizable. Wanna change colors? icons? display sizes? No problem!

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 How To Use It with WordPress?

If you’re using it in a widget, you can just put the source code in a wp-fb folder, and use iframe to load it in your page.

More details coming soon.

7.7 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:

8.1 Display Facebook PHOTOS on Website

8.2 Display Facebook FEED on Website

8.3 Display Facebook VIDEOS 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!

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

Loading comments...