Display Facebook Events On WordPress or 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 – related tutorial .

Today we’re gonna talk about how to display Facebook Page events on WordPress or any website made with PHP source code that we can customize.

Here’s a summary of what our code does:

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 Graph API!

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

3. Show some awesome UI powered by Bootstrap.

 

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 in your fan page, it will be automatically reflected to 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.

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: Build an FQL query to get the events

Now we’ll have to build an FQL query, the query below will get all the Facebook events in your page.

Important note: I assume (’cause I can’t test every event date) that most events created and dated before 2014 will not be seen. I don’t know why but that’s how the Facebook graph API works now.

There are lots of Facebook API changes and update these past couple of years, like this one. I think Facebook had a database redesign that time, and some data didn’t make it with the update.

$fql = "SELECT
            eid, name, pic_big, start_time, end_time, location, description
        FROM
            event
        WHERE
            eid IN ( SELECT eid FROM event_member WHERE uid = {$fb_page_id} )
        ORDER BY
            start_time asc";

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.

$json_link = "https://graph.facebook.com/fql?q=" . urlencode($fql) . "&{$access_token}";
$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);

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 = $obj['data'][$x]['pic_big'];
$eid = $obj['data'][$x]['eid'];
$name = $obj['data'][$x]['name'];
$location = $obj['data'][$x]['location'];
$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>";

Now that we’re done with the code above, we have to see the final output, SEE THE LIVE DEMO HERE.

How To Display All The Past Events?

To display all past event, just add the following on the WHERE clause of our FQL query:

start_time < now()

Important Note: 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.

SEE THE LIVE DEMO HERE.

How To Display The Upcoming Events?

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

start_time >= now()

SEE THE LIVE DEMO HERE.

What People Have Been Saying About This Code?

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

“Amazing tutorial.” – simonerama

“Hello and THANK you this this amazing work! :)” – Sergio

“Thanks for this nice script!” – n0Fear

“Hi Mike, thanks for the great script” – Bas Koole

“It’s working great :)” – Sebastian

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 button below.

You can get all the four PHP files I used to display the index page, all events, past and future Facebook page events, free code updates and free email support from me as well. DOWNLOAD THE SOURCE CODE by clicking the green button above.

Thanks for your support, it keeps this website alive!

You Don’t Like Coding?

That’s okay, I’m here to help you! I can set this up on your WordPress website, or any website that you have. I can change the look and feel (like font and link colors) the way you want it for a small fee!

Please note that this product and service is different from the downloadable source code above.

You can see an overview of this product by viewing a live demo here.

The fee is nothing compared to the value this feature can bring you, or income you can get from your website project or business. Just send me an email to ninjazhai30@gmail.com or send a message to our Facebook page if you want a 7-day free trial.

Thanks for visiting our tutorial on how to display Facebook events on WordPress, on any website made with PHP, or HTML.

The Code of a Ninja Resources

  • http://www.smehelper.com/?ref=facebook-events-code-for-your-website Small Business Helper Limited

    Will this work for a Facebook BUSINESS Page?

    I’ve struggled with getting a Charity’s Facebook Business Events Calendar to synchronise with Google Calendar on their website.

    It seems Google Calendar likes ‘personal’ Facebook URL’s (found via Facebook>Events>Export) but doesn’t like Facebook’s ‘Business Page’ URL’s Note the slightly longer UID in the following Facebook Business Page for above said example…
    webcal://www.facebook.com/ical/u.php?uid=785985561&key=AQDd5WNUGMUz3HeN

  • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

    Hmmm are you talking about facebook business accounts? Sorry I haven’t tried it yet since I don’t have one.

    Please note that this script works with facebook pages only, not personal fb account.

    Thanks for your comment. :)

  • http://www.blogger.com/profile/13276565579792782759 Beat Culture Evolution

    Is there a way to show events from multiple facebook users?

  • http://www.blogger.com/profile/13276565579792782759 Beat Culture Evolution

    Is there a way to post events from multiple users?

  • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

    @Beat Culture Evolution: It is possible to show events from multiple fan pages but not personal profile accounts. You just have to do another query with your other fan page id specified.

  • http://www.blogger.com/profile/00011169180057546403 heyitshenryy

    you saved my life! one question.. is there a way to make the events clickable so that users are taken to the actual events when they click on them?

  • http://www.blogger.com/profile/00011169180057546403 heyitshenryy

    not to sound like a total noob, although i am, is there a way to do this automatically when a new event is created? I’m creating a fan page for a client, and don’t want them to have to constantly update the page. i’ve tried googling it and got nothing.

  • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

    @heyitshenryy: You just have to wrap each event record with an href to a link to something like https://www.facebook.com/event.php?eid=198530676864407, where 198530676864407 is the event id.

    what do you mean “way to do this automatically when a new event is created”? in this script, once the fan page owner updated his events, it will be reflected automatically to his website.

  • lsm007

    Can I call the “city” that the event is hosted in? I checked the API documentation and it said to use $values['venue']['city'], I think…but that’s not working. Thoughts?

  • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

    @lsm007: You may try to Edit your event and choose “Add street address” option to specify your city and then save changes. And in our script, call $values['venue'].

  • Rich

    Hi, relative noob im afraid. I’ve got the above working when I go to domain/events.php, works great. However, I know want to call the script from my menu_7.html file. Any ideas?

  • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

    Placing this script in a .html file won’t work. You have to place this script in a .php file.

  • http://www.blogger.com/profile/05736312391762137487 Roy

    Is there a way of displaying an RSVP button along with the event descriptions? Does anyone know?

  • Rich

    Thanks Mike, ive put the script in events.php and it works fine when i go to http://www.domain.com/events.php. Prob is I have a events menu item on my site that is menu_7.html. I want to be able to call events.php from that html file.

  • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

    @Roy: Thanks for your comment but I haven’t tried that, sorry…
    @Rich: Do you mean you want to call http://www.domain.com/events.php via link? as in something like this href link

  • http://www.g6club.co.uk/ Rich

    Hi Mike, thanks for your patience! If you take a look at http://www.g6club.co.uk and click the events menu option you’ll see i’ve got included a hyperlink to http://www.g6club.co.uk/events. What I want to do is skip the link and have the FB events listed directly in that page…

  • Andrew

    This is exactly what I require but in asp.net. Do you know of a link where I can find an asp.net version of do you have one?

    Thank you

  • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

    @rich: currently, i see the event menu link is in http://www.g6club.co.uk/index.php?p=1_7_Events, not in http://www.g6club.co.uk/events.php

    i guess you want to include http://www.g6club.co.uk/events.php on your index.php, if you’re familiar, you can try something like include ‘events.php'; at the content part of you index

    @Andrew: Sorry man I only tried this with PHP. But I believe that there’s also a facebook sdk for asp.net and just use the same approach I used here.

  • Rich

    Hi Mike. Yeah, theres a link in 1_7 events to take you to events.php. What I want is to get rid of that link… have the results from the php show up directly in 1_7.. I’ll check out include, thanks.

  • http://www.blogger.com/profile/00775235854104724890 curtains88

    Hi Mike,

    I’ve replaced the app id & secret with my own, however my page events are not appearing. Am i missing a step? Is there a certain way to integrate facebook pages with apps?

  • Anonymous

    Is there a way to make the events display from newest to oldest instead of the other way round?

  • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

    @Anonymous: maybe you can use the ORDER BY clause in ascending or descending order?

  • SG

    I got an error like “Fatal error: Call to undefined function: date_default_timezone_set() in C:inetpubvhostshttpdocsfacebooktestindex.php on line 19″

  • Anonymous

    HI Mike,

    I really can’t get this to work!

    Any offline paid support?

    David Stump

  • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

    @SG: I think your PHP version is out of date.

    @David Stump: possible, please use the Request form of this site for your inquiry :)

  • http://www.blogger.com/profile/14060148100623814536 souzapaul

    Hi Mike,

    Can the code be edited to also display events(created by others) that you have shared on your FB page

  • http://www.blogger.com/profile/14060148100623814536 souzapaul

    Q2 : How can i add multiple E Id’s

  • Romymk

    Great script. Thank you. However, I do have a question: How do I exclude past events from the list?

  • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

    @souzapaul: I think its a yes. as long as it is a public event. you have to do multiple queries. For your Q2, “WHERE eid IN ( SELECT eid FROM event_member WHERE uid = 221167777906963 )”, this part of the script actually allows you to add multiple eids.

    @Romymk: maybe using the LIMIT clause on your sql query?

  • http://www.blogger.com/profile/14060148100623814536 souzapaul

    Ok Mike, I am not a developer so pls.

    Edit the code to Display All events that are shared on Fb page http://www.facebook.com/partygoa
    and also use the limit clause to exclude past events,

    Tell me how much to donate towards your site

    send the code to souzapaul55@gmail.com

  • http://www6.luc.edu/test/cabplan/facebook_events/index.php Chris

    So I downloaded the zip file uploaded all the files, created a FB app added all the id and secret content but the page is not not producing any content: http://www6.luc.edu/test/cabplan/facebook_events/index.php

    Can you help?

  • http://www.blogger.com/profile/12535287096056153035 Christina

    FINALLY! I have been searching for a solid three weeks and could not find anything that worked. THANK YOU SO MUCH FOR THIS. My client will be ecstatic!

  • Romymk

    Thanks Mike. Actually using ‘AND start_time > now()’ worked for me.

  • http://www.blogger.com/profile/12349602767407942872 Craig Gallup

    Mike how can you list the events from newest to oldest?

  • Anonymous

    Hey, thanks Code Ninja! It took me much longer than it should have to get this working but it was because despite having a degree in CompSci, I don’t do this type of stuff nor did I know if I was talking to FB correctly. The Examples and tests phps didn’t work for me but the index.php worked great. So after spending time on all of that stuff I figured out some very basic directions:

    1. create the app (like you said), I put in facebook.com/mypage/events in for web page

    2. save the code zip file and extract it, edit the index.php file: you will need the code and secret from the app you created in step 1, AND you will need the UID for the web page. If you don’t know it you can get it from one of the other iframe apps like the like’ button for your website.

    3. in index.php , put in your code and secret where it says, and also change your uid lower in the doc. save.

    4. upload index.php and the folder fb-sdk folder. to some place on your server.

    5. test the page.
    -Mike Quick

  • Anonymous

    PS> is there any way to REVERSE the listing so the newest events are at the top ?

  • Anonymous

    @Chris, check our UID, it may be wrong, that was my issue.. I was using the App ID instead of the page id.

  • Mike Quick

    @souzapaul, I just tried changing the following in index.php to show the top most recent events, thats all I need:

    $fql = “SELECT name, pic, start_time, end_time, location, description

    FROM event WHERE eid IN ( SELECT eid FROM event_member WHERE uid = 124398140915524 )
    ORDER BY start_time DESC LIMIT 0,10″;
    // ORDER BY start_time asc”;

    -Mike Quick

  • Mike Quick

    Do you think this could be also used to grab wall posts etc?

  • Anonymous

    Hi Mr Dalisay,

    i am not really into the material, so i dont get it: what are the steps that i need to do to display the events of my fansite to my existing webpage?
    Could you help me?

    Thanks a lot

    Shakermaker

  • Anonymous

    Now i got it, but how can i only show comming events?

  • Anonymous

    Ok I got this to show the events of a Group and personal facebook profile but I cannot get this to produce events of a Page created for the business, how do i configure the php to show a FB page events?

  • http://www.harpersstatuary.com/ Sam C.

    I have my website displaying facebook events from my facebook page thanks to Mike Dalisay!!

    Website:
    http://www.harperslawnornaments.com/index.php?page=504#Sales/Events

    Synced with this page:
    http://www.facebook.com/HarpersStatuary

    Tweaked the script a little, but all credits still go to Mike!

  • http://www.blogger.com/profile/10596471667962564449 Unknown

    I have the code working but I would like to group events together like facebook such as…
    Today
    This week
    Upcoming
    Ongoing
    How would I change the code to achieve this???

  • Anonymous

    I got this error on your plugin:

    Caught exception: Protocol https not supported or disabled in libcurl

    Any ideas?

  • http://www.blogger.com/profile/13878822802557675230 Szotyesz

    Hi! Try url address with http only, without ‘s’ (means secret)

  • http://www.zelink.com/ Alain

    Thank you so much for this. Been digging through the SDK and tutorial all day and I just couldn’t find my way through them.

    I see that there are lots of “thank you” comments. You can be proud !

    Alain, Paris, France.

  • http://www.blogger.com/profile/10596471667962564449 Unknown

    Does anyone know the code that unknown wrote earlier?
    “I have the code working but I would like to group events together like facebook such as…
    Today
    This week
    Upcoming
    Ongoing
    How would I change the code to achieve this???”

    Thank you all for your help!

  • http://www.petrivirta.com/ Petri

    Script is working great!

    But how can I show only upcoming events? Now it’s showing all the events.

  • http://www.adityakumarnayak.com/ Aditya Nayak

    Yeah, Any clue on how to do what Unknown is saying? Also, is there a way to link to each individual event?

    btw Thanks a lot for this tutorial.

  • http://www.mosik.info/ MMM

    thanks, works fine so far… two things:

    1) how do i translate the date into another language (german, french…)?

    2) how to get street and city for the location? when i put in “venue” instead of “location” it outputs “Array”…

    thanks in advance for any help!

    • http://www.blogger.com/profile/04177387402851697117 Arthur Permis Levyssohn

      MMM…..is yourproblem solved regarding point 2, because I have the same problem…!!

  • http://www.blogger.com/profile/10081195360455916531 StreathamMike

    Thanks for this Mike – It’s very useful.

    @Aditya Nayak asked is there a way to link to each individual event?

    As Mike said in his reply to @heyitshenryy: “You just have to wrap each event record with an href to a link”

    Obviously you will first need to find the eid value of the event to create the link. You get this by simply adding “eid” (without the quotes) to the SELECT statement.

    I used the following to select the next three events – change the LIMIT number to get the number of events you need (NOTE: using end_time > now() ensures that today’s events are included in the list but not past events)

    $fql = “SELECT eid, name, pic, start_time, end_time, location, description
    FROM event WHERE eid IN ( SELECT eid FROM event_member WHERE uid = 123456789012345 ) AND end_time > now()
    ORDER BY start_time asc LIMIT 0,3″;

    I made each event clickable by adding a href link to the //printing the data section around the whole <div class=”event”> element:

    i.e. I changed

    //printing the data
    echo “<div class=’event’>”;

    to

    //printing the data
    echo “<a href=’https://www.facebook.com/events/{$values['eid']}’ title=’Click for more details on the Facebook Event page’><div class=’event’>”;

    and I closed the link by changing the last line of this section from

    echo “</div>”;

    to

    echo “</div></a>”;

    I hope this helps.

    • Anonymous

      This was really helpful, thanks!

  • http://www.propz.de/ Wella

    Hey

    This code ist really awesome and i just built it into my page and formatted it like i wanted to. But I only get it worked wth your “page id”.

    The Fanpage that I wanted to display is -> http://www.facebook.com/clubsams

    I simply have to copy the Fanpage-ID or not? Or it’s the APP-id? User-id? And put it on the SQL Query?

    like: … IN ( SELECT eid FROM event_member WHERE uid = 318385904895 ) …

  • http://www.blogger.com/profile/07246005780530041545 MX Brothers

    @Wella

    You need to change te uid to your fanpages uid. Hereis where you can find it on fb http://reface.me/hacks/your-facebook-uid/ be sure to check the update

    You also need to change the app id & the app secret to the ones you created on https://developers.facebook.com/apps/?action=create

    • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

      Thanks for your helpful inputs @MX Brothers!

  • Anonymous

    Hi.
    Like Wella, I think this feature is awesome. BUT. I dont have any Appid, as I have made my fan page without developer.
    So what I really have is a url and thats it.

    Is it possible for me to show the events on my website?

    • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

      If you’re using wordpress, maybe you can use this plugin http://wordpress.org/extend/plugins/facebook-events-widget/, it was based on the script above.

      Other than that, you have to create an app on facebook and follow the steps I gave above..

  • Anonymous

    This is great. Thank you… but…

    Instead of events, I’m getting the below errors. Any ideas?

    “Warning: session_start() [function.session-start]: Cannot send session cookie – headers already sent by (output started at /index.php:9) in /fb/src/facebook.php on line 37

    Warning: session_start() [function.session-start]: Cannot send session cache limiter – headers already sent (output started at /index.php:9) in /fb/src/facebook.php on line 37″

    • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

      Hi, please check if you have multiple session declaration…

  • http://www.blogger.com/profile/09699516700162729719 Pontus

    Hi, i get the events on my webpage but the i want the timeformat to be 24H and the language to be in swedish on the name of the days and months. How do i fixe this?
    Regards
    Pontus

  • http://androidforum.cz/ s0uky

    Hello,
    for first – thank you for script, it’s very good job!
    And now I need little help…
    Is it possible import from FB only future events, not past?

    Thanx

    • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

      You’re welcome @s0uky! Yes, that’s possible, I think our fellow @StreathamMike already answered your question. Please see his post below.

  • http://www.blogger.com/profile/10081195360455916531 StreathamMike

    @s0uky,

    To display future and current events only – but not past events – an addition to the $fql SELECT statement is required, as mentioned in my earlier post above.

    If you add “AND end_time > now()” to the end of the SELECT statement this will ensure that past events are not displayed:

    Example:

    $fql = “SELECT eid, name, pic, start_time, end_time, location, description
    FROM event WHERE eid IN ( SELECT eid FROM event_member WHERE uid = 123456789012345 ) AND end_time > now()
    ORDER BY start_time asc LIMIT 0,3″;

    Please Note: as Facebook is based on California time – which was set in this php code at the start – you need to adjust the end_time part of the statement above if you are not in California.

    Example:

    California is GMT-8 hours so as I’m in London I need to add 8 hours to the Facebook end_time to get it to match my local time – so the end time statement becomes:

    AND end_time > now()+(8*60*60)

    Note: Time is calculated in seconds so we have the time difference from California of 8hours x 60minutes x 60 seconds.

    Of course you need to calculate the time difference in your local area for this to be correct for you. Just replace the 8 in the statement with the time difference in hours from California – 9 for CET for example.

    By using the event end_time rather than the event start_time your webpage will display events which are still current. If an event is on from 10am – 4pm it will be displayed on your web page until 4pm – after which time it becomes a past event and will no longer be shown.

    Regards
    Mike

    • http://androidforum.cz/ s0uky

      Thank you! I’ll try it.

      I done it with PHP function strtotime().
      It works too, but it’s little bit complicated:

      $start_time = date( ‘g:i a’, $values['start_time'] );
      $end_time = date( ‘g:i a’, $values['end_time'] );

      $datum_akce = date(‘j-n-Y’, $values['start_time']);
      $aktualni_datum = date(“j-n-Y”);

      if (strtotime($datum_akce) >= strtotime($aktualni_datum)) {
      //printing the data

    • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

      Hi @StreathamMike, thanks for giving your helpful input!

  • http://www.pagecentral.com/ Joe

    Alright, galleries and events, pretty easy, how about status’? I fake code pretty well and I’m good at reading it, but my strong suit is design and frontend tech, so bear with me…

    I’ve got my select statement:

    SELECT message FROM stream WHERE source_id=PAGE_ID AND actor_id=PAGE_ID

    I’ll probably build on this once I get this working, but I assume I can add various element from a status, such as image, timestamp, etc. I need to create variables for each of these then output them to the HTML with a little CSS. Anythign I’m missing?

    I’ve been doing some research that says you can’t pull imagery or links from status, but I would think if you have permission and pull the gallery, then you should be able to grab that img ID somehow.. any ideas or tips?

    I’m a newbie to FQL, so any help is appreciated.

    • http://www.pagecentral.com/ Joe

      I was able to get this simple statement working, I even added a couple parameters to grab the timestamp, name, and a couple other things. What I couldn’t figure out was how to pull over pics. the more I searched through Fb Developer network, the more I kept running into the same script: fbWall.

      Given some time and maybe some help from a better developer than me, I probably could have eventually got it, but this script does exactly what I want it to. I may try and deconstruct the script to see what I still needed to do in order to get it to work.

    • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

      Hi @Joe, you mean you want to pull also the links and thumbnails of a wall post? How about just using the FB like box with stream enabled? https://developers.facebook.com/docs/reference/plugins/like-box/

    • http://www.pagecentral.com/ Joe

      Like box and actually fan box have too many limitations first and foremost width and style requirements. fbWall eliminated all that it allows you full control over the feed enabling you to easily customize every part to better fit your site and design needs.

  • http://www.blogger.com/profile/07855725823550532625 barney

    Thanks for this Mike – It’s very useful, good job.
    My question is if you can give me some instructions regarding how to place an fb event attending button on my webpage? I searched for it many places, but nothing useful yet. Thank you in advance.

    • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

      Hi barney, you’re welcome. I haven’t tried that feature yet and I’m not sure if that’s possible. For now, you can just link your users to your FB events page.

  • loMB

    Hi, unfortunately it’s not working for me.
    I don’t understand where I can find the APP_ID_Secret for “Events” – this is a Facebook App – how can I get a secret ID to that public APP?
    The appID for Events is ‘2344061033’ is there more?
    On my developer Page I see the appID and the secret ID all of my fanpage working apps …but those one are useless here I guess :-(
    I think I missed some important things here ;-) Anybody who can help me?

  • loMB

    Hi Mike
    I have found what I have make wrong – I haven’t us the same directory structure to the facebook library….shame on me :-)
    No it’s works very good. Great that u share that knwoledge! Thanks a lot
    loMB

    • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

      I’m glad it helped. :)

  • Anonymous

    I want to use this on a site but I am having a hard time understanding APP Ids. I don’t own the Facebook account or web site I am using. Would I need to log in to Facebook under my clients name, create a ID with that? Then this ID is associated with that user? Or do I create an account for development purposes with Facebook and then I can develop for other sites with one ID. Just don’t understand how myself, the website and Facebook all interact.

  • Anonymous

    This is a great code sample. Many thanks for posting. I have been trying to create an equivalent snippet using JavaScript. Unfortunately the ‘select’ statement seems to blow up.

    As a test I ran
    “SELECT name, venue, location, start_time FROM event WHERE eid = xxx”. This works.

    However ‘SELECT name, pic, start_time, end_time, location, description FROM event WHERE eid IN ( SELECT eid FROM event_member WHERE uid = yyy ) ORDER BY start_time asc” does not seem to work

    Here is the code snippet. Any ideas

    FB.api(‘/event’,function(response)
    {

    var fql_query = ‘SELECT name, pic, start_time, end_time, location, description FROM event WHERE eid IN ( SELECT eid FROM event_member WHERE uid = xxx ) ORDER BY start_time asc';

    alert(fql_query);

    var query = FB.Data.query(fql_query);

    query.wait(function(rows) {
    //
    alert(‘query results’);
    });

    });

  • http://www.blogger.com/profile/14598107554392137263 Doug

    How would I add a login to facebook and then get the events of that user (not a specific events page)

  • http://www.blogger.com/profile/02772563650537612736 Mr. T

    Thank for a job well done.
    Pls i want to be able to get information from Facebook with the keywords on Nigeria, Events, Wedding, Make Up Artists, Mobile Network, Photographers etc. This is not just on a particular fan/friend. Kindly assist

  • http://www.facebook.com/aurorableu Aurora

    I’m sorry. I really want to use this for my website, but I have no idea how to even get started using these type of things. is their a video or can you walk me thru the steps of putting this where it needs to go> I absolutley am clueless when it comes to this stuff.

  • Anonymous

    How i can use it in a wordpress blog?
    Can you help me please!? Thx a lot

  • http://www.blogger.com/profile/10460088774673618958 ali croft

    Excited to say I’ve been able to take your code and actually implement it, so, before I ask a question–THANK YOU!

    Here’s the page that will have the Facebook Events feed: http://alicroft.com/empresscal/
    It should be pulling data from: http://www.facebook.com/TheEmpressRva?sk=events

    Not sure why, but I’m getting a display of old events. Note that the first four events on my site’s feed are outdated, and if you visit the Facebook page it is supposed to be pulling from, you’ll see there is a new event (Best of Richmond Thank You at The Empress) that it isn’t listed on my custom feed. Any help would be greatly appreciated!

    • http://www.blogger.com/profile/10081195360455916531 StreathamMike

      Ali,

      In order to display only current and future events you need to add “AND end_time > now()” to the end of the SELECT statement:

      For details please see my post in reply to @s0uky on Jan 29 above.

      StreathamMike

  • Luxuskern

    How can i translate the Month and the Day in German ? i find no answer :( please can you help me?

  • http://www.blogger.com/profile/04177387402851697117 Arthur Permis Levyssohn

    Dear Mike,

    Thanks for your tutorial:

    It works great, but just have a question concerning startdate/starttime and enddate/endtime.

    I add an event which start at 07 april at 21:30 and ends at 08 april 01:00. But at the site it shows only:” on Sunday, April 08, 2012 – 5:30 am to 10:00 am “

    see: http://jackkunkels.nl/Display-Facebook-Events-To-Your-Website-with-PHP-and-FQL/

    facebook: http://www.facebook.com/pages/jackkunkels/162678887146825?sk=events

    How can I change this in index.php

    Thanks in advance
    Arthur

    • http://www.blogger.com/profile/10081195360455916531 StreathamMike

      Arthur,

      Remember that Facebook uses California time.
      Please see my Reply to @s0uky on Jan 29 above.

      It should help you.

      StreathamMike

    • http://www.blogger.com/profile/04177387402851697117 Arthur Permis Levyssohn

      Hee Jeroen,

      Heb je al een oplossing ?

      Groet
      Arthur

    • http://www.blogger.com/profile/04177387402851697117 Arthur Permis Levyssohn

      Hee Mike,

      I did some alterations with:

      $fql = “SELECT eid, name, pic, start_time, end_time, location, description FROM event WHERE eid IN ( SELECT eid FROM event_member WHERE uid = 162678887146825 ) AND end_time > now()+(9*60*60) ORDER BY start_time asc LIMIT 0,3″;

      But still the output is California time….

      Please can you help Jeroen en me…!!

      Thanks
      Arthur

    • Anonymous

      hoi Arthur,
      oplossing is bizar simpel. In het script van Mike tijdzone op America/Los_Angeles laten staan en je evrnts worden goed getoond.
      Wel rekenen als je een eindtijd exact op het moent van je lijst wil.
      groet Jeroen

  • Jeroen

    Hello Mike,
    thanks for your great script. Works!
    but I seem to have the same problem as Arthur, even if i put my timezone in your script.
    [date_default_timezone_set('Europe/Amsterdam')] http://www.triestos.nl/index.php

    The scripts adds 9 hours??

    What am I doing wrong? Thanks. Jeroen

  • http://www.blogger.com/profile/10081195360455916531 StreathamMike

    This comment has been removed by the author.

  • http://www.blogger.com/profile/04177387402851697117 Arthur Permis Levyssohn

    Hee Mike,

    Jeroen gave me the right answer by set the timezone on America/Los_Angeles. Thanks to Jeroen.

    Just another question: Is it possible to add also the Venue with the google-map for the location ?

    thanks
    Arthur

  • Anonymous

    this is awesome!…. is there an updated version that will work with new facebook?

  • http://www.blogger.com/profile/11650775968378848999 Steve Eldridge

    Excellent script and very well documented.

    My question is that no matter what I do I can not fetch the last three events, I only seem to get the current and future events.

  • Anonymous

    How to make it FQL from events change to share links?

    I changed your coding on the FQL, but the image not work
    Result after changed your coding there
    http://www.miracle-mart.com/FB2

    Since I can post the coding on your blog…
    So I upload the index.php to my blog for your reference what is wrong on it.

    http://explorerhome.dyndns.org/photoevent/index.zip

    Thank you of your time and help and share this coding.

    Best Regards,
    Jimmy Chan
    http://explorerhome.dyndns.org/blog

  • http://danielgc.com/ Daniel Gutierrez

    Thx for this code!
    How can I add an option to translate the dates? I’ve seen that two people asked the same thing but no answer yet at least on this page ;) Isn’t something as easy as a param ? Thx in advance!

  • Jonathan

    This is great and works well, but I’d like to list the profile image of those attending each event.
    Any idea of how I could add that to the code so when each event lists, it shows perhaps a random 5 people who have marked the event as ‘attending’?

  • http://www.tolifemag.co.uk/ Jae

    Hi, I have managed to create an app on facebook and fill in all the boxes in the widget.

    But nothing is showing up on my webpage. – Should i wait for you to get the codes up on your index.php file?

    Thanks

  • http://www.blogger.com/profile/04177387402851697117 Arthur Permis Levyssohn

    Heee Mike, The +9 hours doesn’t work anymore, how come…>

    Still has the code:

    $fql = “SELECT eid, name, pic, start_time, end_time, location, description FROM event WHERE eid IN ( SELECT eid FROM event_member WHERE uid = 162678887146825 ) AND end_time > now()+(9*60*60) ORDER BY start_time asc LIMIT 0,3″;

    and date_default_timezone_set(‘America/Los_Angeles’);

    He doesn’t raise the time with 9 hours…!!!

    greetz
    Arthur

  • http://www.blogger.com/profile/04177387402851697117 Arthur Permis Levyssohn

    oke I already has the answer…

    date_default_timezone_set(‘America/Los_Angeles’); is working, so I changed it by date_default_timezone_set(‘Europe/Amsterdam’);

    sorry for bothering you

    Arthur

    • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

      No, no, thanks for sharing your fixes Arthur, I really appreciate it! :)

  • http://www.tolifemag.co.uk/ Jae

    Hi, Just asking once more, why the events has not showed up on my page?

    I created an app on facebook, and entered all the information into the widget.

    Is there anything more to do from here?

  • http://www.blogger.com/profile/17299674427598168203 JJJDP

    Hello Mike,

    Im trying to instal you app in heroku but i cant see the events. can you help me?

    The link to my app is: http://electric-leaf-6369.herokuapp.com/

    Tks

  • http://www.blackdaycreative.com/ ira

    On July 5th, Facebook changed something with the timezones and now I am getting December 31, 1969 for all event dates. Is anyone experiencing this?

    I even get the wrong dates using the sample files downloaded above, put directly on my server, unedited (aside from app id, etc). However, the live demo seems to be fine. How?

    Thanks.

    • http://www.blogger.com/profile/01781405171120079333 Alvaro Rubio Casanueva

      A week ago i was running the app ok, but since two days ago all dates show Dec 31 1969!

  • http://www.blogger.com/profile/12267995700088997942 L A Little

    I’m having the December 31, 1969 issue as well. Has anyone come up with a fix?

    • Anonymous

      got the same problem! please some help here!

  • Anonymous

    I only say Mike Dalisay You are The BEST BEST BEST. Thank you

  • http://www.blogger.com/profile/02631822829248727138 anoniem

    Dear Mike, thanks a lot for this tutorial. I have one question. Is it also possible to let people react to an event from your website. I want the option that people can give up their RSVP from my website, so they don’t have to go to Facebook.

    Kind regards, dennis

  • http://www.blogger.com/profile/18359420703780837922 admin

    I have another question… Can I display a message if there are no upcoming events?

    • http://www.blackdaycreative.com/ ira

      Yes, that would be excellent. How to do that?

  • http://www.blogger.com/profile/02037359763403007117 vitthal

    Hi Mike,
    I have a question for you.
    Instead of Facebook Pages, Can we create and export events from a Facebook Application?
    I had created an app in Facebook, and I want to create/export events from facebook to my website and also from my website to facebook app.
    Is this possible?
    Please Help!

  • http://dirtypoprocks.com/ Barry

    Thanks for the script! This is a huge time saver! Unfortunately, I am having trouble with calling the venue. I have added venue to the SELECT query. When I call it by using echo $value['venue']; it returns “array”. When I call the city with echo $value['city']; nothing is returned. HOWEVER, other queries work perfect (name, description, start_time, and location).

    Not sure if this is from how I am creating the event? I am tagging a business in the “where” field when I create the event. The address shows in the event, but it will not let me get the city and state.

    I’m new to all of this; sorry if this is a stupid question. :(

    Any suggestions?

  • http://www.blogger.com/profile/14287898314833948522 Maulik Suchak

    Hello Mike,

    I really neeed your help man!

    In your Photo Album post, I am getting following error,

    Please help me to solve it…

    Fatal error: Uncaught Exception: 102: Session key invalid or no longer valid thrown in /Applications/XAMPP/xamppfiles/htdocs/facebook/fb-sdk/src/facebook.php on line 515

    suchak.maulik179@gmail.com is my email ID. Please some one help me to solve it.

  • http://www.blogger.com/profile/05733400401287031490 Mike Dalisay

    Hello guys, I think the reason for most of the problems we are having here is because of some inconsistencies in Facebook APIs, in which we don’t have any control of.

    You can always be updated by visiting their documentation pages. Just like here, please take a look at their “Events Timezone Migration Note” https://developers.facebook.com/docs/reference/fql/event/

    Thanks!

  • ninjazhai

    How about writing your event in your own language (other than english)?

  • ninjazhai

    are you sure you set up the start date/time properly?

  • ninjazhai

    how long does your fb page exist? is it public? or has any age restriction?

  • Bartek Talar

    Hi there.
    I have a question. how to replace that instead of a thumbnail display cover?
    greet.

    • ninjazhai

      Hey @bartektalar:disqus , good suggestion, please try to look at the events table, there should be a ‘cover’ photo field or something that you can try to access!

      • Bartek Talar

        Hi!

        The problem has been resolved.
        just under $ FQL = “SELECT pic_cover add and link the image looks
        src = {$ values ​​['pic_cover'] ['source']}

        fb good job! :)

        • ninjazhai

          Hey @bartektalar:disqus , thanks for sharing your solution!

  • http://www.creactive.cz mirek molin

    Hi, any ideas how to get only PAST EVENTS too?
    I tried this fql query, but it doesn’t work:

    start_time < now()

    Upcomming events works fine.
    Thanks

  • Paul

    Hi, it is very great tutorial but I faced with problem that I can’t solve, I tried to launch my page with my app id and secret and with my page id but I got this: http://vivaretro.hol.es/event/ just everithing goes blank

    here is the code:

    Display Facebook Events to You Website

    ‘331817830310323’,

    ‘secret’ => ‘4b90b95abc7c3e3a0c68f4f583982911′,

    ‘cookie’ => true

    ));

    /*

    *-Query the events

    *

    *-We will select:

    * -name, start_time, end_time, location, description

    * -but there are other data that you can get on the event table

    * -https://developers.facebook.com/docs/reference/fql/event/

    *

    *-As you will notice, we have TWO select statements here because

    *-We can’t just do “WHERE creator = 132064480282039″.

    *-Only eid is indexable in the event table

    * -So we have to retrieve list of events by eids

    * -And this was achieved by selecting all eid from

    * event_member table where the uid is the id of your fanpage.

    *

    *-Yes, you fanpage automatically becomes an event_member once it creates an event

    *-start_time >= now() is used to show upcoming events only

    */

    $fql = “SELECT

    name, pic, start_time, end_time, location, description

    FROM

    event

    WHERE

    eid IN ( SELECT eid FROM event_member WHERE uid = 221167777906963 )

    AND

    start_time >= now()

    ORDER BY

    start_time desc”;

    $param = array(

    ‘method’ => ‘fql.query’,

    ‘query’ => $fql,

    ‘callback’ => ”

    );

    $fqlResult = $facebook->api($param);

    //looping through retrieved data

    foreach( $fqlResult as $keys => $values ){

    /*

    * see here http://php.net/manual/en/function.date.php

    * for the date format I used.

    * The pattern string I used ‘l, F d, Y g:i a’

    * will output something like this: July 30, 2015 6:30 pm

    */

    /*

    * getting start date,

    * ‘l, F d, Y’ pattern string will give us

    * something like: Thursday, July 30, 2015

    */

    $start_date = date( ‘l, F d, Y’, $values['start_time'] );

    /*

    * getting ‘start’ and ‘end’ time

    * ‘g:i a’ will give us something

    * like 6:30 pm

    */

    $start_time = date( ‘g:i a’, $values['start_time'] );

    //printing the data

    echo “”;

    echo “”;

    echo “”;

    echo “”;

    echo “”;

    echo “{$values['name']}”;

    /*

    * -the date is displaying correctly, but the time? uh, sometimes it is late by an hour.

    * -it might also depend on what country you are in

    * -the best solution i can give is to include the date only and not the time

    * -you should put the time of your event in the description.

    */

    echo “{$start_date} at {$start_time}”;

    echo “{$values['location']}”;

    echo “{$values['description']}”;

    echo “”;

    echo “”;

    echo “”;

    }

    ?>

    I tested to comment some rows and it seems like problem appears when php comes to this row:
    $fqlResult = $facebook->api($param);

    Do you have ideas why it is so?

    • ninjazhai

      Hey @Paul, there are some change in Facebook’s system right now, I will update his post asap. I think that is what’s causing the problem. Please connect with us via FB or twitter for the updates, thanks!

  • Nicolas Leitgeb

    Hey Mike, i hope this is still working in general and you can help me. I wanted to integrate this into my homepage but it doesnt work, so i tried it standalone but i only get a blank site with the header… whats wrong there, i used ur code here and did every step very carefully…

    • ninjazhai

      Hello @nicolasleitgeb:disqus, I think there are some changes in Facebook’s system right now. I will have to update this article asap. Keep up with the updates by connecting with us via facebook or twitter, thanks!

  • Andrew Clark

    This no longer works with the new facebook php sdk. Any chance of the article being updated?

    • ninjazhai

      Hello @disqus_l8035fmf9x:disqus, thanks for bringing this to my attention, I’m going to update this article asap!

      • Andrew Clark

        I found this very helpful: https://www.webniraj.com/2014/05/01/facebook-api-php-sdk-updated-to-v4-0-0/

        With that I could build a page to get auth tokens for the pages I manage. After that put together a script to pull a page’s events out of Facebook: http://www.hdoc.com.au/events.php

        It runs a bit slower than I’d like as it makes two queries to the graph api (one to pull the ids of the page’s events, a second to pull the details of those ids). I could cache the data returned I guess but there’s probably more headaches in that too.

        • ninjazhai

          Thanks for the extra help @disqus_l8035fmf9x:disqus, I appreciate it! I’m gonna look into it and try to make it faster or optimized.

  • ninjazhai

    Hello everyone! I updated the source code and tutorial again (September 3, 2014), I did not use the FB PHP SDK this time. Please let me know if there’s any issue, we’ll look into it, thanks!

    • Iason

      Hi! Love your work! I was refreshing this page multiple times/day for a new guide….However, there is an issue with the demo page

      • ninjazhai

        Hi there @lason! Glad to know you love our work! But what issue do you see in the demo page? Please tell us any error message you see, thanks!

        • Iason

          @ninjazhai it seems to be working now!

  • Paul Mintskovsky

    Hi mike, your tutorials are awesome! Thank you for update for this tutorial =)
    I don’t know why anything isn’t working for me.. Its just go blank http://migrash.org/test.php
    here is a printscreen part of the code:

    • ninjazhai

      You’re welcome @paulmintskovsky:disqus, thanks for using our code here! Regarding your issue, your code looks fine, it’s hard to find out what’s the error if it has no error message… would you try to paste your fb page id?

  • Alan

    Is this outdated? It doesn’t seem to be working

    • Philippe

      followed every step carefully.. doesn’t seem to work for me as well. everything is blank with no error.

      i think it has to do with a setting on facebook dev site?

      • Alan

        It’s weird though because his live demo is still working.. I’ve added more functionality to my site and now this is the last thing to do.. He uses FQL in this, isn’t this depreciated unless your facebook application was created months ago?

        • ninjazhai

          Hello @disqus_Jqj3qiit9f:disqus and @Alan, are you using PHP 5.4+? Would you put error_reporting(E_ALL); at the beginning of your PHP file so that we can see any error message, and tell us here. Thanks!