.instagram-feed { display: flex; flex-wrap: wrap; gap: 10px; } .instagram-post { width: calc(33.33% - 10px); } .instagram-post img { width: 100%; height: auto; } function fetchInstagramFeed() { // Replace 'YOUR_INSTAGRAM_ACCESS_TOKEN' with your actual access token var accessToken = 'Interco_Visualiza_2023'; var postsToShow = 20; // Replace 'USER_ID' with the actual user ID for the Instagram account var userId = 'isaintercolombia'; var apiUrl = 'https://graph.instagram.com/v12.0/' + userId + '/media?fields=id,caption,media_type,media_url,thumbnail_url,permalink,timestamp&access_token=' + accessToken + '&limit=' + postsToShow; fetch(apiUrl) .then(response => response.json()) .then(data => { var instagramFeed = document.getElementById('instagramFeed'); instagramFeed.innerHTML = ''; if (data && data.data) { data.data.forEach(post => { var postElement = document.createElement('div'); postElement.className = 'instagram-post'; var linkElement = document.createElement('a'); linkElement.href = post.permalink; linkElement.target = '_blank'; var imageElement = document.createElement('img'); imageElement.src = post.thumbnail_url; imageElement.alt = post.caption; linkElement.appendChild(imageElement); postElement.appendChild(linkElement); instagramFeed.appendChild(postElement); }); } else { instagramFeed.innerHTML = '

Unable to fetch Instagram feed. Please check your access token and try again.

'; } }) .catch(error => { console.error('Error fetching Instagram feed:', error); }); } // Initial fetch fetchInstagramFeed(); // Auto-refresh the feed every 30 minutes (adjust as needed) setInterval(fetchInstagramFeed, 1800000);