如何使用FB API從使用PHP的Facebook相冊獲取照片

我正在構建一個fb應用程序，該應用程序爲用戶提供從他的相冊中選擇照片的選項，以便將其上載到應用程序的畫廊。如何使用FB API從使用PHP的Facebook相冊獲取照片

但是，當用戶從下拉列表中選擇他的相冊中的一個並提交表單時，我不希望腳本重新加載頁面，而只是刷新一個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對象會導致這種情況。

任何想法？

來源

2012-07-11 Alex

有什麼問題到底是什麼？ – 2012-07-11 09:52:59

mmmm我想你應該問這個問題，然後自己回答...然後可能與Meta – 2012-07-11 11:08:17

解決方案是使用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>

來源

2012-07-12 07:17:03 Alex

上的人檢查它工作順利......謝謝，亞歷克斯:) – 2013-01-15 11:50:44

儘量不要混淆HTML中的單引號和雙引號碼。始終如一。 – Raptor 2013-10-03 03:48:54

如何使用FB API從使用PHP的Facebook相冊獲取照片

回答

相關問題