How to create a full width Instagram feed in Squarespace 7.1

Squarespace Tips
Written By Erica Hartwick
This post may contain affiliate links. We may receive a commission for purchases made through these links (at no cost to you, of course! 🙂)

A popular design feature in Squarespace is the ability to easily create full-bleed content. That is, content that extends from one edge of the browser window to the other, spanning the full width of the site.

We love adding full-bleed images to websites because it creates this dynamic and expansive feel that elevates any website.

There are some limitations to this though as not all content blocks have a full-width option. One of those is the Instagram block.

While the default Instagram feed block in Squarespace does not span the full width of the page, I'll show you how we can add a little code into Squarespace to create the full-width effect.

Before we jump into this tutorial it's important to note that these instructions apply to Squarespace 7.1 only, not Squarespace 7.0. The code for 7.0 is quite different and will vary depending on which template you're using. If you're not sure which version of Squarespace you're using, you can easily find out following these instructions. If you want 1:1 help coding a full width instagram feed in, make sure to contact our extra support team!

Let's get started!


Step 1: Add a New Section

First things first, let's add a new section to your site where you would like the Instagram feed to appear. This can be any type of page section, including in your footer area! In the section settings under Format, set the Section Height to 10.

 
 

Step 2: Add an Instagram Block

Next, add an Instagram block to that blank section. To do this head over to the page on your Squarespace site you want to add the Instagram feed to. A lot of websites often have the Instagram feed towards the bottom of the page right above the footer. That's where I'm going to put mine for this tutorial, but feel free to add it wherever you'd like it to go!

In Edit mode, add a new blank section to your page. In the pop-up window, search for the Instagram block and click on it to add it.

 
 

Step 3: Connect Your Instagram Account

Once you add an Instagram block, you'll see placeholder images appear along with a pop-up menu. In this pop-up menu, we are going to connect the Instagram account so it can pull in the feed accordingly.

To connect the account, click the drop-down menu under Connected Account and select Add an Account.

 
 

Step 4: Update Instagram Feed Settings

Once you've connected your Instagram account to Squarespace, we can move on to customizing the Instagram feed settings.

Underneath the drop-down menu, you'll find a slider that indicates the number of posts you'd like to appear on your website. I've set mine to have 6 images across, but you can adjust as needed.

 
 

Next, let's move over to the Design tab where we'll customize the look and feel of the Instagram feed block. I've applied the following settings:

  • Layout: Grid

  • Aspect Ratio: 1:1 Square

  • Crop Images: Yes

  • Thumbnails Per Row: 6

  • Padding: 0

    • The padding controls the amount of spacing between your Instagram images. I don't want any white space in between my images, so I lowered this to 0. Feel free to increase this if you'd prefer white space.

 
 

Step 5: Add Custom CSS

By default, Instagram blocks in Squarespace have padding around the edges to have them appear inset on your website. In order to create a full-width Instagram feed we will need to add custom CSS to remove that padding.

Lets head over to the Custom CSS panel (Design > Custom CSS) and paste the following code:

INSERT DATA SECTION ID HERE .content-wrapper {
    max-width: 100%;
    padding: 0 !important;
    overflow-x: hidden !important;
}

INSERT BLOCK ID HERE {
    padding-top:0px!important;
    padding-bottom:0px!important;
}

We're not done quite yet! We need to target the section and block IDs of the Instagram feed and add this into our CSS.

If you know how to find the Section ID and Block ID for the Instagram block, you can go ahead and replace the corresponding placeholder text:

  • Data Section ID: Replace "INSERT DATA SECTION ID HERE" with your unique section ID.

  • Block ID: Replace "#INSERT BLOCK ID HERE" with your unique block ID.

If you don't know how to find these IDs, I'll walk you through how to find them. Let's dive into it!

Opt-ins
DIY Your Dream Site


How to find a section Data Section ID & Block ID in Squarespace

The CSS code we're using requires us to find both a Section ID and a Block ID. Now how do we determine what those are?

Let's start with the "data section ID" which will look something like this: section[data-section-id="5f1e8cd733dc5444793b6267"]

There are a few ways to find this ID on your website, but the easiest way to do so is by using the (free) Google Chrome extension, Squarespace ID Finder.

Install the Chrome extension and add it to your toolbar.

Once you've installed it, head over to your Squarespace page that has the Instagram feed block applied. Click on the Squarespace ID Finder extension button towards the top right of your browser window (black square divided into 9 sections) to enable the extension. You should immediately see IDs populate for all of the sections and blocks on your Squarespace site.

Make sure you're looking at the section where you've added the Instagram content block. You should see a blue tag at the top of the section that reads: section[data-section-id="............"]. That's your unique data section ID! Click directly onto that tag to copy it.

After you've located your unique data section and block IDs, head back over into the Custom CSS panel (Design > Custom CSS) and replace the placeholder text with those IDs.

Mine looks like this:

section[data-section-id="5f1e8cd733dc5444793b6267"] .content-wrapper {
    max-width: 100%;
    padding: 0 !important;
    overflow-x: hidden !important;
    }
 

If you liked this post, Pin it to Pinterest! 👇🏻

 
 
Erica Hartwick http://www.bigcatcreative.com
Previous

Squarespace Template Customer Showcase: Shannon Quinn Copy
Next

How to Leave Etsy and Start a Shop with Squarespace (and why you should!)