1 OAK MLS
Features

Instagram Feed

Display your Instagram photos on your homepage with manual uploads or auto-updating Behold integration

Instagram Feed

Add an Instagram photo grid to your homepage. Visitors see your latest content with a link to follow you — matching the luxury aesthetic of premium real estate sites.

Two source modes are available:

  • Manual Photos — Upload 4-8 photos from your media library. You control exactly what appears.
  • Behold Feed — Connect a Behold.so JSON feed for auto-updating photos pulled directly from your Instagram account.

Enabling the Section

  1. Go to Dashboard → Website → Home
  2. Select the Instagram Feed tab
  3. Toggle the section on
  4. Choose your source mode and configure
  5. Click Save

The section appears on your homepage between Latest Posts and the Contact CTA.

Manual Photos

Upload curated photos from your media library for full control over what appears.

Adding Photos

  1. In the Instagram Feed editor, ensure Source is set to Manual Photos
  2. Click Add Photo
  3. Select an image from your Media Library
  4. Optionally add:
    • Post URL — Link to the original Instagram post
    • Caption — Alt text for accessibility
  5. Repeat for up to 8 photos

Reordering and Removing

  • Use the up/down arrows to reorder photos
  • Click the X button to remove a photo

Photos to Display

Choose how many photos appear in the grid: 4, 6, or 8. The grid adapts responsively:

Screen SizeLayout
MobileHorizontal scroll (160px thumbnails)
Tablet (sm)3-column grid
Medium (md)4-column grid
Desktop (lg)6-column grid

Behold Auto-Updating Feed

Behold provides a simple JSON API that returns your latest Instagram posts with optimized images. No Meta API review required.

Behold Pricing

TierPriceFeedsPosts per FeedUpdates
Free$0/mo16Daily
Starter$10/mo350Hourly
Pro$30/mo15100Every 5 min

Setup Steps

  1. Create a Behold account at behold.so
  2. Connect your Instagram — Go to Sources → Add Source → authorize Instagram
  3. Create a JSON feed — Go to Feeds → New Feed → select your source → choose JSON format
  4. Copy the Feed ID — Found in your feed's settings or embed code
  5. Paste in dashboard — Go to Dashboard → Website → Home → Instagram Feed, set source to Behold Feed, paste the Feed ID
  6. Click Save

Photos will now update automatically based on your Behold plan's refresh rate.

How It Works

When a visitor loads your homepage:

  1. The server fetches https://feeds.behold.so/{FEED_ID}
  2. Response is cached for 1 hour (Next.js ISR)
  3. Posts are mapped to optimized 700px WebP images
  4. Video posts use their thumbnail image
  5. The @handle is extracted directly from the Behold API response

If the Behold feed is unreachable or returns an error, the section gracefully hides itself.

Instagram Handle Display

The section displays your @handle as a large clickable link above the photo grid.

  • Manual mode: Handle is extracted from your Profile → Social Links → Instagram URL
  • Behold mode: Handle comes directly from the Behold API response (no social link setup needed)

Make sure your Instagram URL is set in Dashboard → Profile → Social Links if using manual mode.

Configuration Reference

// workspace.settings.site.instagramFeed
{
  enabled: true,
  title: "Follow Us on Instagram",  // Uppercase eyebrow text
  maxPhotos: 6,                      // 4, 6, or 8
  source: "manual",                  // "manual" or "behold"
  beholdFeedId: "abc123XYZ",         // Required when source is "behold"
  items: [                           // Used when source is "manual"
    {
      id: "ig-1234",
      imageUrl: "https://...",
      postUrl: "https://instagram.com/p/...",
      caption: "Stunning waterfront view"
    }
  ]
}

Section Appearance

The Instagram Feed section renders with:

  • bg-muted/30 background for subtle warmth
  • Centered Instagram icon, uppercase eyebrow title, and serif @handle
  • Photos use --template-card-radius so they match your design template (rounded for Estate, sharp for Gallery)
  • Hover effect: subtle scale + dark overlay
  • Full dark mode support via semantic CSS variables

On this page