How to get photos from facebook album with PHP using FB API

I am building a fb app, which provides the user with the option to choose a photo from his albums, so as to upload it to the app's gallery.

However, when the user selects one of his albums from the dropdown list and submits the form I don't want the script to reload the page, but just to refresh a div.

The solution I came up with is using Ajax. Here is the code of index.php:

     <?php

    session_start(); 
    header('P3P:CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"');
    include 'facebook.php';


    $facebook = new Facebook(array(
      'appId'  => 'YOUR_APP_ID',
      'secret' => 'YOUR_SECRET_CODE'

    ));


    if(!$_REQUEST['access_token'])
    $access_token = $facebook->getAccessToken();
    else
    $access_token = $_REQUEST['access_token']; 

    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns:fb="http://ogp.me/ns/fb#" lang="en" >
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
        <title>MY FACEBOOK APPLICATION</title>
        <?php require('inc.head.php'); ?>

      </head>
      <body>
       <script>


  function showAlbum(album_id)
  {
     document.getElementById("txtHint").innerHTML = "<br><img src='images/ajax-loader.gif' /><br/><br/>Loading photos...";

    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","fetch_data.php?album_id="+album_id+"&access_token=<?=$access_token?>",true);
    xmlhttp.send();
    }
  </script>
  <?
        $albums = $facebook->api('/me/albums');
        echo '<div class="alb">';

        echo " <form name='frm'>
        <select name='album_id' onchange=\"showAlbum(this.value)\">
        <option type='hidden' value=0>Select an album</option>";
        foreach($albums['data'] as $album)
            echo "<option type='hidden' value='".$album['id']."'> ".$album['name']."</option>";

        echo '</select></form></div>';
      ?>
          <div id="txtHint" ></div>
      </body>
    </html>

The ajax script calls fetch_data.php

      <?php
      require_once 'facebook.php';


      $facebook = new Facebook(array(
       'appId'  => 'YOUR_APP_ID',
       'secret' => 'YOUR_SECRET_CODE'

     ));

      $access_token = $_REQUEST['access_token']; 



              $album_id = $_REQUEST['album_id'];

              $photos = ''; 
              $photos = $facebook->api("/{$album_id}/photos", array("access_token" => "$access_token"));

             echo "<div class='slideshow'>"; 

              $photo = '';
              foreach($photos['data'] as $photo)
              {
                  echo "<br /><a href='index.php?src={$photo['source']}&access_token=$access_token'><img title='CLICK PHOTO TO SELECT' src='{$photo['source']}' width=320 border=0/></a><br /><br />";
              }

             echo " </div>";
              ?>

The problem is that when I first select an album it does fetch all relative images. However, when I select another album it throws an OAuthException: An active access token must be used to query information about the current user. It seems that creating a new $facebook object in fetch_data.php causes this.

Any ideas?

Solution

The solution was to use json (although 2 IE fixes were needed - see comments below), so as to avoid creating another $facebook object.

Here is the new index.php:

include 'facebook.php';

$facebook = new Facebook(array(
  'appId'  => 'YOUR_APP_ID',
  'secret' => 'YOUR_SECRET_CODE',
  ));

  //get token
  $access_token = $facebook->getAccessToken();

 //don't forget to include the js libraries for jquery and json
 //I am omitting those to save space

//now get albums
  $albums = $facebook->api('/me/albums');

  //create a drop down list for the user to select one of his albums

        echo " <form name='frm'>
        <select name='album_id' onchange=\"showAlbum(this.value)\">
        <option type='hidden' value=0>Select an album</option>";
        foreach($albums['data'] as $album)
        echo "<option type='hidden' value='".$album['id']."'> ".$album['name']."</option>";

        echo '</select></form>';
      ?>
         <!--this is the div to display the photos of the album selected-->
          <div id="txtHint" > </div>

     <!--and now the js-->
      <script> 
      function showAlbum(album_id)
     {
      //until it loads the photos show a loading gif
      document.getElementById("txtHint").innerHTML = "<br><img src='images/ajax-loader.gif' /><br/><br/>Loading photos...";


    //here is the IE fix
     $.support.cors = true;

    // get images - the addition of the callback parameter is the 2nd IE fix
    $.getJSON('https://graph.facebook.com/' + album_id + '/photos?access_token=<?=$access_token?>&callback=?', function(json, status, xhr) {
      var imgs = json.data;

      var images='';  
      for (var i = 0; i < imgs.length; i++) {
       //each image has a variety of different dimensions
       //i am selecting the first dimension i.e. [0] and set my own width
        images +='<br /><img src="' + imgs[i]['images'][0]['source'] + '" width=320><br><br>';
      }
      //append all the photos found for this album id inside the div 
      document.getElementById("txtHint").innerHTML = images;

      }).error(function(jqXHR, textStatus, errorThrown) { alert(errorThrown); });

   } 
</script>