-
-
Save alexdunae/1239554 to your computer and use it in GitHub Desktop.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset='utf-8'> | |
<title>Embedded Facebook Page Photo Gallery with jQuery</title> | |
<style type='text/css'> #thumbs{float:left;width:200px;} #thumbs img{display:block;margin:0 0 10px;cursor:pointer;} #viewer{float:left;} </style> | |
</head> | |
<body> | |
<h1>Embedded Facebook Page Photo Gallery with jQuery</h1> | |
<h2></h2> | |
<nav id='thumbs'></nav> | |
<img id='viewer'> | |
<script src="//code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script> | |
<script type="text/javascript"> | |
(function (gallery_id) { | |
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')); | |
}); | |
}); | |
})('426067170422'); // let's go -- put the gallery ID here | |
</script> | |
</body> | |
</html> |
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?
What ID are you using?
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.
Hmm, works for me: http://jsfiddle.net/alexdunae/dNUHm/2/
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.
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
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!!!
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!
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.
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.
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!
Nice -- glad you got something workable.
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 what was the change FB made?
the json array changed
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
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.
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?
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 :)
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>AMBIENCE PUBLIC SCHOOL
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>
</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 & 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
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/
This doesn't work anymore. Anyone update it?
Check out a sample here: http://dialect.ca/code/fb-gallery-embed.html