How to Display Instagram Posts on Your Website Using Instagram Blocks

How to Display Instagram Posts on Your Website Using Instagram Blocks

By Michael Chen

November 25, 2024 at 02:04 AM

Instagram blocks display your recent Instagram posts directly on your website. This integration syncs automatically with your Instagram content, making it easy to showcase your latest posts without manual updates.

Requirements

  • A professional (Business or Creator) Instagram account
  • Public account visibility
  • Connected account in your site settings

Adding an Instagram Block

  1. Edit a page and click Add Block
  2. Select Instagram from the menu
  3. Click the pencil icon to open block editor
  4. Select or connect your Instagram account
  5. Choose number of posts to display (up to 20)
  6. Customize design settings
  7. Click Save

Design Options

  • Slideshow: Posts display one at a time
  • Carousel: Shows full posts with previews of previous/next
  • Grid: Thumbnail grid layout
  • Stacked: Full-width posts in vertical layout

Design Customization

  • Adjust aspect ratio
  • Set padding
  • Configure click behavior
  • Add post descriptions
  • Customize display options

Limitations

  • No hashtag or search term filtering
  • Private accounts show dead links
  • Multi-image posts show only first image
  • No support for IGTV, Stories, shared posts, or Reels
  • Pinned posts won't appear first

Troubleshooting Steps

  1. Check connection:

    • Open Connected Accounts
    • Verify Download Data is checked
    • Reset Data
    • Refresh page
  2. Reconnect account:

    • Disconnect existing account
    • Log out of Instagram
    • Reconnect through Connected Accounts
    • Re-select account in block settings
  3. Replace block:

    • Remove existing block
    • Add new Instagram block
    • Reconnect account
    • Save and refresh

Alternative: Embed Block Method For personal accounts, use Instagram's embed code:

  1. Find post/profile on Instagram
  2. Click "..." and select Embed
  3. Copy embed code
  4. Paste into Embed block on your site

Remember to disable ad blockers and browser extensions if experiencing display issues.

Related Articles

Previous Articles