2011-03-11 13 views
30

これはかなり一般的なはずですが、何とか私はそれを動作させることができません。私がやりたいことは、Facebookの写真をアルバムから取得することです。私はこれをウェブサイトに実装しています。FacebookのFacebook APIを使用してアルバムの写真を取得するにはどうすればよいですか?

私はこのコードを使用してアルバムを得ることができます:RESPはフォトアルバムへのリンクが含まれているデータ配列を返しますが、私は、各アルバムの画像ソースを希望し、私は何も表示されません

function getAlbumPhotos(){ 
      FB.api('/me/albums', function(resp) { 
       //Log.info('Albums', resp); 
       var ul = document.getElementById('albums'); 
       for (var i=0, l=resp.data.length; i<l; i++){ 
        var 
         album = resp.data[i], 
         li = document.createElement('li'), 
         a = document.createElement('a'); 
        a.innerHTML = album.name; 
        a.href = album.link; 
        li.appendChild(a); 
        ul.appendChild(li); 
       } 
      }); 
     }; 

を私はrespデータで使用できます。データオブジェクトにはアルバムへのリンクが含まれていますが、個別の画像は含まれていません。

Facebookのドキュメントによると、写真はアルバムへの「接続」です。私は何を意味するのかは分かりませんが、彼らの文書ではあなたが個々の写真を入手できることを示しています。このリンクから

:(?)

[http://developers.facebook.com/docs/reference/api/album/][1] 

それはJSONを示しては、私が取得することができる午前リンク、ID、名前、等を...返します。しかし、そのページの下部には、写真、コメント、写真を含むアルバムへの「接続」があります。写真をクリックすると、img srcを含むJSONデータ構造が表示されます。質問は、どうすればそれを得るのですか?それはとても簡単なようですが、私はそれを働かせることはできません。

私は写真のリターンが未定義ながら写真が何も返さない

FB.api('/me/photos',function(resp) ... 

FB.api('/me/photo',function(resp) ... 

を試してみました。

コードサンプルは非常に高く評価されます。あなたはすべてのアルバム(アルバムID)を取得する最初の呼び出しから

答えて

47
  1. '/me/albums'
  2. そこからあなたはアルバムの画像(カバー)'/'+album.id+'/picture'
  3. アルバム'/'+album.id+'/photos'
の写真を得ることができます
+1

ありがとうございます。完璧に動作します。 – okysabeni

2
FB.api("/"+albumid+"/photos",function(response){ 
    var photos = response["data"]; 
    document.getElementById("photos_header").innerHTML = "Photos("+photos.length+")"; 
    for(var v=0;v<photos.length;v++) { 
     var image_arr = photos[v]["images"]; 

     var subImages_text1 = "Photo "+(v+1); 

     //this is for the small picture that comes in the second column 
     var subImages_text2 = '<img src="'+image_arr[(image_arr.length-1)]["source"]+'" />'; 

     //this is for the third column, which holds the links other size versions of a picture 
     var subImages_text3 = ""; 

     //gets all the different sizes available for a given image 
     for(var j = 0 ;j<image_arr.length;j++) { 
      subImages_text3 += '<a target="_blank" href="'+image_arr[j]["source"]+'">Photo('+image_arr[j]["width"]+"X"+image_arr[j]["height"]+')</a><br/>'; 
     } 
     addNewRow(subImages_text1,subImages_text2,subImages_text3); 
    } 
}); 
1
 <script src="http://connect.facebook.net/en_US/all.js"></script> 

     <script type="text/javascript"> 
      var loggedIn = false;   

      function loginFacebook() 
      { 
       //initializes the facebook API 
      }   




      function loadAlbums() 
      {    
       FB.init({ 
      appId : '345203265493024', 
      status : true, // check login status 
      cookie : true, // enable cookies to allow the server to access the session 
      xfbml : true // parse XFBML 
       }); 





FB.login(function(response) 
{ 
if (response.authResponse) 
{ 

//Logged in and accepted permissions! 

     document.getElementById("status").innerHTML = "Getting album information from your Facebook profile"; 
       var counter = 0; 

     // Start Normal API 
       FB.api('/me/albums', function(response) 
       { 


        var d=response.data; 



        for (var i=0, l=d.length; i<l; i++) 
        { 
         addOption(response["data"][i].name,response["data"][i].id); 
         counter++; 


        } 
        document.getElementById("status").innerHTML = "There are "+ counter +" albums in your Facebook profile"; 
       }); 


       //end of Normal API 

     document.getElementById("albumBtn").style.visibility="hidden"; 



} 
},{scope:'read_stream,publish_stream,offline_access,user_photos,friends_photos,user_photo_video_tags,friends_photo_video_tags'}); 


      } 

      //Adds a new option into the drop down box 
      function addOption(opText,opVal) 
      { 
       var v = document.getElementById("albumsList");    
       v.innerHTML += '<br/><a href="facebookphotos.aspx?album='+opVal+'&name='+opText+'">'+opText+'</a>';    
      } 

      function init() 
      { 
       var v1 = document.getElementById("albumBtn"); 
       v1.onclick = loadAlbums; 
       // v1.style.visibility= "hidden";    
      } 

      //calls init function once all the resources are loaded 
      window.addEventListener("load",init,true); 
     </script>  


this code works 
+3

ようこそ。コードを投稿する際には適切な書式を使用してください。 –

+0

中括弧( '{'と '}')が釣り合わないので、このコードがどのように機能するか分かりません。あなたはここに何かを見失っています。 –

3

あなたも

を試すことができます

/_ABLUM_ID_ /写真

グラフAPIで、12341234は、あなたがの写真を取得したいアルバムのアルバムオブジェクトIDである、すなわち

https://graph.facebook.com/12341234/photos

1

ます。このAPIを使用することができます。

$写真= $ facebook-> API( '私/フィールド= albums.limit(50).fields(photos.limit(50).fields(ID、ソース? )) ');

関連する問題