<!-- HTML Structure -->
<div id="instagram-feed" class="instagram-grid">
  <div class="loading">Loading Instagram posts...</div>
</div>
 
<!-- CSS Styling -->
<style>
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}
 
.instagram-post {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
 
.instagram-post:hover {
  transform: translateY(-5px);
}
 
.instagram-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
 
.instagram-caption {
  padding: 15px;
  font-size: 14px;
  line-height: 1.5;
}
 
.loading {
  text-align: center;
  padding: 40px;
  color: #666;
}
 
/* Speed optimization */
.instagram-post {
  will-change: transform;
}
 
.instagram-image {
  loading: lazy;
}
</style>
 
<!-- JavaScript Implementation -->
<script>
class InstagramFeed {
  constructor(accessToken, containerId, options = {}) {
    this.accessToken = accessToken;
    this.container = document.getElementById(containerId);
    this.options = {
      limit: options.limit || 12,
      showCaptions: options.showCaptions !== false,
      lazyLoad: options.lazyLoad !== false,
      ...options
    };
    this.init();
  }
 
  async init() {
    try {
      const posts = await this.fetchPosts();
      this.renderPosts(posts);
    } catch (error) {
      this.showError('Failed to load Instagram posts');
      console.error('Instagram Feed Error:', error);
    }
  }
 
  async fetchPosts() {
    const url = `https://graph.instagram.com/me/media?fields=id,caption,media_url,media_type,permalink,thumbnail_url&limit=${this.options.limit}&access_token=${this.accessToken}`;
 
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`API Error: ${response.status}`);
    }
 
    const data = await response.json();
    return data.data;
  }
 
  renderPosts(posts) {
    this.container.innerHTML = '';
 
    posts.forEach((post, index) => {
      if (post.media_type === 'IMAGE' || post.media_type === 'CAROUSEL_ALBUM') {
        const postElement = this.createPostElement(post, index);
        this.container.appendChild(postElement);
      }
    });
  }
 
  createPostElement(post, index) {
    const postDiv = document.createElement('div');
    postDiv.className = 'instagram-post';
 
    const imageUrl = post.media_url || post.thumbnail_url;
    const caption = post.caption ? post.caption.substring(0, 100) + '...' : '';
 
    postDiv.innerHTML = `
      <img
        src="${imageUrl}"
        alt="Instagram post"
        class="instagram-image"
        ${this.options.lazyLoad ? 'loading="lazy"' : ''}
        style="transition-delay: ${index * 100}ms"
      >
      ${this.options.showCaptions && caption ? `
        <div class="instagram-caption">${caption}</div>
      ` : ''}
    `;
 
    postDiv.addEventListener('click', () => {
      window.open(post.permalink, '_blank');
    });
 
    return postDiv;
  }
 
  showError(message) {
    this.container.innerHTML = `<div class="error">${message}</div>`;
  }
}
 
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
  // Replace with your actual access token
  const feed = new InstagramFeed('YOUR_ACCESS_TOKEN', 'instagram-feed', {
    limit: 9,
    showCaptions: true,
    lazyLoad: true
  });
});
</script>

<?php
// instagram-proxy.php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
 
$access_token = 'YOUR_LONG_LIVED_TOKEN';
$limit = isset($_GET['limit']) ? intval($_GET['limit']) : 12;
 
$url = "https://graph.instagram.com/me/media?fields=id,caption,media_url,media_type,permalink,thumbnail_url&limit={$limit}&access_token={$access_token}";
 
$response = file_get_contents($url);
 
if ($response === FALSE) {
    http_response_code(500);
    echo json_encode(['error' => 'Failed to fetch Instagram data']);
} else {
    echo $response;
}
?>

// Add to functions.php for performance
function optimize_instagram_feed() {
    // Disable emoji scripts if not needed - but understand emoji meanings first
    // Learn specific emoji usage like [cherry emoji meanings](/social-media-terms/cherry-emoji-meaning) and [envelope emoji significance](/social-media-terms/envelope-emoji-meaning)
    remove_action('wp_head', 'print_emoji_detection_script', 7);
    remove_action('wp_print_styles', 'print_emoji_styles');
 
    // Lazy load Instagram images
    add_filter('wp_get_attachment_image_attributes', function($attr) {
        $attr['loading'] = 'lazy';
        return $attr;
    });
}
add_action('init', 'optimize_instagram_feed');
 
// Cache Instagram feed data
function cache_instagram_feed_data($feed_data) {
    set_transient('instagram_feed_cache', $feed_data, 3600); // 1 hour cache
    return $feed_data;
}
 
// Implement critical CSS for above-fold content
function instagram_feed_critical_css() {
    echo '<style>
    .instagram-feed { min-height: 400px; }
    .instagram-post { background: #f5f5f5; }
    </style>';
}
add_action('wp_head', 'instagram_feed_critical_css');

<!-- Optimized third-party embed -->
<div id="instagram-widget" style="min-height: 400px;">
  <div class="loading-placeholder">Loading Instagram feed...</div>
</div>
 
<script>
// Lazy load third-party scripts
function loadInstagramWidget() {
  const script = document.createElement('script');
  script.src = 'https://service.com/widget.js';
  script.async = true;
  script.onload = function() {
    // Initialize widget after script loads
    initializeWidget();
  };
  document.head.appendChild(script);
}
 
// Load only when needed (intersection observer)
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadInstagramWidget();
      observer.unobserve(entry.target);
    }
  });
});
 
observer.observe(document.getElementById('instagram-widget'));
</script>

/* Modern image formats with fallbacks */
.instagram-image {
  background-image:
    image-set(
      url('image.avif') type('image/avif'),
      url('image.webp') type('image/webp'),
      url('image.jpg') type('image/jpeg')
    );
}
 
/* Responsive images */
.instagram-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
 
/* Progressive loading */
.instagram-image[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s;
}
 
.instagram-image[loading="lazy"].loaded {
  opacity: 1;
}

// Service worker for Instagram image caching
self.addEventListener('fetch', event => {
  if (event.request.url.includes('cdninstagram.com')) {
    event.respondWith(
      caches.open('instagram-images').then(cache => {
        return cache.match(event.request).then(response => {
          if (response) {
            return response;
          }
          return fetch(event.request).then(fetchResponse => {
            cache.put(event.request, fetchResponse.clone());
            return fetchResponse;
          });
        });
      })
    );
  }
});

<!-- Preconnect to Instagram domains -->
<link rel="preconnect" href="https://graph.instagram.com">
<link rel="preconnect" href="https://scontent.cdninstagram.com">
 
<!-- Prefetch critical resources -->
<link rel="prefetch" href="/path/to/instagram-feed.css">
<link rel="modulepreload" href="/path/to/instagram-feed.js">

/* Flexible grid system */
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1rem, 2.5vw, 2rem);
}
 
/* Masonry effect */
.instagram-masonry {
  column-count: auto;
  column-width: 300px;
  column-gap: 20px;
}
 
.instagram-post {
  break-inside: avoid;
  margin-bottom: 20px;
}
 
/* Mobile-first responsive */
@media (max-width: 768px) {
  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
 
@media (max-width: 480px) {
  .instagram-grid {
    grid-template-columns: 1fr;
  }
}

/* Hover effects */
.instagram-post {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}
 
.instagram-post:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
 
/* Overlay information */
.instagram-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: white;
  padding: 20px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
 
.instagram-post:hover .instagram-overlay {
  transform: translateY(0);
}
 
/* Loading animations */
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
 
.instagram-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
}

/* Brand color integration */
:root {
  --brand-primary: #your-brand-color;
  --brand-secondary: #your-secondary-color;
  --brand-text: #your-text-color;
}
 
.instagram-feed {
  border: 2px solid var(--brand-primary);
  border-radius: 12px;
  background: var(--brand-secondary);
}
 
.instagram-post {
  border: 1px solid var(--brand-primary);
}
 
.instagram-caption {
  color: var(--brand-text);
  font-family: your-brand-font;
}
 
/* Custom loading states */
.loading-instagram {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--brand-primary);
}
 
.loading-instagram::before {
  content: '';
  width: 40px;
  height: 40px;
  border: 3px solid var(--brand-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

// Track Instagram feed interactions
function trackInstagramInteraction(action, postId) {
  gtag('event', action, {
    'event_category': 'Instagram Feed',
    'event_label': postId,
    'custom_map': {
      'custom_parameter_1': 'instagram_engagement'
    }
  });
}
 
// Track load performance
function trackInstagramLoadTime(loadTime) {
  gtag('event', 'timing_complete', {
    'name': 'instagram_feed_load',
    'value': loadTime
  });
}
 
// Implementation
document.addEventListener('click', function(e) {
  if (e.target.closest('.instagram-post')) {
    const postId = e.target.dataset.postId;
    trackInstagramInteraction('click', postId);
  }
});

// A/B test framework for Instagram feed
class InstagramFeedTest {
  constructor() {
    this.variant = this.getVariant();
    this.initializeVariant();
  }
 
  getVariant() {
    const variants = ['control', 'variant_a', 'variant_b'];
    const userVariant = localStorage.getItem('instagram_test_variant');
 
    if (userVariant && variants.includes(userVariant)) {
      return userVariant;
    }
 
    const randomVariant = variants[Math.floor(Math.random() * variants.length)];
    localStorage.setItem('instagram_test_variant', randomVariant);
    return randomVariant;
  }
 
  initializeVariant() {
    const config = {
      control: { posts: 9, layout: 'grid', captions: true },
      variant_a: { posts: 6, layout: 'masonry', captions: false },
      variant_b: { posts: 12, layout: 'grid', captions: true }
    };
 
    const settings = config[this.variant];
    this.setupFeed(settings);
    this.trackVariant();
  }
 
  setupFeed(settings) {
    // Apply variant-specific settings
    const feed = new InstagramFeed('token', 'instagram-feed', settings);
  }
 
  trackVariant() {
    gtag('event', 'experiment_impression', {
      'experiment_id': 'instagram_feed_layout',
      'variant_id': this.variant
    });
  }
}

// Debug helper for Instagram API issues
class InstagramDebugger {
  static async checkAPIHealth(accessToken) {
    try {
      const response = await fetch(`https://graph.instagram.com/me?access_token=${accessToken}`);
      const data = await response.json();
 
      if (data.error) {
        console.error('API Error:', data.error);
        return false;
      }
 
      console.log('API Status: Healthy', data);
      return true;
    } catch (error) {
      console.error('Network Error:', error);
      return false;
    }
  }
 
  static validateTokenScope(accessToken) {
    // Check if token has required permissions
    return fetch(`https://graph.instagram.com/me/media?access_token=${accessToken}`)
      .then(response => response.ok)
      .catch(() => false);
  }
 
  static logPerformanceMetrics() {
    const observer = new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        if (entry.name.includes('instagram')) {
          console.log(`${entry.name}: ${entry.duration}ms`);
        }
      });
    });
    observer.observe({ entryTypes: ['measure'] });
  }
}

// Performance monitoring
function monitorInstagramPerformance() {
  // Monitor Core Web Vitals
  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      switch (entry.entryType) {
        case 'largest-contentful-paint':
          console.log('LCP:', entry.startTime);
          break;
        case 'first-input':
          console.log('FID:', entry.processingStart - entry.startTime);
          break;
        case 'layout-shift':
          console.log('CLS:', entry.value);
          break;
      }
    }
  }).observe({
    type: 'largest-contentful-paint',
    buffered: true
  });
}
 
// Image optimization helper
function optimizeInstagramImages() {
  const images = document.querySelectorAll('.instagram-image');
 
  images.forEach(img => {
    // Add loading="lazy" if not present
    if (!img.hasAttribute('loading')) {
      img.loading = 'lazy';
    }
 
    // Add proper alt text
    if (!img.alt) {
      img.alt = 'Instagram post image';
    }
 
    // Implement progressive loading
    img.addEventListener('load', function() {
      this.classList.add('loaded');
    });
  });
}

 
 
const InstagramFeedContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
`;
 
const InstagramPost = styled.div`
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
 
  &:hover {
    transform: translateY(-5px);
  }
`;
 
const InstagramImage = styled.img`
  width: 100%;
  height: 300px;
  object-fit: cover;
`;
 
const InstagramCaption = styled.div`
  padding: 15px;
  font-size: 14px;
  line-height: 1.5;
`;
 
const InstagramFeed = ({ accessToken, limit = 12 }) => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  const fetchPosts = useCallback(async () => {
    try {
      setLoading(true);
      const response = await fetch(`/api/instagram-proxy?limit=${limit}`);
 
      if (!response.ok) {
        throw new Error('Failed to fetch Instagram posts');
      }
 
      const data = await response.json();
      setPosts(data.data || []);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }, [limit]);
 
  useEffect(() => {
    fetchPosts();
  }, [fetchPosts]);
 
  const handlePostClick = (permalink) => {
    window.open(permalink, '_blank');
  };
 
  if (loading) return <div>Loading Instagram posts...</div>;
  if (error) return <div>Error: {error}</div>;
 
  return (
    <InstagramFeedContainer>
      {posts.map((post) => (
        <InstagramPost
          key={post.id}
          onClick={() => handlePostClick(post.permalink)}
        >
          <InstagramImage
            src={post.media_url}
            alt="Instagram post"
            loading="lazy"
          />
          {post.caption && (
            <InstagramCaption>
              {post.caption.substring(0, 100)}...
            </InstagramCaption>
          )}
        </InstagramPost>
      ))}
    </InstagramFeedContainer>
  );
};
 
export default InstagramFeed;

<template>
  <div class="instagram-feed">
    <div v-if="loading" class="loading">
      Loading Instagram posts...
    </div>
    <div v-else-if="error" class="error">
      {{ error }}
    </div>
    <div v-else class="instagram-grid">
      <div
        v-for="post in posts"
        :key="post.id"
        class="instagram-post"
        @click="openPost(post.permalink)"
      >
        <img
          :src="post.media_url"
          :alt="`Instagram post ${post.id}`"
          class="instagram-image"
          loading="lazy"
        />
        <div v-if="post.caption" class="instagram-caption">
          {{ truncateCaption(post.caption) }}
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'InstagramFeed',
  props: {
    accessToken: {
      type: String,
      required: true
    },
    limit: {
      type: Number,
      default: 12
    }
  },
  data() {
    return {
      posts: [],
      loading: true,
      error: null
    };
  },
  async mounted() {
    await this.fetchPosts();
  },
  methods: {
    async fetchPosts() {
      try {
        this.loading = true;
        const response = await fetch(`/api/instagram-proxy?limit=${this.limit}`);
 
        if (!response.ok) {
          throw new Error('Failed to fetch Instagram posts');
        }
 
        const data = await response.json();
        this.posts = data.data || [];
      } catch (error) {
        this.error = error.message;
      } finally {
        this.loading = false;
      }
    },
    openPost(permalink) {
      window.open(permalink, '_blank');
    },
    truncateCaption(caption) {
      return caption.length > 100 ? caption.substring(0, 100) + '...' : caption;
    }
  }
};
</script>
 
<style scoped>
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}
 
.instagram-post {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
}
 
.instagram-post:hover {
  transform: translateY(-5px);
}
 
.instagram-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
 
.instagram-caption {
  padding: 15px;
  font-size: 14px;
  line-height: 1.5;
}
 
.loading, .error {
  text-align: center;
  padding: 40px;
  color: #666;
}
</style>