Skip to content

Instantly share code, notes, and snippets.

@alexdunae

alexdunae/fb-gallery-embed.html

Created September 24, 2011 17:05
Show Gist options
  • Save alexdunae/1239554 to your computer and use it in GitHub Desktop.
Save alexdunae/1239554 to your computer and use it in GitHub Desktop.
Download ZIP
Embedded Facebook Page Photo Gallery with jQuery
@jas712
Copy link

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
Copy link
Author

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
Copy link

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
Copy link

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
Copy link
Author

Nice -- glad you got something workable.

@frye-guy
Copy link

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
Copy link
Author

@frye-guy what was the change FB made?

@frye-guy
Copy link

frye-guy commented Apr 4, 2012

the json array changed

@frye-guy
Copy link

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
Copy link
Author

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
Copy link

jas712 commented Apr 4, 2012

thanks man for the update
wow

@jasbirajji
Copy link

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

@ebramanti
Copy link

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
Copy link

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
Copy link

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

Thanks

@bballah23
Copy link

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

@usainicola
Copy link

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

@sangitachadha
Copy link

Need help to show the thumbnails of the pictures from the facebook account onto the website. Did copied the code but not working. Please help..

<title>APS</title> <script type="text/javascript" src="js/html5shiv.js"></script> <style type='text/css'> #thumbs{float:left;width:200px;} #thumbs img{display:block;margin:0 0 10px;cursor:pointer;} #viewer{float:left;} </style>

44th Annual Day Celebration 2015 in Siri Fort Auditorium

<script src="//code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>  
<script type="text/javascript">
  (function (1002933559771598) {
    var title = $('h2'),
        viewer = $('#viewer'),
        thumbs = $('#thumbs');
    
    // album info
    $.getJSON('//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('//graph.facebook.com/' + gallery_id + '/photos?callback=?', function(json, status, xhr) {
      var imgs = json.data;
      viewer.attr('src', imgs[0].images[0].source)
      for (var i = 0, l = imgs.length - 1; i < l; i++) {
        $('<img src="' + imgs[i].images[3].source + '" data-fullsize="' + imgs[i].images[0].source + '">').appendTo(thumbs);
      }
  
      $('img', thumbs).bind('click', function(e) {
        e.preventDefault();
        viewer.attr('src', $(this).attr('data-fullsize'));
      });
    });
  })('1002933559771598');
</script>

Back


  • Conference Room
  • Sports Facilities
  • Reflection Room
  • Art Room
  • Performing Arts
  • Medical Clinic
    •             </ul>
            <ul>
                                    <li><a href="cafeteria.html">Cafeteria</a></li>
                <li><a href="our-curriculum-apporach.html">Our Curriculum Approach</a></li>
                <li><a href="formative-years-programe.html">Formative Years Programme</a></li>
                <li><a href="examination-and-evaluation.html">Examination &amp; Evaluation</a></li>
                <li><a href="cbse-result-for-xii.html">CBSE Results Online</a></li>
                <li><a href="download-center.html">Download Center</a></li>
                
            </ul>
            <ul>
                <li><a href="school-appointees.html">School Appointments</a></li>
                <li><a href="club-and-socities.html">Clubs & Societies</a></li>
                <li><a href="club-and-socities.html">School Houses</a></li>
                <li><a href="cafeteria.html">Snack Menu for Kids</a></li>
                <li><a href="online-registration-form.html">Online Registration</a></li>
            </ul>
            <ul class="last address">
                <li>
                <h3>Ambience Public School</h3>
                <p> A-1, Safdurjung Enclave, New Delhi-110029 </p>

    Phone : +91-11-47232000, 26109739, 26105548

    info@ambiencepublicschool.com

Copyright 2013. All Right Reserved

The album to be connected is
https://www.facebook.com/media/set/?set=a.1002933559771598.1073742030.363762413688719&type=3

@ninjazhai
Copy link

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
Copy link

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