Make.com integratie

Instagram feed automatisch op je website met Make.com

Je laatste Instagram foto's worden automatisch opgehaald en als feed op je website getoond. Geen plugins, geen account nodig, gewoon een Make.com abonnement dat je al hebt.

✓gratis met bestaand account
✓5 of 10 foto's
✓automatisch bijwerken

Hoe het werkt

Instagram ophalen

Make.com logt in via de Instagram Business API en haalt de laatste 20 posts op.

Filteren

Alleen foto's en albums worden meegenomen (geen Reels). De teller stopt bij 5 of 10 stuks.

Foto's opslaan

Elke foto wordt gedownload en opgeslagen op je server als ig-01.jpg tot ig-05.jpg.

JSON aanmaken

Make.com schrijft een instagram.json naar je server met de links en bijschriften.

Feed laden

Een stukje JavaScript leest de JSON en toont de foto's als klikbare grid op je pagina.

Zo ziet de feed eruit

📷

Sfeervolle avond op het terras...

📷

Nieuwe seizoenskaart is er!

📷

Dank voor alle lieve reacties...

📷

Live muziek vanavond van...

📷

Zaterdag open vanaf 12 uur.

Klikbaar, mobile-responsive, automatisch bijgewerkt zolang Make.com draait.

Make.com blueprint

Importeer de blueprint direct in je Make.com account. Je hoeft alleen nog je Instagram Business verbinding en je FTP-koppeling in te stellen.

Open blueprint ↗

5 of 10 foto's

Standaard pakt de blueprint de laatste 5 foto's. Wil je er 10, pas dan dit filter aan in de router-stap:

filter: {{14.i}} < 6   // 5 foto's
filter: {{14.i}} < 11  // 10 foto's

De bestandsnamen lopen dan door van ig-01.jpg tot ig-10.jpg. Het JSON-bestand en de HTML hoef je niet aan te passen.

Code voor op je site

Klik een fragment open om de volledige code te zien.

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 · sectie

<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 · stijlen

.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;
}

Gebouwd door Remco Bouwman voorCafé Heuvel Amsterdam. Werkt met elk Make.com abonnement. Gratis · Instagram Business API · Make.com