Instantly share code, notes, and snippets.

Embed
What would you like to do?
Embedded Facebook Page Photo Gallery with jQuery
@alexdunae

This comment has been minimized.

Show comment
Hide comment
@alexdunae
Owner

alexdunae commented Sep 24, 2011

@rexonms

This comment has been minimized.

Show comment
Hide comment
@rexonms

rexonms Jan 27, 2012

The code is working fine but it's only pulls the profile image, when I put the gallery ID as profile/page id. What if I want to show photos from a certain album?

rexonms commented Jan 27, 2012

The code is working fine but it's only pulls the profile image, when I put the gallery ID as profile/page id. What if I want to show photos from a certain album?

@alexdunae

This comment has been minimized.

Show comment
Hide comment
@alexdunae

alexdunae Jan 27, 2012

What ID are you using?

Owner

alexdunae commented Jan 27, 2012

What ID are you using?

@rexonms

This comment has been minimized.

Show comment
Hide comment
@rexonms

rexonms Jan 27, 2012

Hey thanks for the quick response.

I got the details from http://graph.facebook.com/CJPBoston/albums. The id I used is 39668771998, which shows our profile picture. But I want to show the photos of the lets say the first album "Lawyers & Accountants Dinner". I used 10150611091166999 but it isn't working.
I created a fille at http://jsfiddle.net/rexonms/dvMYp/
Thanks in advance.

rexonms commented Jan 27, 2012

Hey thanks for the quick response.

I got the details from http://graph.facebook.com/CJPBoston/albums. The id I used is 39668771998, which shows our profile picture. But I want to show the photos of the lets say the first album "Lawyers & Accountants Dinner". I used 10150611091166999 but it isn't working.
I created a fille at http://jsfiddle.net/rexonms/dvMYp/
Thanks in advance.

@alexdunae

This comment has been minimized.

Show comment
Hide comment
@alexdunae
Owner

alexdunae commented Jan 27, 2012

@rexonms

This comment has been minimized.

Show comment
Hide comment
@rexonms

rexonms Jan 27, 2012

Now it's working !!! I must have mess up something between the testing and live site. Thanks for the quick response. Really helped me fot this the project.

rexonms commented Jan 27, 2012

Now it's working !!! I must have mess up something between the testing and live site. Thanks for the quick response. Really helped me fot this the project.

@jas712

This comment has been minimized.

Show comment
Hide comment
@jas712

jas712 Mar 29, 2012

Hi!
I wonder why my photos from facebook does not sync with your code?
Is it because I need to create a facebook app or sth? Please advice! Thanks

jas712 commented Mar 29, 2012

Hi!
I wonder why my photos from facebook does not sync with your code?
Is it because I need to create a facebook app or sth? Please advice! Thanks

@rexonms

This comment has been minimized.

Show comment
Hide comment
@rexonms

rexonms Mar 29, 2012

Hi Jas, you don't need to created an app, that's the beauty of this code. Is the code working when you copy and paste the code as is? If yes, than just change the gallery id no. If no, then probably there is something wrong on how the page is set up. For me the code didn't work on dreamweaver live site testing, but worked when I uploaded to the server!!!

rexonms commented Mar 29, 2012

Hi Jas, you don't need to created an app, that's the beauty of this code. Is the code working when you copy and paste the code as is? If yes, than just change the gallery id no. If no, then probably there is something wrong on how the page is set up. For me the code didn't work on dreamweaver live site testing, but worked when I uploaded to the server!!!

@jas712

This comment has been minimized.

Show comment
Hide comment
@jas712

jas712 Mar 29, 2012

Thanks rexonms!
I tried like how you did, created a new album, set it to public
but it didn't work, http://jsfiddle.net/jas712/kMYeu/1/
but I saw your album from facebook graph api, i was trying to access it and it asked for a token
i tried to get the token (googling how), and it asked me to create an app
here is the facebook album: http://www.facebook.com/media/set/?set=a.375929902429823.87482.100000384490282&type=1

I am not sure what I am doing wrong, but thank you for all the help!

jas712 commented Mar 29, 2012

Thanks rexonms!
I tried like how you did, created a new album, set it to public
but it didn't work, http://jsfiddle.net/jas712/kMYeu/1/
but I saw your album from facebook graph api, i was trying to access it and it asked for a token
i tried to get the token (googling how), and it asked me to create an app
here is the facebook album: http://www.facebook.com/media/set/?set=a.375929902429823.87482.100000384490282&type=1

I am not sure what I am doing wrong, but thank you for all the help!

@alexdunae

This comment has been minimized.

Show comment
Hide comment
@alexdunae

alexdunae Mar 29, 2012

Hey @jas712 -- the difference here is that your album is attached to a personal profile, not a fan page. Fan pages allow you to access albums without an access token (e.g. http://graph.facebook.com/TheDialectic/albums) while it seems that profiles require an access token (e.g. http://graph.facebook.com/100000384490282/albums).

If you use the FB graph explorer – https://developers.facebook.com/tools/explorer/?method=GET&path=100000384490282%2Falbums – you can see the you need to grant the 'photo' permissions to get the /albums call to return anything. Easiest for you would probably to setup an app, authorize it and include the access token in the two calls to FB in the snippet.

Owner

alexdunae commented Mar 29, 2012

Hey @jas712 -- the difference here is that your album is attached to a personal profile, not a fan page. Fan pages allow you to access albums without an access token (e.g. http://graph.facebook.com/TheDialectic/albums) while it seems that profiles require an access token (e.g. http://graph.facebook.com/100000384490282/albums).

If you use the FB graph explorer – https://developers.facebook.com/tools/explorer/?method=GET&path=100000384490282%2Falbums – you can see the you need to grant the 'photo' permissions to get the /albums call to return anything. Easiest for you would probably to setup an app, authorize it and include the access token in the two calls to FB in the snippet.

@rexonms

This comment has been minimized.

Show comment
Hide comment
@rexonms

rexonms Mar 29, 2012

Humm interesting, I did couple of test.... It seems like it's not showing the gallery when it's calling from personal account but calling the gallery of a page (company or business) is working. I don't know what the logic is behind it but if you create a page, and create a gallery inside it. It should work.
Sorry, that might not be what you are looking for. Alex might be able to tell how make the function work on personal page.

rexonms commented Mar 29, 2012

Humm interesting, I did couple of test.... It seems like it's not showing the gallery when it's calling from personal account but calling the gallery of a page (company or business) is working. I don't know what the logic is behind it but if you create a page, and create a gallery inside it. It should work.
Sorry, that might not be what you are looking for. Alex might be able to tell how make the function work on personal page.

@jas712

This comment has been minimized.

Show comment
Hide comment
@jas712

jas712 Mar 30, 2012

Thanks for advices!
Actually it doesn't matter what kind of page is it! As long as it is able to get photos out from facebook album!
I got it working with a organization page. Thats good enough for me!

Thanks for the code! is very helpful!

jas712 commented Mar 30, 2012

Thanks for advices!
Actually it doesn't matter what kind of page is it! As long as it is able to get photos out from facebook album!
I got it working with a organization page. Thats good enough for me!

Thanks for the code! is very helpful!

@alexdunae

This comment has been minimized.

Show comment
Hide comment
@alexdunae

alexdunae Mar 30, 2012

Nice -- glad you got something workable.

Owner

alexdunae commented Mar 30, 2012

Nice -- glad you got something workable.

@frye-guy

This comment has been minimized.

Show comment
Hide comment
@frye-guy

frye-guy Apr 4, 2012

It appears that Facebook has made some changes today. Luckily I fixed the code for you. I also added a closure.

here's the html

<!DOCTYPE HTML>
<html>
<head>
<style>
#photo-thumbs{
width: 150px;
float: left;
height:600px;
overflow:auto;
}
#photo-viewer-cont{
width: 600px;
float: right;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.fbphotogallery.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#fb-photo-gallery").fbphotogallery('352411828128688');
});
(function($){  
$.fn.fbphotogallery= function (gallery){
(this).html('<h2 id=\"photo-title\"></h2><div style=\"width: 952px; height: 360px;\"><div class=\"float-menu-css\" id=\"float-menu\"><center><div id=\"photo-thumbs\"></div></center></div><div id=\"photo-viewer-cont\" style=\"float: right; width:600px; margin-left:auto; margin-right:auto;\"><center><img id=\"photo-viewer\" src=\"http://i42.tinypic.com/nwdhc8.gif\"></center></div></div>');
var title = $('#photo-title'),
    viewer = $('#photo-viewer'),
    thumbs = $('#photo-thumbs')
    gallery_id=gallery;

// album info
$.getJSON('http://graph.facebook.com/' + gallery_id + '?callback=?', function(json, status, xhr) {
  title.html('<a href="' + json.link + '">' + json.name + '</a> from ' + json.from.name);
});

// images
$.getJSON('http://graph.facebook.com/' + gallery_id + '/photos/?limit=1000&callback=?', function(json, status, xhr) {
  var imgs = json.data;

  viewer.attr('src', imgs[0].source)
  viewer.attr('alt', imgs[0].name)

  for (var i = 0, l = imgs.length - 1; i < l; i++) {
    $('<img src="' + imgs[i].picture + '" alt="' + imgs[i].name + '" data-fullsize="' + imgs[i].source + '">').appendTo(thumbs);
  }
  $("#float-menu").removeClass("float-menu-css").addClass("float-menu-css");
  $('img', thumbs).bind('click', function(e) {
    e.preventDefault();
    $("#photo-viewer-cont").html('<center><img id=\"photo-viewer\" src=\"http://i42.tinypic.com/nwdhc8.gif\"></center>');
    var viewer = $('#photo-viewer');
    viewer.attr('src', $(this).attr('data-fullsize'));
    viewer.attr('alt', $(this).attr('alt'));
  });
});
};
})(jQuery);
</script></head>

<body>
<div id="fb-photo-gallery"></div>
</body>
</html>

frye-guy commented Apr 4, 2012

It appears that Facebook has made some changes today. Luckily I fixed the code for you. I also added a closure.

here's the html

<!DOCTYPE HTML>
<html>
<head>
<style>
#photo-thumbs{
width: 150px;
float: left;
height:600px;
overflow:auto;
}
#photo-viewer-cont{
width: 600px;
float: right;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.fbphotogallery.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#fb-photo-gallery").fbphotogallery('352411828128688');
});
(function($){  
$.fn.fbphotogallery= function (gallery){
(this).html('<h2 id=\"photo-title\"></h2><div style=\"width: 952px; height: 360px;\"><div class=\"float-menu-css\" id=\"float-menu\"><center><div id=\"photo-thumbs\"></div></center></div><div id=\"photo-viewer-cont\" style=\"float: right; width:600px; margin-left:auto; margin-right:auto;\"><center><img id=\"photo-viewer\" src=\"http://i42.tinypic.com/nwdhc8.gif\"></center></div></div>');
var title = $('#photo-title'),
    viewer = $('#photo-viewer'),
    thumbs = $('#photo-thumbs')
    gallery_id=gallery;

// album info
$.getJSON('http://graph.facebook.com/' + gallery_id + '?callback=?', function(json, status, xhr) {
  title.html('<a href="' + json.link + '">' + json.name + '</a> from ' + json.from.name);
});

// images
$.getJSON('http://graph.facebook.com/' + gallery_id + '/photos/?limit=1000&callback=?', function(json, status, xhr) {
  var imgs = json.data;

  viewer.attr('src', imgs[0].source)
  viewer.attr('alt', imgs[0].name)

  for (var i = 0, l = imgs.length - 1; i < l; i++) {
    $('<img src="' + imgs[i].picture + '" alt="' + imgs[i].name + '" data-fullsize="' + imgs[i].source + '">').appendTo(thumbs);
  }
  $("#float-menu").removeClass("float-menu-css").addClass("float-menu-css");
  $('img', thumbs).bind('click', function(e) {
    e.preventDefault();
    $("#photo-viewer-cont").html('<center><img id=\"photo-viewer\" src=\"http://i42.tinypic.com/nwdhc8.gif\"></center>');
    var viewer = $('#photo-viewer');
    viewer.attr('src', $(this).attr('data-fullsize'));
    viewer.attr('alt', $(this).attr('alt'));
  });
});
};
})(jQuery);
</script></head>

<body>
<div id="fb-photo-gallery"></div>
</body>
</html>
@alexdunae

This comment has been minimized.

Show comment
Hide comment
@alexdunae

alexdunae Apr 4, 2012

@frye-guy what was the change FB made?

Owner

alexdunae commented Apr 4, 2012

@frye-guy what was the change FB made?

@frye-guy

This comment has been minimized.

Show comment
Hide comment
@frye-guy

frye-guy Apr 4, 2012

the json array changed

frye-guy commented Apr 4, 2012

the json array changed

@frye-guy

This comment has been minimized.

Show comment
Hide comment
@frye-guy

frye-guy Apr 4, 2012

Sorry, I'm new to GitHub. I am not sure how to make my post appear right :-} How do you make code appear in your post

frye-guy commented Apr 4, 2012

Sorry, I'm new to GitHub. I am not sure how to make my post appear right :-} How do you make code appear in your post

@alexdunae

This comment has been minimized.

Show comment
Hide comment
@alexdunae

alexdunae Apr 4, 2012

No worries -- indent it four spaces.

With these little gists, the best thing to do is click the 'fork' button -- that way I can see exactly what you changed.

Owner

alexdunae commented Apr 4, 2012

No worries -- indent it four spaces.

With these little gists, the best thing to do is click the 'fork' button -- that way I can see exactly what you changed.

@jas712

This comment has been minimized.

Show comment
Hide comment
@jas712

jas712 Apr 4, 2012

thanks man for the update
wow

jas712 commented Apr 4, 2012

thanks man for the update
wow

@jasbirajji

This comment has been minimized.

Show comment
Hide comment
@jasbirajji

jasbirajji Aug 15, 2012

hey i try your b-gallery-embed.html code it is working but it shown not more than 30 pics and not shown latest first. So please tell me how i can do this.

Thanks

jasbirajji commented Aug 15, 2012

hey i try your b-gallery-embed.html code it is working but it shown not more than 30 pics and not shown latest first. So please tell me how i can do this.

Thanks

@jadengore

This comment has been minimized.

Show comment
Hide comment
@jadengore

jadengore Feb 25, 2013

I know this is an old post but I am trying to modify either the gallery or original version to be 450px wide (if gallery version, include sidebar). How would I go about doing that?

jadengore commented Feb 25, 2013

I know this is an old post but I am trying to modify either the gallery or original version to be 450px wide (if gallery version, include sidebar). How would I go about doing that?

@zirta

This comment has been minimized.

Show comment
Hide comment
@zirta

zirta Mar 3, 2013

Thank you Alex Dunae for sharing this! I'm currently using Frye-Guy's version at my site http://oseano.net/?x=fanart
I'm wondering how can I include the picture's caption with hyperlinks? Thank you in advance for your attention.

zirta commented Mar 3, 2013

Thank you Alex Dunae for sharing this! I'm currently using Frye-Guy's version at my site http://oseano.net/?x=fanart
I'm wondering how can I include the picture's caption with hyperlinks? Thank you in advance for your attention.

@jackshalliday

This comment has been minimized.

Show comment
Hide comment
@jackshalliday

jackshalliday May 16, 2013

Hi there, just wondering how I can display the photos in an "instagram-like" format (grid)?

Thanks

jackshalliday commented May 16, 2013

Hi there, just wondering how I can display the photos in an "instagram-like" format (grid)?

Thanks

@bballah23

This comment has been minimized.

Show comment
Hide comment
@bballah23

bballah23 Jan 18, 2014

Yes, how do we display the album in grid format or like facebookgalleria.com ?? Thanks!

bballah23 commented Jan 18, 2014

Yes, how do we display the album in grid format or like facebookgalleria.com ?? Thanks!

@usainicola

This comment has been minimized.

Show comment
Hide comment
@usainicola

usainicola Aug 27, 2014

thank you so much, this has saved me a lot of time
i made it work in my setup but i had to modify line 33 because i noticed that if the album contained just one image that was not showing in the thumbs div so i changed
i < l
to
i <= l
and now it is perfect :)

usainicola commented Aug 27, 2014

thank you so much, this has saved me a lot of time
i made it work in my setup but i had to modify line 33 because i noticed that if the album contained just one image that was not showing in the thumbs div so i changed
i < l
to
i <= l
and now it is perfect :)

@ninjazhai

This comment has been minimized.

Show comment
Hide comment
@ninjazhai

ninjazhai Jun 9, 2017

You can use PHP to JSON-format the data from Facebook. jQuery or JavaScript can render the photos to a webpage based on this JSON data. This tutorial is a good starting point https://www.codeofaninja.com/2011/06/display-facebook-photos-to-your-website.html

If you are doing this for a client or a business website, you can ask your client to use website plugins such as https://www.displaysocialmedia.com/embed-show-display-facebook-photo-album-on-website/

ninjazhai commented Jun 9, 2017

You can use PHP to JSON-format the data from Facebook. jQuery or JavaScript can render the photos to a webpage based on this JSON data. This tutorial is a good starting point https://www.codeofaninja.com/2011/06/display-facebook-photos-to-your-website.html

If you are doing this for a client or a business website, you can ask your client to use website plugins such as https://www.displaysocialmedia.com/embed-show-display-facebook-photo-album-on-website/

@paulanthony12

This comment has been minimized.

Show comment
Hide comment
@paulanthony12

paulanthony12 Dec 12, 2017

This doesn't work anymore. Anyone update it?

paulanthony12 commented Dec 12, 2017

This doesn't work anymore. Anyone update it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment