Databases
StackOverflow2013
Postsdbo
POGet Facebook Photo of a Album with oauth2.0
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGet Facebook Photo of a Album with oauth2.0
    text
    copied!<p>Hello I have a script working well with the previous release of facebook API. With oauth 2.0 is not more working. I solved the first problem of login, now I’m getting the list of Album of Me but I cannot have the pictures.</p> <p>This first script make the authorization and retrieve the album list. When I select an album I pass the id and token to a php file that is in the second script. There I should load the picture of the specifyied album, but is not working.</p> <p>I wonder if the problem is in the cover call <code>https://graph.facebook.com/'+album+'/picture?access_token='+access_token+</code></p> <p>And in the </p> <pre><code>FB.api("/"+albumid+"/photos",function(response){… </code></pre> <p>call..</p> <p>Saomeone can help me to finde where I’m wrong?</p> <p>Here is it possible to finde the complete script. <a href="http://goo.gl/HY59u" rel="nofollow">goo.gl/HY59u</a> Thanks</p> <p>Federico</p> <pre><code> &lt;div id="fb-root"&gt;&lt;/div&gt; &lt;script&gt; var loggedIn = false; var isLoaded = false; function loginFacebook() { if(!isLoaded) { alert("SDK is not yet loaded or something went wrong!"); return false; } //initializes the facebook API document.getElementById("status").innerHTML = "In attesa del permesso Facebook"; //opens the Facebook login window for user FB.login(function(response) { if (response.authResponse) { document.getElementById("status").innerHTML = "Logged In. Ora puoi caricare gli album."; loggedIn = true; //disables the login button after the user has loggedIn document.getElementById("loginBtn").disabled = "Disabilitato"; document.getElementById("loginBtn").style.display = "None"; document.getElementById("albumBtn").style.display = "inline"; document.getElementById("fb_logo").style.display = "None"; document.getElementById("label_fb").style.display = "None"; } else { document.getElementById("status").innerHTML = "Non hai effettuato il Facebook Login"; loggedIn = false; } },{scope:'user_photos'}); } window.fbAsyncInit = function() { FB.init({ appId : 'xxxxx', // App ID channelUrl : 'www.xxxxx.com/channel.html', // Channel File status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); // Additional initialization code here isLoaded = true; }; // Load the SDK Asynchronously (function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); //loads the all the album currently present in user's facebook profile //Requests to '/me/albums' function loadAlbums() { if(loggedIn) { document.getElementById("status").innerHTML = "Caricando gli album dal tuo profilo Facebook"; var counter = 0; FB.api('/me/albums', function(response) { document.getElementById("albumsList").innerHTML = ''; for(var c in response["data"]) { addOption(response["data"][c].name,response["data"][c].id); counter++; } document.getElementById("albumBtn").style.display = "none"; document.getElementById("status").innerHTML = "&lt;p&gt;Ci sono "+ counter +" album sul tuo profilo Facebook.&lt;/p&gt;&lt;p&gt; Scegli quello che vuoi inserire&lt;/p&gt;"; }); } else { document.getElementById("status").innerHTML = "Non hai effettuato il Facebook Login. Fai il Facebook login per caricare gli album."; } } //Adds a new album link into albumsList div function addOption(opText,opVal) { document.getElementById("albumsList").style.display = "block"; var v = document.getElementById("albumsList"); v.innerHTML += '&lt;br/&gt;&lt;a target="_self" href="../facebook/album.php?id='+opVal+'&amp;name='+opText+'"&gt;'+opText+'&lt;/a&gt;'; } function init() { var v = document.getElementById("loginBtn"); v.onclick = loginFacebook; v.disabled = ""; var v1 = document.getElementById("albumBtn"); v1.onclick = loadAlbums; v1.disabled = ""; } //calls init function once all the resources are loaded window.addEventListener("load",init,true); </code></pre> <p></p> <p>other script</p> <p></p> <pre><code>&lt;!-- Include the Facebook Javascript API --&gt; &lt;script src="http://connect.facebook.net/en_US/all.js"&gt;&lt;/script&gt; &lt;!-- Include the normal stylesheet--&gt; &lt;link href="style.css" rel="stylesheet" /&gt; &lt;script type="text/javascript"&gt; var album = ""; var access_token = ""; function init() { FB.init({ appId : 'xxxxxxx', // App ID channelUrl : 'www.sssss.com/channel.html', // Channel File status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); var _album = getParameter('id'); if(_album!="") { album = _album; access_token = getAccessToken(); document.getElementById("album_desc").innerHTML = unescape(getParameter('name')); //Album Header Photo link, https://graph.facebook.com/ALBUM_ID/picture?access_token = ACCESS_TOKEN document.getElementById("album_cover").innerHTML += '&lt;img src="https://graph.facebook.com/'+album+'/picture?access_token='+access_token+'" /&gt;'; getAlbumPhotos(album); } else { album = "No Album ID passed"; document.getElementById("album_cover").innerHTML = '&lt;span class="error"&gt;'+album+'&lt;/span&gt;'; } } //queries the cookie on browser, to get the access_token function getAccessToken() { splitArray = document.cookie.split(";"); access_token = ""; for(var v in splitArray) { if(splitArray[v].substr(0,4)==" fbs") { access_token = splitArray[v]; break; } } var arr = access_token.split("&amp;")[0].split("="); return arr[arr.length-1]; } //gets all the photos in the album function getAlbumPhotos(albumid) { //Queries /ALBUM_ID/photos FB.api("/"+albumid+"/photos",function(response){ var photos = response["data"]; document.getElementById("photos_header").innerHTML = "Foto("+photos.length+")"; for(var v=0;v&lt;photos.length;v++) { var image_arr = photos[v]["images"]; var subImages_text1 = "("+(v+1)+")"; //this is for the small picture that comes in the second column var subImages_text2 = '&lt;img src="'+image_arr[(image_arr.length-1)]["source"]+'" class="imagedropshadow" /&gt;'; //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&lt;image_arr.length;j++) { var Maxsize = Math.max(image_arr[0]["width"]); if(image_arr[j]["width"]== Maxsize) { subImages_text3 += '&lt;a target="_blank" href="'+image_arr[j]["source"]+'"&gt;Seleziona&lt;/a&gt; &lt;input type="checkbox" name="checkbox_fb[]" value="'+image_arr[j]["source"]+'"&gt; &lt;input type="hidden" name="w_prev" id="w_prev" value="'+image_arr[(image_arr.length-1)]["width"]+'"/&gt; &lt;input type="hidden" name="h_prev" id="h_prev" value="'+image_arr[(image_arr.length-1)]["height"]+'"/&gt; &lt;br/&gt;'; } } addNewRow(subImages_text1,subImages_text2,subImages_text3); } }); } function addNewRow(data1,data2,data3) { //inserts a new row into the table var table = document.getElementById("album_photos"); var row = table.insertRow(table.rows.length); var cell = row.insertCell(0); cell.innerHTML = data1; cell = row.insertCell(1); cell.innerHTML = data2; cell = row.insertCell(2); cell.innerHTML = data3; } //This function gets the value of album, passed in the request string function getParameter(name) { name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); //the regular expression that separates the album from the queryString var regexS = "[\\?&amp;]"+name+"=([^&amp;#]*)"; var regex = new RegExp( regexS ); var results = regex.exec( window.location.href ); if( results == null ) return ""; else return results[1]; } //calls init function once all the resources are loaded window.addEventListener("load",init,true); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload