Display Facebook Events On Website With FQL And jQuery

Published by - @ninjazhai on July 8, 2011
LIKE and SHARE:

Hi guys!I was surprised because many of you requested me to post another PHP and FQL – related tutorial . So here it is, today we’re going to do a script that:

1. Gets events listed with data such as event image, name, time, description, ect. from your Facebook fan page (using Facebook PHP SDK, PHP and FQL).

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

3. Show some hover effects with jQuery.

display facebook events on website

DOWNLOAD CODE
LIVE DEMO

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.

Steps.

Step 1. After creating an app, we’ll have the following codes on our index.php file

Step 1.1: Create our index.php file with basic HTML structure.

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Display Facebook Events to You Website</title>
	
</head>

<body>

</body>

</html>

Step 2: Add some CSS so that our events list will look a little good.

<style type='text/css'>
body{
	font-family: "Proxima Nova Regular","Helvetica Neue",Arial,Helvetica,sans-serif;
}

.clearBoth{
	clear: both;
}

.event{
	background-color: #E3E3E3;
	margin: 0 0 5px 0;
	padding: 5px;
}

.eventImage{
	margin: 0 8px 0 0;
}

.eventInfo{
	padding:5px 0;
}

.eventName{
	font-size: 26px;
}

.floatLeft{
	float:left;
}

.pageHeading{
	font-weight: bold;
	margin: 0 0 20px 0;
}
</style>

Step 3: Set the default timezone to California where Facebook headquarters is near.

date_default_timezone_set('America/Los_Angeles');

Step 4: Initialize the Facebook library. Be sure to change the AppId and AppSecret generated when you created an app.

$facebook = new Facebook(array(
    'appId'  => 'changeToYourAppId',
    'secret' => 'changeToYourSecretId',
    'cookie' => true
));

Step 5: Add some page heading, this is optional but if you do, make sure you change “COAN Dummy Page Events” to your own Facebook page and also changed its link.

echo "<div class='pageHeading'>";
    echo "This event list is synchronized with this ";
    echo "<a href='https://www.facebook.com/pages/COAN-Dummy-Page/221167777906963?sk=events'>";
        echo "COAN Dummy Page Events";
    echo "</a>";
    echo " | ";
    echo "<a href='http://www.codeofaninja.com/2011/07/display-facebook-events-to-your-website.html'>";
        echo "Tutorial Link: Display Facebook Events To Your Website with PHP, FQL and jQuery";
    echo "</a>";
echo "</div>";

Step 6: Now we will query the future events of your page. Change the value of “uid” to your facebook page ID.

$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', strtotime($values['start_time']) );

    /*
     * getting 'start' 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 "<div class='event'>";

        echo "<div class='floatLeft eventImage'>";
            echo "<img src={$values['pic']} width='150px' />";
        echo "</div>";

        echo "<div class='floatLeft'>";
            echo "<div class='eventName'>{$values['name']}</div>";

            /*
             * -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 "<div class='eventInfo'>{$start_date} at {$start_time}</div>";
            echo "<div class='eventInfo'>{$values['location']}</div>";
            echo "<div class='eventInfo'>{$values['description']}</div>";
        echo "</div>";

        echo "<div class='clearBoth'></div>";
    echo "</div>";

}

Step 7: Add some JavaScript for more UI effects. When the user hovers an event, it will be highlighted.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type='text/javascript'>
    //just to add some hover effects
    $(document).ready(function(){
        $('.event').hover(
            function () {
                $(this).css('background-color', '#CFF');
            }, 
            function () {
                $(this).css('background-color', '#E3E3E3');
            }
        );
    });
</script>

Complete Page Code

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Display Facebook Events to You Website</title>

    <!-- Just adding some style -->
    <style type='text/css'>
    body{
        font-family: "Proxima Nova Regular","Helvetica Neue",Arial,Helvetica,sans-serif;
    }

    .clearBoth{
        clear: both;
    }

    .event{
        background-color: #E3E3E3;
        margin: 0 0 5px 0;
        padding: 5px;
    }

    .eventImage{
        margin: 0 8px 0 0;
    }

    .eventInfo{
        padding:5px 0;
    }

    .eventName{
        font-size: 26px;
    }

    .floatLeft{
        float:left;
    }

    .pageHeading{
        font-weight: bold;
        margin: 0 0 20px 0;
    }
    </style>
</head>

<body>
<?php
//we have to set timezone to California
date_default_timezone_set('America/Los_Angeles');

//requiring FB PHP SDK
require 'fb-sdk/src/facebook.php';

//initializing keys
$facebook = new Facebook(array(
    'appId'  => 'changeToYourAppId',
    'secret' => 'changeToYourSecretId',
    'cookie' => true
));

//just a heading
echo "<div class='pageHeading'>";
    echo "This event list is synchronized with this ";
    echo "<a href='https://www.facebook.com/pages/COAN-Dummy-Page/221167777906963?sk=events'>";
        echo "COAN Dummy Page Events";
    echo "</a>";
    echo " | ";
    echo "<a href='http://www.codeofaninja.com/2011/07/display-facebook-events-to-your-website.html'>";
        echo "Tutorial Link: Display Facebook Events To Your Website with PHP, FQL and jQuery";
    echo "</a>";
echo "</div>";

/*
 *-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 = your_fan_page_id".
 *-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', strtotime($values['start_time']) );

    /*
     * getting 'start' 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 "<div class='event'>";

        echo "<div class='floatLeft eventImage'>";
            echo "<img src={$values['pic']} width='150px' />";
        echo "</div>";

        echo "<div class='floatLeft'>";
            echo "<div class='eventName'>{$values['name']}</div>";

            /*
             * -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 "<div class='eventInfo'>{$start_date} at {$start_time}</div>";
            echo "<div class='eventInfo'>{$values['location']}</div>";
            echo "<div class='eventInfo'>{$values['description']}</div>";
        echo "</div>";

        echo "<div class='clearBoth'></div>";
    echo "</div>";

}

?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type='text/javascript'>
    //just to add some hover effects
    $(document).ready(function(){
        $('.event').hover(
            function () {
                $(this).css('background-color', '#CFF');
            }, 
            function () {
                $(this).css('background-color', '#E3E3E3');
            }
        );
    });
</script>

</body>
</html>

UPDATE LOGS

February 19, 2014

For those having the ’1969′ or ’1970′ error. Change this line:

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

…to this:

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

Thanks to @n0fear!

September 13, 2013

Regarding “Headers already sent…” issues, you can learn more fixing that here.

February 24, 2013

  • Used the latest Facebook PHP SDK (v.3.2.2)
  • Added some CSS
  • Added some comments on code
  • Changed the query to display upcoming events only.
  • Changed the live demo link.
  • Changed the code download link.

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!