CSS Includes

Friday, July 8, 2011

Display Facebook Events On Website With FQL And jQuery

This post was updated, see the update logs below this post.

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 To Your Website with PHP and FQL
Display Facebook Events to You Website

This one is great if you want your facebook events to be shown in your website in a synchronized way. Once you created or updated an event 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.

Display Facebook Events On Website Code Download   Display Facebook Events On Website Live Demo

Steps.

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

<!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', $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 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.
May 13, 2012
Thanks for sharing the post! :)
For FREE programming tutorials, enter your email below and subscribe! :)

117 comments:

Small Business Helper Limited said...

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

Mike Dalisay said...

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. :)

Beat Culture Evolution said...

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

Beat Culture Evolution said...

Is there a way to post events from multiple users?

Mike Dalisay said...

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

heyitshenryy said...

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?

heyitshenryy said...

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.

Mike Dalisay said...

@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 said...

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?

Mike Dalisay said...

@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 said...

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?

Mike Dalisay said...

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

Roy said...

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

Rich said...

Thanks Mike, ive put the script in events.php and it works fine when i go to 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.

Mike Dalisay said...

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

Rich said...

Hi Mike, thanks for your patience! If you take a look at www.g6club.co.uk and click the events menu option you'll see i've got included a hyperlink to 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 said...

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

Mike Dalisay said...

@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 said...

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.

curtains88 said...

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

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

Mike Dalisay said...

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

SG said...

I got an error like "Fatal error: Call to undefined function: date_default_timezone_set() in C:\inetpub\vhosts\httpdocs\facebooktest\index.php on line 19"

Anonymous said...

HI Mike,

I really can't get this to work!

Any offline paid support?

David Stump

Mike Dalisay said...

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

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

souzapaul said...

Hi Mike,

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

souzapaul said...

Q2 : How can i add multiple E Id's

Romymk said...

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

Mike Dalisay said...

@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?

souzapaul said...

Ok Mike, I am not a developer so pls.

Edit the code to Display All events that are shared on Fb page 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

Chris said...

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?

Christina said...

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

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

Craig Gallup said...

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

Anonymous said...

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

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

Anonymous said...

@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 said...

@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 said...

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

Anonymous said...

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

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

Anonymous said...

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?

Sam C. said...

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!

Unknown said...

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

I got this error on your plugin:

Caught exception: Protocol https not supported or disabled in libcurl

Any ideas?

Szotyesz said...

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

Alain said...

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.

Unknown said...

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!

Petri said...

Script is working great!

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

Aditya Nayak said...

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.

MMM said...

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!

StreathamMike said...

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.

Wella said...

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

MX Brothers said...

@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

Anonymous said...

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?

Anonymous said...

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"

Pontus said...

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

s0uky said...

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

StreathamMike said...

@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

Joe said...

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.

s0uky said...

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

Joe said...

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.

barney said...

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.

loMB said...

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

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

Anonymous said...

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.

Mike Dalisay said...

I'm glad it helped. :)

Mike Dalisay said...

Hi Anonymous! Yes you have to own a Facebook account. You can create a new account for your clients or just use your own FB account (I actually use my own FB account, haha!).

I recommend creating a new ID for each of your app. For example you have created an app ID for http://yoursite.com, you have to generate another id for http://clientsite.com

This link will get you started when you want to develop FB apps for websites https://developers.facebook.com/docs/guides/web/ or https://developers.facebook.com/

Mike Dalisay said...

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.

Mike Dalisay said...

Hi @StreathamMike, thanks for giving your helpful input!

Mike Dalisay said...

Hi, please check if you have multiple session declaration...

Mike Dalisay said...

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

Mike Dalisay said...

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

Mike Dalisay said...

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/

Mike Dalisay said...

Thanks for your helpful inputs @MX Brothers!

Anonymous said...

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');
});

});

Doug said...

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

Mr. T said...

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

Aurora said...

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.

Joe said...

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.

Anonymous said...

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

ali croft said...

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!

Anonymous said...

This was really helpful, thanks!

Luxuskern said...

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

Arthur Permis Levyssohn said...

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

StreathamMike said...

Arthur,

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

It should help you.

StreathamMike

StreathamMike said...

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

Jeroen said...

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

Arthur Permis Levyssohn said...

Hee Jeroen,

Heb je al een oplossing ?

Groet
Arthur

Arthur Permis Levyssohn said...

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

StreathamMike said...
This comment has been removed by the author.
Anonymous said...

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

Arthur Permis Levyssohn said...

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

Arthur Permis Levyssohn said...

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

Anonymous said...

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

Steve Eldridge said...

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

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

Daniel Gutierrez said...

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

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'?

Jae said...

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

Arthur Permis Levyssohn said...

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

Arthur Permis Levyssohn said...

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

Mike Dalisay said...

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

Jae said...

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?

JJJDP said...

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

ira said...

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.

L A Little said...

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

Anonymous said...

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

anoniem said...

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

admin said...

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

vitthal said...

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!

Anonymous said...

got the same problem! please some help here!

Alvaro Rubio Casanueva said...

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

ira said...

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

Barry said...

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?

Maulik Suchak said...

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.

Mike Dalisay said...

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!

Related Posts