Make.com integration

An Instagram feed on your website, automatically, with Make.com

Your latest Instagram photos are pulled in automatically and shown as a feed on your website. No plugins, no account needed, just a Make.com subscription you probably already have.

✓free with an existing account
✓5 or 10 photos
✓updates automatically

How it works

Fetch Instagram

Make.com logs in through the Instagram Business API and pulls the latest 20 posts.

Filter

Only photos and albums are included (no Reels). The counter stops at 5 or 10.

Save the photos

Each photo is downloaded and saved on your server as ig-01.jpg through ig-05.jpg.

Build the JSON

Make.com writes an instagram.json file to your server with the links and captions.

Load the feed

A small piece of JavaScript reads the JSON and shows the photos as a clickable grid on your page.

What the feed looks like

📷

Sfeervolle avond op het terras...

📷

Nieuwe seizoenskaart is er!

📷

Dank voor alle lieve reacties...

📷

Live muziek vanavond van...

📷

Zaterdag open vanaf 12 uur.

Clickable, mobile-responsive, and updated automatically as long as Make.com keeps running.

Make.com blueprint

Import the blueprint straight into your Make.com account. All you need to set up is your Instagram Business connection and your FTP connection.

Open blueprint ↗

5 or 10 photos

By default, the blueprint takes the last 5 photos. Want 10 instead? Adjust this filter in the router step:

filter: {{14.i}} < 6   // 5 photos
filter: {{14.i}} < 11  // 10 photos

The filenames then run from ig-01.jpg through ig-10.jpg. You don't need to change the JSON file or the HTML.

Code for your site

Click a fragment to open the full code.

JavaScript · main.js

async function loadInstagram() {
  try {
    const res = await fetch('instagram.json');
    if (!res.ok) return;
    const data = await res.json();
    const feed = document.getElementById('instagram-feed');
    if (!data.posts || !data.posts.length) return;
    feed.innerHTML = data.posts.map(post => `
      <a class="ig-photo" href="${post.link}" target="_blank"
         rel="noopener" aria-label="Bekijk Instagram post">
        <div class="ig-card">
          <div class="ig-image-wrapper">
            <img src="${post.image}" alt="Instagram foto" loading="lazy">
          </div>
          ${post.caption
            ? `<p class="ig-caption">${post.caption}</p>`
            : ''}
        </div>
      </a>
    `).join('');
  } catch (e) {
    // Feed niet beschikbaar, placeholder blijft zichtbaar
  }
}
loadInstagram();

HTML · section

<section id="instagram" class="section section-instagram"
         aria-labelledby="ig-titel">
  <div class="container">
    <div class="section-header">
      <h2 id="ig-titel">Instagram</h2>
    </div>
    <p class="section-intro">
      Volg ons voor de laatste sfeerbeelden en nieuwtjes.
    </p>
    <div class="instagram-grid" id="instagram-feed">
      <div class="ig-placeholder">
        <a href="https://www.instagram.com/jouwaccount/"
           target="_blank" rel="noopener" class="btn-outline">
          @jouwaccount
        </a>
        <p class="ig-note">
          De Instagram-feed is hier straks zichtbaar zodra
          de koppeling actief is.
        </p>
      </div>
    </div>
  </div>
</section>

CSS · styles

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
}

.ig-photo { text-decoration: none; color: inherit; display: block; }

.ig-card {
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  background: #fff;
  transition: box-shadow 0.2s ease;
}
.ig-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }

.ig-image-wrapper { aspect-ratio: 1 / 1; overflow: hidden; }

.ig-image-wrapper img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.3s ease;
}
.ig-card:hover .ig-image-wrapper img { transform: scale(1.04); }

.ig-caption {
  padding: 10px 12px;
  font-size: 0.85rem; line-height: 1.4; color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden; margin: 0;
}

Built by Remco Bouwman forCafé Heuvel Amsterdam. Works with any Make.com subscription. Free · Instagram Business API · Make.com