From 04a1e85b34763a035ffdb8b7e3daf6a21d90f560 Mon Sep 17 00:00:00 2001
From: wgroeneveld <wouter.groeneveld@gmail.com>
Date: Mon, 11 May 2020 10:27:19 +0200
Subject: [PATCH] get fb feed dynamically

---
 layouts/index.html | 41 +++++++++++++++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/layouts/index.html b/layouts/index.html
index 85ccb55..c0dd462 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -59,17 +59,42 @@
 <!-- BLOCK: facebook posts -->
 <div class='post post_content'>
 	<h1>
-		<a href="https://facebook.com/redzuurdesem">Facebook posts</a> &raquo;
+		<a href="https://facebook.com/redzuurdesem">Laatste Facebook posts</a> &raquo;
 	</h1>
 </div>
-<ul class='posts wrap' id = 'posts'>
-	<li class = 'post_item'>
-		<div class="fb-post" data-href="https://www.facebook.com/redzuurdesem/posts/3067948703326127"></div>
-	</li>
-	<li class = 'post_item'>
-		<div class="fb-post" data-href="https://www.facebook.com/redzuurdesem/posts/3063110147143316"></div>
-	</li>
+<ul class='posts wrap' id = 'fbposts'>
 </ul>
+<script>
+	window.fbAsyncInit = function() {
+		var fbposts = document.querySelector('#fbposts');
+		function whoops(error) {
+			console.log(error);
+			fbposts.innerHTML = "<li>Er is iets misgelopen bij het ophalen van Facebook posts.</li>";
+		}
+		function parseFeed(response) {
+			if(response && !response.error) {
+				var html = "";
+
+				response.data.forEach(function(elem) {
+					var id = elem.id.substring(elem.id.indexOf('_') + 1, elem.id.length);
+					html += "<li class = 'post_item'><div class='fb-post' data-href='https://www.facebook.com/redzuurdesem/posts/" + id + "'></div></li>";
+				});
+
+				fbposts.innerHTML = html;
+				FB.XFBML.parse(fbposts);
+			} else {
+				whoops(response.error);
+			}
+		}
+
+		try {
+			FB.api("/redzuurdesem/feed?limit=6&access_token=EAAn5J1FBPssBAEklcMbCU4PrCZB3aMyLuD3XqYGTaif8gKbx24PH5ZA6WrsQwiSGJzLIuVdHn4s2EymVDXTdrWaKLJqkDACiY5SLreXbeLuXTKirw7bncJM68dKTV7Y7Sp9rroU9IGqSUsJrhIzFvjlZAKBCQwUesut1p03oLPxkVTpNSg2", parseFeed);
+		} catch(e) {
+			whoops(e);
+		}
+	}
+</script>
+
 <div class = 'post post_content'>
 	<h4>
 		<a href="https://facebook.com/redzuurdesem">Bekijk alle Facebook posts</a> &raquo;