How do I get album pictures using facebook API?

Question

This should be fairly common but somehow I cannot get it to work. What I would like to do is the get album pictures from facebook. I am implementing this on a website.

I can get the albums using this code:

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);
                }
            });
        };

the resp returns a data array which contains links to the photo albums BUT I would like the image sources for each album and I don't see anything I can use in the resp data. The data object contains a link to the album but not individual images.

According to facebook documentation, photos are "connections" to albums. I am not sure what means but their doc shows that you can get individual photos.

From this link:

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

it shows the json(?) returns link, id, name, etc...which I am able to get. However, at the bottom of that page are "connections" to album which includes photos, comments, pictures. When I click on photos, it shows the JSON data structure including the img src. Question is, how do I get that? It seems so straightforward but I can't get it to work.

I tried

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

and

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

photos return nothing while photo returns undefine.

Code samples will be greatly appreciated.

Answer 1

1. From the first call you get all the albums (and the album IDs) '/me/albums'
2. from there you can get the album picture (cover) '/'+album.id+'/picture'
3. AND the photos of the album '/'+album.id+'/photos'

Answer 2

you can also try

/_ABLUM_ID_/photos

on the graph api, i.e.

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

where 12341234 is the album object id of the album you want to get the photos of.

Answer 3

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);
    }
});

Answer 4

If you're using the PHP version of the Facebook API, you can use this call:

$photos = $facebook->api('/me?fields=albums.limit(50).fields(photos.limit(50).fields(id,source))');

Answer 5

Here's some example code that I used in 2011:

<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 worked for me. The API may have changed since then, but it might point you in the right direction.