Embedding Facebook Gallery on Website
This code allows you to embed a Facebook gallery from a page directly on a website using Facebook's API. It requires jQuery and Fancybox.
To use place the following javascript and css on your website. Then place <div id="facebookPhotoGallery"></div>
where you want the gallery to be. Replace PAGE ID HERE
with the ID of your Facebook page.
JavaScript
(function($) {
var History = window.History;
jQuery.support.cors = true;
jQuery.ajaxSetup({
beforeSend: function() {
$('.loader').show();
},
complete: function(){
$('.loader').hide();
}
});
function processState(state) {
if('album' in state.data) {
$.fancybox.close();
facebookAlbumImages(state.data.album);
} else if('image' in state.data) {
// get the album id
$.getJSON('https://graph.facebook.com/' + state.data.image, function(response) {
var re = /a\.([0-9]+)\./g;
facebookAlbumImages(re.exec(response.link)[1]);
});
} else {
facebookAlbums(PAGE ID HERE);
}
}
// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
var state = History.getState(); // Note: We are using History.getState() instead of event.state
processState(state);
});
function facebookAlbumImages(albumID) {
$.getJSON('https://graph.facebook.com/' + albumID + '/photos?callback=?', function(response) {
var data = response.data;
if(!('image' in History.getState().data)) {
History.pushState({album:albumID}, null, "?album=" + albumID);
}
$("#facebookPhotoGallery").html("<div id='facebookImages'></div>");
$.each(data, function(index, imageData) {
var thumb = imageData.images[5];
$("#facebookImages").append("<div class='facebookImgThumb " + imageData.id + "'><a href='" + imageData.source + "' title='' class='fancybox' rel='facebookGalleryImages'><i style='background-image: url(" + thumb.source + ")'></i></a></div>");
});
});
}
$(document).on("click", ".facebookImgThumb > a.fancybox", function() {
var imageID = $(this).parent().attr("class").split(" ")[1];
History.pushState({image:imageID}, null, "?image=" + imageID);
});
function facebookAlbums(oID) {
$.getJSON('https://graph.facebook.com/' + oID + '/albums?callback=?', function(response) {
console.log("working?");
var data = response.data;
$("#facebookPhotoGallery").html("<div id='facebookAlbums'></div>");
$.each(data, function(index, val) {
if('cover_photo' in val) {
$.getJSON('https://graph.facebook.com/' + val.cover_photo + '?callback=?', function(responsePicture) {
// calculate size
var image = responsePicture.images[5];
$("#facebookAlbums").append("<div class='facebookImgThumb " + val.id + "'><i style='background-image: url(" + image.source + ")'></i><p>" + val.name + "</p></div>");
});
}
});
}).error(function(jqXHR, textStatus, errorThrown) {
alert(errorThrown);
});
$(document).on("click", ".facebookImgThumb", function() {
$(document).off("click", ".facebookImgThumb");
var albumID = $(this).attr("class").split(" ")[1];
History.pushState({album:albumID}, null, "?album=" + albumID);
});
}
$(".fancybox").fancybox({
openEffect: 'none',
closeEffect: 'none',
afterClose: function() {
console.log("Going back!");
History.back();
}
});
processState(History.getState());
})(jQuery);
CSS
.facebookImgThumb i {
border: 2px solid #b0b0b0;
padding: 0;
margin: 0;
vertical-align: middle;
width: 149px;
height: 116px;
display: inline-block;
background-position: center 25%;
background-repeat: no-repeat;
}
.facebookImgThumb p {
vertical-align: bottom;
font-size: 0.85em;
}
.facebookImgThumb {
margin: 5px;
display: inline-block;
width: 151px;
}
.facebookImgThumb:hover {
cursor: pointer;
}
.loader{
display:none;
/*set the div in the bottom right corner*/
position:fixed;
bottom:8px;
right:8px;
width:31px;
height:31px;
/*give it some background and border*/
background:url(https://dl.dropbox.com/u/1017142/ajax-loader.gif) no-repeat;
}
Loading Conversation