Why does the Graph API return question mark cover photos for my albums on first login and proper images on subsequent logins?

facebook, facebook-graph-api, facebook-javascript-sdk, javascript, oauth

Solution

I'm not sure, but I think you have not subscribed to authResponseChange event.

The following piece of simple code does the same that you are looking for-

<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
var access_token = "";
window.fbAsyncInit = function() 
{
    FB.init({
        appId      : '<APP-ID>',
        status     : true,
        cookie     : true,
        xfbml      : true 
    });

    FB.Event.subscribe('auth.authResponseChange', function(response) 
    {
        access_token = response.authResponse.accessToken;
        if (response.status === 'connected') 
        {
            FetchUserPhotos();
        } 
        else if (response.status === 'not_authorized') 
        {
            FB.login('scope: user_photos');
        } 
        else 
        {
            FB.login('scope: user_photos');
        }
    });
};

// Load the SDK asynchronously
(function(d){
 var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js";
 ref.parentNode.insertBefore(js, ref);
}(document));

function FetchUserPhotos() 
{
    FB.api('/me/albums', function(response) 
    {
        var albums = response.data;
        for(var i=0; i<albums.length; i++)
        {
            var album = albums[i];
            if(album.cover_photo != undefined)
            {
               FB.api("/"+album.cover_photo+"?access_token="+access_token, function(cover_photo)
               {
                   console.log(cover_photo.source);
               });       
               //console.log("https://graph.facebook.com/"+album.cover_photo+"/picture?type=normal&access_token="+access_token);
            }
         }          
    });
}
</script>

<fb:login-button scope="user_photos" show-faces="true" width="200" max-rows="1"></fb:login-button>
</body>
</html>

Hope it helps, good luck!

Problem

I'm using the FB javascript driver for the Graph API to allow a user to pick photos from their Facebook account. The first time they connect they're prompted to login with: ``` FB.login(function(res) { if (res.status == 'connected') { auth = res.authResponse; // cache auth response getAlbums(); } }); ``` If successful, I cache the returned auth object and immediately fetch the user's albums with: ``` function getAlbums() { FB.api('/me/albums', function(res) { albums = res.data; }); } ``` Using the returned object I iterate over the albums and display their `cover_photo` with: ``` https://graph.facebook.com/{{album.cover_photo}}/picture?type=normal&access_token={{auth.accessToken}} ``` The first time a user logs in, all the cover photos are the question mark icons. However, if the user refreshes, or returns to the page, the app re-authenticates, recognizes the user is already logged in, and displays the proper cover_photo thumbnails. How can I get newly authenticated users to be able to see their cover photos?

Original source