如何使用FB API從PHP專輯中獲取照片

Question

我正在構建一個fb應用程序，它為用戶提供從他的相冊中選擇照片的選項，以便將其上傳到應用程序的庫。

但是，當用戶從下拉列表中選擇他的一個專輯並提交表單時，我不希望腳本重新加載頁面，而只是刷新div。

我想出的解決方案是使用Ajax。 這是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>

ajax腳本調用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>";
              ?>

問題是，當我第一次選擇一個專輯時，它確實會獲取所有相關圖像。 但是，當我選擇另一個相冊時，它會拋出OAuthException：必須使用活動訪問令牌來查詢有關當前用戶的信息。 似乎在fetch_data.php中創建一個新的$ facebook對象會導致這種情況。

有任何想法嗎？

Answer 1

解決方案是使用json（雖然需要2個IE修復程序 - 請參閱下面的注釋），以避免創建另一個$ facebook對象。

這是新的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>

如何使用FB API從PHP專輯中獲取照片

問題描述

1 個解決方案

解決方案1
4 已采納 2012-07-12 07:17:03

如何使用FB API從PHP專輯中獲取照片

問題描述

1 個解決方案

解決方案1 4 已采納 2012-07-12 07:17:03

解決方案1
4 已采納 2012-07-12 07:17:03