codeofaninja
website

Display Facebook Events On Website With FQL And jQuery

Photo of Mike Dalisay
Modified Friday, July 8, 2011
by - @ninjazhai
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


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.

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

For FREE programming tutorials, click the red button below and subscribe! :)
Thanks for the comments!
 
 
Fundamentals
"First do it, then do it right, then do it better."
~ Addy Osmani
"Talk is cheap. Show me the code."
~ Linus Torvalds
Let's Stay Connected!
g+ r
Android app on Google Play
© 2011-2014 The Code Of A Ninja. All rights reserved. Proudly Powered by Google Blogger. Images, logos, marks or names mentioned herein are the property of their respective owners.