Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Embedded Facebook Page Photo Gallery with jQuery
Owner

alexdunae commented Sep 24, 2011

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?

Owner

alexdunae commented Jan 27, 2012

What ID are you using?

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.

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 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 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 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!

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 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 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!

Owner

alexdunae commented Mar 30, 2012

Nice -- glad you got something workable.

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>
Owner

alexdunae commented Apr 4, 2012

@frye-guy what was the change FB made?

frye-guy commented Apr 4, 2012

the json array changed

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

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 commented Apr 4, 2012

thanks man for the update
wow

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

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 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.

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

Thanks

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

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 :)

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/

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