Masonry + WOW mit der Facebook API nutzen

Was ich gelernt habe, als ich versucht habe, Masonry und WOW mit der Facebook API zu kombinieren…

Die Geschichte

Ich hatte mit diesen zwei Javascript Libaries erst dann zu tun, als der Kunde AKSA Supermarkt mich darum gebeten hat, Ihre letzten Angebote auf der Startseite Ihrer Homepage anzeigen zu lassen. Er hat auch noch hinzugefügt gehabt, dass Sie die Webseite nicht pflegen, sondern diese Inhalte automatisch aus dem Facebook-Feed gezogen werden sollen.

Den Facebook-Feed habe ich bereits erfolgreich programmiert gehabt. Es hat also nur noch gefehlt, dass diese automatisch auf der Webseite in einem schönen Grid angezeigt werden. Ich habe leider keine Screenshots gemacht und aufgrund eines Kundenwunsches eine andere Methode angewandt, jedoch werde ich trotzdem versuchen es euch zu erklären.

 

Meine Versuche

Da ich zu diesem Zeitpunkt die Facebook Javascript API genutzt habe, habe ich mir gedacht, dass die beste Methode sein könnte, Masonry nach dem einfügen des Feeds zu laden. Also:


FB.api( '/110096102829742', 'GET', {
	"fields":"id,name,posts{full_picture,likes{name,pic,pic_large},comments}",
	access_token: 'EAACEdEose0c…',
},function(response) {
	//Hier habe ich noch die Elemente erstellt, die von der API zurückgegeben wurden
	var $grid = $('.wow-grid').masonry({
		itemSelector: '.wow-grid-item', percentPosition: true,
	});
	$grid.imagesLoaded().progress( function() {
		$grid.masonry('layout');
	});
});
Erster Versuch: Direkt in der API-Abfrage

FB.api( '/110096102829742', 'GET', {
	"fields":"id,name,posts{full_picture,likes{name,pic,pic_large},comments}",
	access_token: 'EAACEdEose0c…',
},function(response) {
	//Hier habe ich noch die Elemente erstellt, die von der API zurückgegeben wurden
	$grid.imagesLoaded().progress( function() {
		var $grid = $('.wow-grid').masonry({
			itemSelector: '.wow-grid-item', percentPosition: true,
		});
	});
});
Zweiter Versuch: Nachdem alle Bilder geladen wurden

$(document).ready(function() {
	//Hier habe ich noch die Elemente erstellt, die von der API zurückgegeben wurden
	var $grid = $('.wow-grid').masonry({
		itemSelector: '.wow-grid-item', percentPosition: true,
	});
	$grid.imagesLoaded().progress( function() {
		$grid.masonry('layout');
	});
});
Dritter Versuch:$(document).ready

Alle diese Versuche sind gescheitert und MasonryJs hat nur alle Elemente absolut und falsch positioniert. Es hat nur ein letzter Ansatz geklappt:


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

Themen

Facebook Javascript Social Media

Beitrag teilen

Whatsappen