Naar de inhoud
bouwman.io

Instagram feed automatisch op je website

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.

Draait al ergens

Deze koppeling draait op de site van Café Heuvel in Amsterdam. Wil je zien hoe het er in het echt uitziet, kijk daar dan even naar de Instagram-sectie.

Bekijk cafeheuvel.nl

Hoe het werkt

  1. 1

    Instagram ophalen

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

  2. 2

    Filteren

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

  3. 3

    Foto's opslaan

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

  4. 4

    JSON aanmaken

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

  5. 5

    Feed laden

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

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.