Display Instagram Feed on Website

Transform your website with dynamic Instagram content. Learn how to embed Instagram feeds, posts, and stories to boost engagement and showcase your social media presence.

What is Instagram Feed Embedding?

Instagram feed embedding allows you to display your Instagram content directly on your website. This includes posts, stories, highlights, and even live feeds that automatically update as you post new content to Instagram.

By embedding Instagram feeds, you can increase user engagement, showcase your social media presence, and create a more dynamic website experience that keeps visitors coming back for fresh content.

Key Benefits: Increased engagement, fresh content updates, social proof, improved user experience, and better conversion rates.

Instagram Embed Methods

Method 1: Official Instagram Embed

Use Instagram's official embed feature for individual posts:

<!-- Instagram Post Embed -->
<blockquote 
  class="instagram-media" 
  data-instgrm-captioned 
  data-instgrm-permalink="https://www.instagram.com/p/EXAMPLE_POST_ID/"
  data-instgrm-version="14"
  style="background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
  <div style="padding:16px;">
    <a href="https://www.instagram.com/p/EXAMPLE_POST_ID/" style="background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank">
      View this post on Instagram
    </a>
  </div>
</blockquote>
<script async src="//www.instagram.com/embed.js"></script>

Note: Replace "EXAMPLE_POST_ID" with the actual Instagram post ID from the URL.

Method 2: Instagram Basic Display API

Use Instagram's Basic Display API for more control:

// Instagram Basic Display API Implementation
class InstagramFeed {
  constructor(accessToken) {
    this.accessToken = accessToken;
    this.apiUrl = 'https://graph.instagram.com/me';
  }

  async getUserMedia(limit = 20) {
    try {
      const response = await fetch(
        `${this.apiUrl}/media?fields=id,caption,media_type,media_url,thumbnail_url,permalink,timestamp&limit=${limit}&access_token=${this.accessToken}`
      );
      
      const data = await response.json();
      return data.data;
    } catch (error) {
      console.error('Error fetching Instagram data:', error);
      return [];
    }
  }

  async displayFeed(containerId) {
    const media = await this.getUserMedia();
    const container = document.getElementById(containerId);
    
    if (!container) return;

    const feedHTML = media.map(post => this.createPostHTML(post)).join('');
    container.innerHTML = feedHTML;
  }

  createPostHTML(post) {
    return `
      <div class="instagram-post">
        <a href="${post.permalink}" target="_blank">
          <img src="${post.media_url}" alt="${post.caption || 'Instagram post'}" />
        </a>
        <p class="caption">${post.caption || ''}</p>
        <span class="timestamp">${new Date(post.timestamp).toLocaleDateString()}</span>
      </div>
    `;
  }
}

// Usage
const instagramFeed = new InstagramFeed('YOUR_ACCESS_TOKEN');
instagramFeed.displayFeed('instagram-feed-container');

Advanced Instagram Feed Features

Responsive Instagram Grid Layout

Create a responsive grid layout for your Instagram feed:

/* Responsive Instagram Feed Grid */
.instagram-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.instagram-post {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.instagram-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.instagram-post img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.instagram-post .caption {
  padding: 15px;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.instagram-post .timestamp {
  display: block;
  padding: 0 15px 15px;
  font-size: 12px;
  color: #666;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .instagram-feed-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    padding: 15px;
  }
  
  .instagram-post img {
    height: 200px;
  }
}

Instagram Stories Embed

Embed Instagram stories using the Stories API:

// Instagram Stories Embed
class InstagramStories {
  constructor(accessToken) {
    this.accessToken = accessToken;
  }

  async getStories() {
    try {
      const response = await fetch(
        `https://graph.instagram.com/me/stories?fields=id,media_type,media_url,permalink,timestamp&access_token=${this.accessToken}`
      );
      
      const data = await response.json();
      return data.data || [];
    } catch (error) {
      console.error('Error fetching stories:', error);
      return [];
    }
  }

  createStoriesHTML(stories) {
    if (stories.length === 0) {
      return '<p>No stories available</p>';
    }

    return `
      <div class="instagram-stories">
        <h3>Latest Stories</h3>
        <div class="stories-container">
          ${stories.map(story => `
            <div class="story-item">
              <a href="${story.permalink}" target="_blank">
                <img src="${story.media_url}" alt="Instagram story" />
                <span class="story-timestamp">${this.formatTimestamp(story.timestamp)}</span>
              </a>
            </div>
          `).join('')}
        </div>
      </div>
    `;
  }

  formatTimestamp(timestamp) {
    const date = new Date(timestamp);
    const now = new Date();
    const diffInHours = Math.floor((now - date) / (1000 * 60 * 60));
    
    if (diffInHours < 1) return 'Just now';
    if (diffInHours < 24) return `${diffInHours}h ago`;
    return date.toLocaleDateString();
  }
}

// Usage
const stories = new InstagramStories('YOUR_ACCESS_TOKEN');
stories.getStories().then(storiesData => {
  const storiesHTML = stories.createStoriesHTML(storiesData);
  document.getElementById('stories-container').innerHTML = storiesHTML;
});

Instagram Feed Widgets

Lightbox Gallery Widget

Create a lightbox gallery for your Instagram feed:

// Instagram Lightbox Gallery
class InstagramLightbox {
  constructor() {
    this.currentIndex = 0;
    this.images = [];
    this.init();
  }

  init() {
    this.createLightboxHTML();
    this.bindEvents();
  }

  createLightboxHTML() {
    const lightboxHTML = `
      <div id="instagram-lightbox" class="lightbox-overlay">
        <div class="lightbox-content">
          <span class="close-btn">&times;</span>
          <img id="lightbox-image" src="" alt="" />
          <div class="lightbox-nav">
            <button class="prev-btn">&lt;</button>
            <button class="next-btn">&gt;</button>
          </div>
          <div class="lightbox-counter"></div>
        </div>
      </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', lightboxHTML);
  }

  openLightbox(images, startIndex = 0) {
    this.images = images;
    this.currentIndex = startIndex;
    this.showImage();
    document.getElementById('instagram-lightbox').style.display = 'block';
    document.body.style.overflow = 'hidden';
  }

  showImage() {
    const currentImage = this.images[this.currentIndex];
    document.getElementById('lightbox-image').src = currentImage.media_url;
    document.getElementById('lightbox-image').alt = currentImage.caption || 'Instagram post';
    document.querySelector('.lightbox-counter').textContent = `${this.currentIndex + 1} / ${this.images.length}`;
  }

  nextImage() {
    this.currentIndex = (this.currentIndex + 1) % this.images.length;
    this.showImage();
  }

  prevImage() {
    this.currentIndex = this.currentIndex === 0 ? this.images.length - 1 : this.currentIndex - 1;
    this.showImage();
  }

  bindEvents() {
    document.querySelector('.close-btn').addEventListener('click', () => this.closeLightbox());
    document.querySelector('.next-btn').addEventListener('click', () => this.nextImage());
    document.querySelector('.prev-btn').addEventListener('click', () => this.prevImage());
    
    document.getElementById('instagram-lightbox').addEventListener('click', (e) => {
      if (e.target.id === 'instagram-lightbox') this.closeLightbox();
    });

    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') this.closeLightbox();
      if (e.key === 'ArrowRight') this.nextImage();
      if (e.key === 'ArrowLeft') this.prevImage();
    });
  }

  closeLightbox() {
    document.getElementById('instagram-lightbox').style.display = 'none';
    document.body.style.overflow = 'auto';
  }
}

// Usage
const lightbox = new InstagramLightbox();
// Open lightbox when clicking on an Instagram post
document.querySelectorAll('.instagram-post img').forEach((img, index) => {
  img.addEventListener('click', () => {
    lightbox.openLightbox(instagramPosts, index);
  });
});

Instagram Hashtag Feed

Display posts with specific hashtags:

// Instagram Hashtag Feed
class InstagramHashtagFeed {
  constructor(accessToken) {
    this.accessToken = accessToken;
  }

  async getHashtagMedia(hashtag, limit = 30) {
    try {
      // First, get the hashtag ID
      const hashtagResponse = await fetch(
        `https://graph.instagram.com/ig_hashtag_search?q=${hashtag}&access_token=${this.accessToken}`
      );
      
      const hashtagData = await hashtagResponse.json();
      if (!hashtagData.data || hashtagData.data.length === 0) {
        throw new Error('Hashtag not found');
      }

      const hashtagId = hashtagData.data[0].id;
      
      // Get media for the hashtag
      const mediaResponse = await fetch(
        `https://graph.instagram.com/${hashtagId}/top_media?fields=id,caption,media_type,media_url,permalink,timestamp&limit=${limit}&access_token=${this.accessToken}`
      );
      
      const mediaData = await mediaResponse.json();
      return mediaData.data || [];
    } catch (error) {
      console.error('Error fetching hashtag media:', error);
      return [];
    }
  }

  createHashtagFeedHTML(media, hashtag) {
    if (media.length === 0) {
      return `<p>No posts found for #${hashtag}</p>`;
    }

    return `
      <div class="hashtag-feed">
        <h3>#${hashtag} Feed</h3>
        <div class="hashtag-grid">
          ${media.map(post => `
            <div class="hashtag-post">
              <a href="${post.permalink}" target="_blank">
                <img src="${post.media_url}" alt="${post.caption || 'Instagram post'}" />
                <div class="post-overlay">
                  <span class="post-type">${post.media_type}</span>
                </div>
              </a>
            </div>
          `).join('')}
        </div>
      </div>
    `;
  }
}

// Usage
const hashtagFeed = new InstagramHashtagFeed('YOUR_ACCESS_TOKEN');
hashtagFeed.getHashtagMedia('travel').then(media => {
  const hashtagHTML = hashtagFeed.createHashtagFeedHTML(media, 'travel');
  document.getElementById('hashtag-container').innerHTML = hashtagHTML;
});

Instagram Feed Best Practices

Performance Optimization

• Implement lazy loading for images
• Use appropriate image sizes
• Cache API responses
• Implement rate limiting

User Experience

• Add loading states
• Implement error handling
• Provide fallback content
• Ensure accessibility

Content Strategy

• Curate relevant content
• Update feeds regularly
• Use engaging captions
• Monitor performance metrics

Legal Compliance

• Respect Instagram's terms
• Handle user privacy properly
• Implement proper attribution
• Follow API usage guidelines

Ready to Showcase Your Instagram Feed?

Transform your website with dynamic Instagram content. Use our iframe generator tool to create beautiful Instagram feed embeds that will engage your visitors.

Create Instagram Feed Embed