Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Using the Instagram Block

Use the Instagram Block to display Instagram photos on your site. This is a great way to create a gallery of your Instagram photos without using Gallery Blocks or Gallery Pages.

With the Instagram Block, you can:

  • Display your own Instagram feed.
  • Display a feed of search results filtered by hashtag, mention, or a specific topic.
  • Choose between four different block designs.
  • Display between one and twenty images in a feed.

Before you begin

  • If you connect a private Instagram account to an Instagram Block, thumbnails will appear in the block but lead to a dead link when clicked. To avoid this, set your Instagram account to public.
  • Image captions won't display on mobile. 

Step 1 - Add the Instagram Block

  1. Open a page or post editor.
  2. Click an Insert Point or the +.
  3. Select Instagram from the menu.
  4. For more detailed steps, visit Adding blocks.

Step 2 - Connect your Instagram account

Under Connected Account, select your Instagram account from the drop-down menu or select Add an account to connect a new Instagram account to Squarespace.

Select the number of images to display in the block using the Items to Display slider.

Step 3 - Choose a design

You can customize how your Instagram photos display in the block. There are four design options to select from in the Design tab:

  • Slideshow
  • Carousel
  • Grid 
  • Stacked

See below for more information about each design option.

Slideshow

This option displays one image at a time.

Design options

Automatically Transition Between Slides Automatically switch to the next image after a set period of time. When checked, a slider appears for setting the transition time between one and 10 seconds.
Show Next and Previous Controls Adds arrows for navigating to the next and previous items. The controls appear in overlays to the left and right of the main image.
Automatically Crop Images Crops or resizes the images for the best design.
Show Thumbnails Adds a strip with thumbnails of all images in the gallery below the main image. When checked, sliders to set the height of the thumbnail strip and the distance between the thumbnail strip and the main image.
 
Show Title and Description

Displays image titles and descriptions. When checked, more options appear to set the location of the titles and descriptions and to only display them on hover.

The captions won't display on mobile.

Carousel

This option displays a full image with portions of the previous and next images on either side.  The carousel has the option for clickthrough URLs. There's also the option for setting the time between transitions.

Design options

Automatically Transition Between Slides Automatically switch to the next image after a set period of time. When checked, a slider appears for setting the transition time between one and 10 seconds.
Show Next and Previous Controls Adds arrows for navigating to the next and previous items. The controls appear in overlays to the left and right of the main image.
Active Alignment The slider focuses on an active image. This item will appear in full.

Grid

This option displays a grid of thumbnail images.

With the Grid design, you can display titles and descriptions when the Lightbox is checked and enable clickthrough URLs only if Lightbox is unchecked.

Design options

Aspect Ratio Controls the size in which your images display. When unchecked, the Aspect Ratio changes the dimensions of the image's and video's container.
Crop Images Removes padding from images' containers and displays them at the size selected in the Aspect Ratio drop-down menu.
Thumbnails Per Row Customize the number of thumbnails in a row in the grid.
Padding Adjust the padding outside of the images' containers.
Lightbox

When checked, clicking an image will display it with a black background. The image's caption will display below the image in the lightbox.

Stacked

This option displays the images at full width, stacked below each other.

The Instagram Block will automatically fill the content width. The height of the Instagram Block will conform to the height of the widest image.

Clicking on an image in the Stacked design opens the image in Instagram.

Step 4 - Display a search result

You can display a feed of images filtered by hashtag instead of displaying your own Instagram feed.

Note: You can enable the search function on up to 20 Instagram Blocks per site.

Displaying a search in the Instagram Block is a great way to:

  • Show images with hashtags about you or your company.
  • Show images with a hashtag from a wedding or other special event.
  • Show images related to a specific topic.

Check Search, and then enter a search term using the hashtag format: #topic

Click the refresh icon to display the results.

Step 5 - Save

Click Apply to save your changes.

Here's an example of how the Instagram Block can display on a site: 

Note: The Instagram Block updates the feed about every 30 minutes.

Troubleshooting

My Instagram Block doesn’t match my Instagram feed.

The Instagram Block updates about every 30 minutes, so new photos may not appear in the block instantaneously. If new photos aren't appearing after 30 minutes, follow these steps:

  1. In the Home Menu, click Settings, and then click Connected Accounts.
  2. Select your Instagram account.
  3. Ensure Download Data is checked.
  4. Click Save.

I’m seeing a “There are no items to display from the selected collection” message.

  1. In the Home Menu, click Settings, and then click Connected Accounts.
  2. Select your Instagram account.
  3. Note if Download Data is checked or unchecked, and follow the applicable steps below.

If it’s already checked, remove your Instagram account and add it again:

  1. Within Instagram settings, click Disconnect.
  2. Return to the Connected Accounts panel and click Connect Account.
  3. Select Instagram and log into your Instagram account with your username and password.
  4. Check the Download Data option, then click Save.

If it’s not already checked, check Download Data and refresh the page. (Press Command + R on a Mac or Ctrl + R on a PC.)

If you’re still having trouble after these steps, remove the Instagram Block and then add it again:

  1. Double-click the Instagram Block to open the editor.
  2. Click Remove.
  3. Click an insert point and choose the Instagram Block again.
  4. Select your Instagram account and click Save.

The Instagram Block shows duplicate or incorrect images.

Try resetting the data in Connected Accounts:

  1. In the Home Menu, click Settings, and then click Connected Accounts.
  2. Select your Instagram account.
  3. Click Reset Data.
  4. Click Save.
  5. Open the page with the Instagram Block, and refresh the page. (Press Command + R on a Mac or Cntrl + R on a PC.)

Search won't work on my Instagram Block

Instagram recently updated the way that their search functions. If you're experiencing issues with search, use these steps to reauthorize your Instagram account:

  1. In the Home Menu, click Settings, and then click Connected Accounts.
  2. Select your Instagram account.
  3. Click Disconnect.
  4. Click Confirm.
  5. Scroll up and click Connect Account.
  6. Scroll down and select Instagram from the Social Accounts menu, then log in using your Instagram username and password.
  7. Click Save.
  8. Open the page with the Instagram Block, and refresh the page. (Press Command + R on a Mac or Cntrl + R on a PC.)
Was this article helpful?
23 out of 61 found this helpful
Using the Instagram Block