Skip to content
bouwman.io

Instagram feed on your site, automatically

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 already have.

Already running somewhere

This integration runs on the website of Café Heuvel in Amsterdam. If you want to see what it looks like in the wild, have a look at the Instagram section there.

Visit cafeheuvel.nl

How it works

  1. 1

    Fetch Instagram

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

  2. 2

    Filter

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

  3. 3

    Save the photos

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

  4. 4

    Build the JSON

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

  5. 5

    Load the feed

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

Make.com blueprint

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

Open blueprint

5 or 10 photos

By default the blueprint takes the latest 5 photos. If you want 10, change 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

Open a fragment to see 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="View Instagram post">
        <div class="ig-card">
          <div class="ig-image-wrapper">
            <img src="${post.image}" alt="Instagram photo" loading="lazy">
          </div>
          ${post.caption
            ? `<p class="ig-caption">${post.caption}</p>`
            : ''}
        </div>
      </a>
    `).join('');
  } catch (e) {
    // Feed unavailable, the placeholder stays visible
  }
}
loadInstagram();
HTML · section
<section id="instagram" class="section section-instagram"
         aria-labelledby="ig-title">
  <div class="container">
    <div class="section-header">
      <h2 id="ig-title">Instagram</h2>
    </div>
    <p class="section-intro">
      Follow us for the latest photos and news.
    </p>
    <div class="instagram-grid" id="instagram-feed">
      <div class="ig-placeholder">
        <a href="https://www.instagram.com/youraccount/"
           target="_blank" rel="noopener" class="btn-outline">
          @youraccount
        </a>
        <p class="ig-note">
          The Instagram feed will appear here once the
          connection is active.
        </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.