Display photos from facebook using javascript api?
I want to display photos from one of my facebook albums on my web page using javascript api. I can read the album titles using the code below, but how can I 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 is appreciated, thanks!
OK, now I have this code:
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 think I am doing something wrong ... everyone! This displays 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 go to another album like "Manmade Photos" or "Cover Photos" it stops working.
And also if I change the userId on top (the above PAGE ID) to my personal facebook ID, it stops working as well.
I'm really trying to figure out how this works because I also want to get the feed and some other stuff after that and I think it works the same way as this? Thanks a lot guys!
source to share
This can be done by sending a Graph API request to the photos
connection 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;
}
}
});
source to share
You use a graph to do this ... all you need is album.id
on top and then you call the graph to get the photos. I have passed fields=pictures
to tell facebook to only return image links. You can omit this parameter and it will return a whole bunch of things for you.
https://graph.facebook.com/<album.id>/photos?fields=picture
A list of all fields can be found here Album - Graph API
source to share