-
-
Save cbosco/4626891 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <title>Photos with Friends!</title> | |
| <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> | |
| <script> | |
| /** | |
| * This is the getPhoto library | |
| */ | |
| function makeFacebookPhotoURL( id, accessToken ) { | |
| return 'https://graph.facebook.com/' + id + '/picture?access_token=' + accessToken; | |
| } | |
| function login( callback ) { | |
| FB.login(function(response) { | |
| if (response.authResponse) { | |
| //console.log('Welcome! Fetching your information.... '); | |
| if (callback) { | |
| callback(response); | |
| } | |
| } else { | |
| console.log('User cancelled login or did not fully authorize.'); | |
| } | |
| },{scope: 'user_photos'} ); | |
| } | |
| function getAlbums( callback ) { | |
| FB.api( | |
| '/me/albums', | |
| {fields: 'id,cover_photo'}, | |
| function(albumResponse) { | |
| //console.log( ' got albums ' ); | |
| if (callback) { | |
| callback(albumResponse); | |
| } | |
| } | |
| ); | |
| } | |
| function getPhotosForAlbumId( albumId, callback ) { | |
| FB.api( | |
| '/'+albumId+'/photos', | |
| {fields: 'id'}, | |
| function(albumPhotosResponse) { | |
| //console.log( ' got photos for album ' + albumId ); | |
| if (callback) { | |
| callback( albumId, albumPhotosResponse ); | |
| } | |
| } | |
| ); | |
| } | |
| function getLikesForPhotoId( photoId, callback ) { | |
| FB.api( | |
| '/'+albumId+'/photos/'+photoId+'/likes', | |
| {}, | |
| function(photoLikesResponse) { | |
| if (callback) { | |
| callback( photoId, photoLikesResponse ); | |
| } | |
| } | |
| ); | |
| } | |
| function getPhotos(callback) { | |
| var allPhotos = []; | |
| var accessToken = ''; | |
| login(function(loginResponse) { | |
| accessToken = loginResponse.authResponse.accessToken || ''; | |
| getAlbums(function(albumResponse) { | |
| var i, album, deferreds = {}, listOfDeferreds = []; | |
| for (i = 0; i < albumResponse.data.length; i++) { | |
| album = albumResponse.data[i]; | |
| deferreds[album.id] = $.Deferred(); | |
| listOfDeferreds.push( deferreds[album.id] ); | |
| getPhotosForAlbumId( album.id, function( albumId, albumPhotosResponse ) { | |
| var i, facebookPhoto; | |
| for (i = 0; i < albumPhotosResponse.data.length; i++) { | |
| facebookPhoto = albumPhotosResponse.data[i]; | |
| allPhotos.push({ | |
| 'id' : facebookPhoto.id, | |
| 'added' : facebookPhoto.created_time, | |
| 'url' : makeFacebookPhotoURL( facebookPhoto.id, accessToken ) | |
| }); | |
| } | |
| deferreds[albumId].resolve(); | |
| }); | |
| } | |
| $.when.apply($, listOfDeferreds ).then( function() { | |
| if (callback) { | |
| callback( allPhotos ); | |
| } | |
| }, function( error ) { | |
| if (callback) { | |
| callback( allPhotos, error ); | |
| } | |
| }); | |
| }); | |
| }); | |
| } | |
| </script> | |
| <script> | |
| /** | |
| * This is the bootstrap / app script | |
| */ | |
| // wait for DOM and facebook auth | |
| var docReady = $.Deferred(); | |
| var facebookReady = $.Deferred(); | |
| $(document).ready(docReady.resolve); | |
| window.fbAsyncInit = function() { | |
| FB.init({ | |
| appId : '548466918497006', | |
| channelUrl : '//conor.lavos.local/channel.html', | |
| status : true, | |
| cookie : true, | |
| xfbml : true | |
| }); | |
| facebookReady.resolve(); | |
| }; | |
| $.when(docReady, facebookReady).then(function() { | |
| if (typeof getPhotos !== 'undefined') { | |
| getPhotos( function( photos ) { | |
| console.log( photos ); | |
| }); | |
| } | |
| }); | |
| // call facebook script | |
| (function(d){ | |
| var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} | |
| js = d.createElement('script'); js.id = id; js.async = true; | |
| js.src = "http://connect.facebook.net/en_US/all.js"; | |
| d.getElementsByTagName('head')[0].appendChild(js); | |
| }(document)); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="fb-root"></div> | |
| </body> | |
| </html> | |
Hi, Thanks a lot for this. But unfortunately I am unable to run this script. I am getting error as :
TypeError: $ is undefined
var docReady = $.Deferred();
I have added JQuery v1.11.3 and bootstrap.min.js. I am unable to understand what is missing.
this code works perfectly fine just change the app id to your own app id.
those who don't see photos well I'm afraid didn't read the code because he is only logging it in the console.
so read the browser console log.
if you want to see photos you have to manipulate the code a bit...
you do not need to include any additional jquery libraries
Thanks, this works perfectly fine. 👍
I was planning to build something around this.
BTW, if other are having trouble to get a quick peek, use console.table(photos, ['url']); instead of log.
That's what you are proly interested in. ;)
Just change the urls to 'https://..."
Facebook doesn't allow data to be served insecurely.
This will also solve "$.deferred not found problem".
Rest of the things work great!!
guys what does callback(albumResponse); do ?
Thanks for the code. A few limitations people should be aware of. If the user has more than 25 albums it won't show all of them. Looks like the default limit is 25. I think you can bump the limit to 100, but beyond the limit you would need to request the next page. Similarly for photos. Also, keep in mind facebook won't grant user_photos access until they "review" the app so this will only work for test users until facebook reviews.
Hi, sorry if this is a silly question but would this code download the photos or grabs the URLs of the photos?
hi i have changed the app id but im not be able to see images
When I test this on my local cp, I got this error:
Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.
How?
Thanks for this. But i am not getting photos only for the user, with the app is registered. (in the above example, for the user registered the app with appId: '548466918497006')