Instagram Feed Embedder - Style Showcase

🎨 Grid Layout - All Themes

Classic grid layout with different color schemes. Perfect for portfolios and galleries.

Light Default

Dark Popular

Vibrant Colorful

Ocean Cool

Forest Natural

Sunset Warm

Minimal Clean

Monochrome Professional

🎠 Carousel Layout

Horizontal scrolling carousel with navigation arrows. Great for hero sections and featured content.

new InstagramWidget('#container', {
  layout: 'carousel',
  theme: 'light',
  showArrows: true,
  itemWidth: 300,
  apiEndpoint: '/api/instagram-feed'
}).init();

🧱 Masonry Layout

Pinterest-style masonry grid with dynamic column heights. Perfect for varied content sizes.

new InstagramWidget('#container', {
  layout: 'masonry',
  theme: 'vibrant',
  columns: 4,
  gap: 20,
  apiEndpoint: '/api/instagram-feed'
}).init();

🎨 Custom Colors

Create your own theme with custom brand colors.

new InstagramWidget('#container', {
  theme: 'custom',
  customColors: {
    primary: '#667eea',
    secondary: '#764ba2',
    background: '#ffffff',
    backgroundSecondary: '#f8f9fa',
    text: '#1e293b',
    textSecondary: '#64748b'
  },
  apiEndpoint: '/api/instagram-feed'
}).init();

⚙️ All Configuration Options

{
  // Layout
  layout: 'grid',              // 'grid', 'carousel', 'masonry'
  columns: 3,                  // Number of columns (grid/masonry)
  gap: 16,                     // Gap between items in pixels
  aspectRatio: '1/1',          // Image aspect ratio (grid only)

  // Theme
  theme: 'light',              // Pre-built theme or 'custom'
  customColors: { ... },       // Custom color overrides

  // Content
  limit: 12,                   // Number of posts (1-50)

  // Carousel specific
  itemWidth: 300,              // Carousel item width
  showArrows: true,            // Show navigation arrows
  autoScroll: false,           // Auto-scroll carousel
  autoScrollDelay: 5000,       // Auto-scroll interval

  // Performance
  enableCache: true,           // Client-side caching
  cacheDuration: 14400000,     // Cache duration (4 hours)

  // Display
  showLoading: true,           // Loading state
  showErrors: true,            // Error messages

  // API
  apiEndpoint: '/api/instagram-feed',

  // Callbacks
  onLoad: (posts) => { },
  errorCallback: (error) => { }
}