Skip to content

Instantly share code, notes, and snippets.

@alexdunae
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.
Embedded Facebook Page Photo Gallery with jQuery
@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