Display Facebook Photos On Website With FQL And jQuery Lightbox

Photo of Mike Dalisay
Modified Sunday, June 12, 2011
by - @ninjazhai
Programming with Facebook is really fun and integrating it to any website makes it a little bit better. You'll know that there are real people interested to your content. Today we're going to do a code that:

1. Gets photo albums and photos of a facebook fan page (using Facebook PHP SDK and FQL). 
2. Display these photos to a webpage (assuming it is your website).
3. Use jQuery Lightbox to make awesome images presentation.

    Display Facebook Photos To Your Website with FQL and jQuery Lightbox
    Show your facebook photos to your website

    This one is useful if you want your facebook pictures to be shown in your website in a synchronized way. Once you uploaded an image in your fan page, it will be seen automatically in your website too.

    This technique has the following Advantages:

    1. You save your server disk space.
    2. You got instant photo manager (facebook photos)
    3. You save bandwidth since the photos shown in your website are loaded from facebook's repository.
    4. Please add your comment if you know other advantages.


    1. When facebook is down (Well, I never encounter facebook was down)
    2. Facebook is not responsible if you lost your data. (Read section 15 of their terms)
    3. Please add your comment if you know other disadvantages or risks.


    1. Create an App. This will enable you to get your App ID and App Secret. They are needed to access facebook data.

    2. Our index.php well have the following code.

    <!DOCTYPE html>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>Display Facebook Page Photos On Your Website by</title>
            <!-- Just adding some style -->
            <style type='text/css'>
                font-family: "Proxima Nova Regular","Helvetica Neue",Arial,Helvetica,sans-serif;
                float: left;
                height: 170px;
                padding: 10px; 
                width: 150px; 
    <!-- Just some heading -->
    <div style='font-size: 16px; font-weight: bold; margin: 0 0 10px 0;'>
        This album is synchronized with this
        <a href=''>
            Dummy Page Album
        Tutorial Link: 
        <a href="">
            Display Facebook Photos On Website With FQL And jQuery Lightbox
    //include the fb php sdk
    require 'fb-sdk/src/facebook.php';
    $facebook = new Facebook(array(
        'appId'  => 'changeToYourAppId',
        'secret' => 'changeToYourAppSecret',
        'cookie' => true, // enable optional cookie support
    //defining action index
    isset( $_REQUEST['action'] ) ? $action = $_REQUEST['action'] : $action = "";
     * This will show 
    if( $action == ''){
        echo "<p>COAN Dummy Page Albums</p>";
        // select albums from our dummy page
        $fql    =   "SELECT 
                        aid, cover_pid, name 
                    WHERE owner=221167777906963";
        $param  =   array(
            'method'    => 'fql.query',
            'query'     => $fql,
            'callback'  => ''
        $fqlResult   =   $facebook->api($param);
        foreach( $fqlResult as $keys => $values ){
            //to get album cover
            $fql2    =   "select src from photo where pid = '" . $values['cover_pid'] . "'";
            $param2  =   array(
                'method'    => 'fql.query',
                'query'     => $fql2,
                'callback'  => ''
            $fqlResult2   =   $facebook->api($param2);
            foreach( $fqlResult2 as $keys2 => $values2){
                $album_cover = $values2['src'];
            //show the album
            echo "<div class='fbAlbum'>";
                echo "<a href='index.php?action=list_pics&aid=" . $values['aid'] . "&name=" . $values['name'] . "'>";
                    echo "<img src='$album_cover' border='1'>";
                echo "</a>";
                echo "<div>{$values['name']}</div>";
            echo "</div>";
     * This will show the photo(s) on the clicked album.
    if( $action == 'list_pics'){
        isset( $_GET['name'] ) ? $album_name = $_GET['name'] : $album_name = "";
        echo "<div><a href='index.php'>Back To Albums</a> | Album Name: <b>" . $album_name . "</b></div>";
        // query all the images in the album
        $fql = "SELECT 
                    pid, src, src_small, src_big, caption 
                    aid = '" . $_REQUEST['aid'] ."' ORDER BY created DESC";
        $param  =   array(
            'method'    => 'fql.query',
            'query'     => $fql,
            'callback'  => ''
        $fqlResult   =   $facebook->api($param);
        echo "<div id='gallery'>";
        foreach( $fqlResult as $keys => $values ){
            if( $values['caption'] == '' ){
                $caption = "";
                $caption = $values['caption'];
            echo "<div class='fbAlbumImage'>";
                echo "<a href=\"" . $values['src_big'] . "\" title=\"" . $caption . "\">";
                    echo "<img src='" . $values['src'] . "' />";
                echo "</a>"; 
            echo "</div>";
        echo "</div>";
    <!-- activate jQuery lightbox -->
    <script type="text/javascript" src="jQuery-lightbox/js/jquery.js"></script>
    <script type="text/javascript" src="jQuery-lightbox/js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="jQuery-lightbox/css/jquery.lightbox-0.5.css" media="screen" />
    <script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();

    There are lots of other album information that you can retrieve. Not only album information, but also other information visible on facebook. Just check the availabe tables that you can query on facebook. Facebook Query Language (FQL) is of great help too since we are already familiar with SQL. We don't have much to study. :)

    Regarding "Headers already sent..." issues, you can learn more fixing that here.


    February 25, 2013
    • Changed CSS
    • Added some comments on code
    • Used the latest Facebook PHP SDK (v.3.2.2)
    • Changed the live demo link
    • Changed code download link
    May 13, 2012

    The Code of a Ninja Resources

    For FREE programming tutorials, click the red button below and subscribe! :)
    Thanks for the comments!
    "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.