如何使用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相册获取照片

回答

相关问题