Use Masonry + WOW with the Facebook API

What i've learned when i tried to combine Masonry and WOW with the Facebook API...

The Story

I had to do with these two javascript libaries, as the customer AKSA supermarket asked me to display their last offers on the homepage of their website. He has also added that they don’t want to the website, but want it to be automatically dragged from the Facebook feed.

I have already successfully programmed the Facebook feed, so it just was missing that they are automatically displayed on the web page in a nice grid. I have unfortunately not made any screenshots and applied a different method because of a customer request, but I will nevertheless try to explain to you.

 

My attempts

Since I used the Facebook Javascript API at this time, I thought that the best way to load Masonry after the feed was loaded. So:


FB.api( '/110096102829742', 'GET', {
	"fields":"id,name,posts{full_picture,likes{name,pic,pic_large},comments}",
	access_token: 'EAACEdEose0c…',
},function(response) {
	//Here I have created the elements that have been returned by the API
	var $grid = $('.wow-grid').masonry({
		itemSelector: '.wow-grid-item', percentPosition: true,
	});
	$grid.imagesLoaded().progress( function() {
		$grid.masonry('layout');
	});
});
First attempt: Directly in the API query

FB.api( '/110096102829742', 'GET', {
	"fields":"id,name,posts{full_picture,likes{name,pic,pic_large},comments}",
	access_token: 'EAACEdEose0c…',
},function(response) {
	//Here I have created the elements that have been returned by the API
	$grid.imagesLoaded().progress( function() {
		var $grid = $('.wow-grid').masonry({
			itemSelector: '.wow-grid-item', percentPosition: true,
		});
	});
});
Second attempt: After all images have been loaded

$(document).ready(function() {
	//Here I have created the elements that have been returned by the API
	var $grid = $('.wow-grid').masonry({
		itemSelector: '.wow-grid-item', percentPosition: true,
	});
	$grid.imagesLoaded().progress( function() {
		$grid.masonry('layout');
	});
});
Third attempt: $(document).ready

All these attempts have failed and MasonryJs has positioned all elements absolutely and incorrectly. Only one last approach has worked:


$( window ).load(function() {
	var $grid = $('.wow-grid').masonry({
		itemSelector: '.wow-grid-item', percentPosition: true,
	});
	$grid.imagesLoaded().progress( function() {
		$grid.masonry('layout');
	});
});
Last try: $(window).load

Themen

Facebook Javascript Social Media

Beitrag teilen

Whatsappen