display photos from facebook with javascript api? - Stack Overflow

admin管理员组

文章数量:1244314

I want to display photos from one of my facebook albums on my webpage with the javascript api. I can read the album names with the below code, but how can I then display the photos of one of the albums?

FB.api('/myfacebookid/albums', function(response) {

    var ul = document.getElementById('albums');
    for (var i=0, l=response.data.length; i<l; i++) {
      var
        album = response.data[i],
        li = document.createElement('li'),
        a = document.createElement('a');
      a.innerHTML = album.name;
      a.href = album.link;
      li.appendChild(a);
      ul.appendChild(li);
    }
  });

Any input appreciated, thanks!

OK, now I have this code instead:

    FB.api('/142461229141170/albums?fields=id,name', function(response) {
     if (response && response.data && response.data.length){
         console.log(response)

  for (var i=0; i<response.data.length; i++) {
    var album = response.data[i];

    if (album.name == 'Profile Pictures'){

      FB.api('/'+album.id+'/photos', function(photos){
        if (photos && photos.data && photos.data.length){
          for (var j=0; j<photos.data.length; j++){
            var photo = photos.data[j];
            // photo.picture contain the link to picture
            var image = document.createElement('img');
            image.src = photo.picture;
            $('#foton').append(image);
          }
        }
      });

      break;
    }
  }
   }
});

I guess Im doing something wrong..still! This is displaying the photos from the Profile Pictures album but I had to change it to $('#foton').append(image); . If I look at the log it gets 4 objects.

If I change to a different album eg - Manmade Photos or Cover Photos it stops working.

And also if I change the userId from above(the above is a PAGE id) to my personal facebook id then it stops working aswell.

Im really trying to understand how this works, because I also want to get the feed and some other stuff after this, and I guess that it works the same way as this? Thanks a lot, guys!

I want to display photos from one of my facebook albums on my webpage with the javascript api. I can read the album names with the below code, but how can I then display the photos of one of the albums?

FB.api('/myfacebookid/albums', function(response) {

    var ul = document.getElementById('albums');
    for (var i=0, l=response.data.length; i<l; i++) {
      var
        album = response.data[i],
        li = document.createElement('li'),
        a = document.createElement('a');
      a.innerHTML = album.name;
      a.href = album.link;
      li.appendChild(a);
      ul.appendChild(li);
    }
  });

Any input appreciated, thanks!

OK, now I have this code instead:

    FB.api('/142461229141170/albums?fields=id,name', function(response) {
     if (response && response.data && response.data.length){
         console.log(response)

  for (var i=0; i<response.data.length; i++) {
    var album = response.data[i];

    if (album.name == 'Profile Pictures'){

      FB.api('/'+album.id+'/photos', function(photos){
        if (photos && photos.data && photos.data.length){
          for (var j=0; j<photos.data.length; j++){
            var photo = photos.data[j];
            // photo.picture contain the link to picture
            var image = document.createElement('img');
            image.src = photo.picture;
            $('#foton').append(image);
          }
        }
      });

      break;
    }
  }
   }
});

I guess Im doing something wrong..still! This is displaying the photos from the Profile Pictures album but I had to change it to $('#foton').append(image); . If I look at the log it gets 4 objects.

If I change to a different album eg - Manmade Photos or Cover Photos it stops working.

And also if I change the userId from above(the above is a PAGE id) to my personal facebook id then it stops working aswell.

Im really trying to understand how this works, because I also want to get the feed and some other stuff after this, and I guess that it works the same way as this? Thanks a lot, guys!

• javascript
• facebook
• facebook-graph-api
• facebook-javascript-sdk

Share Improve this question Follow edited Mar 7, 2012 at 18:34 Claes Gustavsson asked Mar 7, 2012 at 13:06 Claes GustavssonClaes Gustavsson 5,6791111 gold badges5555 silver badges8888 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

This can be done by issuing Graph API request to photos connection of album:

FB.api('/me/albums?fields=id,name', function(response) {
  for (var i=0; i<response.data.length; i++) {
    var album = response.data[i];
    if (album.name == 'Profile Pictures'){

      FB.api('/'+album.id+'/photos', function(photos){
        if (photos && photos.data && photos.data.length){
          for (var j=0; j<photos.data.length; j++){
            var photo = photos.data[j];
            // photo.picture contain the link to picture
            var image = document.createElement('img');
            image.src = photo.picture;
            document.body.appendChild(image);
          }
        }
      });

      break;
    }
  }
});

You use the graph to do it... all you need is the album.id from above, and then you make a call to the graph to get the photos. I passed fields=pictures to tell facebook to only return the picture links. You can omit this parameter and it will bring you a whole bunch of stuff back.

https://graph.facebook./<album.id>/photos?fields=picture

The list of all of the fields can be found here Album - Graph API

本文标签： display photos from facebook with javascript apiStack Overflow