Facebook users tag photos in order to mark who all are present in that photo. Some tag photos so that the tagged facebook users get a notification and there by they will view the photo. Facebook graph api allows us to find all photos where the logged in user or their friends are tagged.
In order to get tagged photos we are using facebook javascript sdk. FB.api() allows to call facebook graph api. Here we require ‘user’ object and /photos connection. Before proceeding with the code, you should note that we need 2 permissions to find users and friends tagged photos. They are ‘user_photo_video_tags’ and ‘friends_photo_video_tags’. You need to add these permissions to scope parameter while calling FB.login().
FB.api('/'+userid+'/photos', function(response) {
$('#facebook-photos-tagged').html(response.data.length);
if(response.data.length==0)
{
$('.tagged-photos').html('No Photos Available');
}
$('.tagged-photos').html('');
for(var i=0;i<response.data.length;i++)
{
var desc='';
if(response.data[i].name)
desc=': '+response.data[i].name;
$('.tagged-photos').append('<a href="'+response.data[i].source+'" title="Tagged by '+response.data[i].from.name+desc+'" target="_blank"><img src="'+response.data[i].picture+'" alt="Photo tagged by '+response.data[i].from.name+'" /></a>');
}
});
As you can see, the number of tagged photos is displayed inside #facebook-photos-tagged. The response of FB.api() will be an array. We are finding the length of array to get number of photos. .tagged-photos is the div block where we display the tagged photos. If the number of tagged photos is zero, we will display a message ‘No Photos Available’. Otherwise we append each photo with a link to original big image to .tagged-photos. Using this method the maximum number of photos returned is 25. Let me check how to extract all photos.




You could cut down the load time by using a lazy load plugin. That apart, cool tuts that you write.