How to Connect Instagram to Your Squarespace Website
You probably know exactly what Instagram is. You might even be obsessed with the app, after all 63% of us are logging in at least once per day. But if you have an account for your business (and you should, here’s why), it might be time to consider displaying your Instagram feed on your Squarespace website!
Showing your website visitors that you have a business ‘gram is a great way to create intrigue, establish yourself as a serious business, and hopefully get new followers and fans. It also opens up a new communication channel with your customers, encouraging them to interact with your account or even directly message your business through the social media platform. Plus, if you update your feed more often than you update your website, it could be the first place to send prospective new clients.
In this article, you’ll learn how to add the Instagram block to your site and connect it to the backend of your Squarespace site. You’ll also find out about design hacks and other tips to ensure your Instagram account is doing exactly what you want it to!
Adding Your Instagram Social Icon Link to Squarespace
Now, if you’re looking to simply link to your Instagram account with a social icon button, the process is very simple.
Here’s an example of some “Social Icon Buttons”, also called “Social Links”:
Adding a Social Links Block
In Edit mode, hover over any section on your page and click +Add Block
In the pop up, scroll down to find Social Links or use the search bar
Double click on your new Social Links block to access the settings
Then, click Add Social Link
Type your Instagram URL.
Tip: Your instagram URL is instagram.com/ followed by your username, but remove the @. Example: www.instagram.com/yourusernamehere
Tip: You can also add additional links like to your Facebook, Pinterest, TikTok, LinkedIn, or even just your email.
Press Enter on the keyboard
If the connection is successful, you’ll see a little Instagram icon appear.
Customize Your Social Links
Head to the Design tab to customize the look of your social link icons.
You’ll be able to play with different settings to add a border, select different styles, and adjust the size and alignment.
To change the color of your social links icons, you will need to go to Site Styles (click the paintbrush icon in the top right corner) > Colors
Select a color theme
Then scroll down to Social Links
Click on the color swatch to choose one of your palette colors or go custom
You can add this Social Links block wherever you like. We have one in our Blog Sidebar and in our Footer, which are really common places, but you can get creative with this!
Adding Social Links to Your Header Navigation
In Edit mode, hover over your Header Navigation and click the Edit Site Header button
Click the + Add Elements button then toggle on Social Links.
Double click on the social links icon in your header to customize their look and size.
Adding Your Instagram Feed to Your Squarespace Site
To display a responsive Instagram feed on your website, Squarespace requires you to connect your account again. You’ll get a gallery-view integrated to your website which can visually showcase your work, perfect for drawing the attention of site visitors!
How to Connect Your Instagram Feed
Go to Settings > Third Party Tools > Connected Accounts and click Connect Account
A pop-up menu will appear, choose Instagram and Log in
Select Authorize once logged in
Adding and Styling an Instagram block
Head to the page where you want to display your Instagram Feed
Hover over a section and click +Add Block
In the pop up, select the Instagram block
Double click on the Instagram block to access its settings
Click on the dropdown to select your Instagram account that you would have just connected (or if you want to connect a different one, you can do this here too!)
Then use the slider to choose how many posts from your Instagram feed to show in Squarespace
In the Design tab of your block, you have the option between four different display possibilities for your Instagram feed. Each of these choices will display your feed in a different way! Check them all out below.
Instagram Slideshow Design
This is the Slideshow design. It presents one photo centrally, and the others in your feed are automatically clicked through or on a timed control. On this design, you can control:
If you want it to automatically scroll through the images
Number of seconds between slide transitions
Whether to show “next” and “back” arrows on the main photo
If Squarespace automatically crops your image to fit the page
Whether to show thumbnails for videos
The position of the caption
Instagram Grid Design
Instead of one focus, this design shows all of your photos at once, on a much smaller scale. These are the features that the grid display allows you to control:
Aspect ratio (dimensions of each post)
If Squarespace has the right to automatically crop your image to fit the page
Number of images per row
Level of border (“padding”) around each image
Instagram Carousel Design
Carousel is similar to the Slideshow design as a horizontal scroller. The Carousel allows you to adjust:
If you want it to automatically scroll through the images
Number of seconds between slide transitions
Whether to show “next” and “back” arrows on the main photo
One important tip when you’re using the Carousel is to make sure to adjust the overall height of the block. When you first add the Carousel, you might notice that it’s too tall or too short, and it’s not showing the right amount of images that you want it to. Just click SAVE on your Design Settings, then when you’re back on your page, click once on the Instagram Carousel again and you’ll see that there’s a little Circle/Dot icon at the very bottom of the Block. You can click and drag this up or down which will adjust the size of the entire block!
Instagram Stacked Design
Alternatively, Stacked is a just exactly how it sounds, your instagram feed stacked on on top of the other!
The Stack allows you to adjust:
If captions are shown or not
There’s not many instances where I imagine you would use the Stacked Instagram Block, but it’s worth mentioning anyway!
Important Instagram Design and Tech Tips
As you can see, all of these Block Designs have varying levels of control and allow different design behaviors. Therefore, it could be beneficial to test out each of the four designs on your page to see which fits best!
Mobile optimization
It is also important to consider how device changes will affect the design. For example, the Instagram block will display differently on a desktop compared to a smartphone. Squarespace places emphasis on mobile optimization for SEO purposes, so it’s important to check that it looks good on mobile and on desktop.
For the GRID design, it will will automatically break up your feed into two columns on a mobile screen. Because it splits it up into two columns, I always recommend using EVEN numbers in your grids. If you used a grid with 5x Instagram Images, on mobile this will look uneven as one column will have 3 images and the next will have 2 images. If you use 6x Instagram images on desktop, then it will be two even columns of 3 images will and look much tidier!
To open in a new window or not?
Squarespace automatically redirects viewers to your Instagram account when they click on any of the tiles within your block. But you have the power to decide whether customers are redirected to a new window, or remain in the same window.
As humans, our attention spans are generally not great, with an average of 8 seconds before a customer gets distracted. And we all know that Instagram can be a bit of a rabbit hole! Typically, I’d suggest setting this to open in a new window since it leaves your website open on the customer’s browser. This means that while you’re directing your customer over to Instagram, it’s easy enough for them to return back to the page and follow through with their purchase. It’s likely to improve your overall user experience, and of course, sales!
Set your Instagram account to public
You’ll need to set your Instagram account to public for it to properly display on your website. You can do this in the settings of Instagram, changing your account from Private to Public. In Squarespace, private accounts may not display properly, leaving your page looking blank and broken.
I hoped you enjoyed that post and learned all about connecting your Instagram to your Squarespace website!
If you want some done-for-you, ready-to-go, beautiful Instagram post and story designs that beautifully tie in with your site, check out our social media templates:
If you enjoyed it, feel free to send us a DM over on our Instagram which is full of more squarespace and business tips just like this. Plus, we’ve got a lovely little community of badass business owners, so come and hang out!
Loved that post? Check out more Instagram tips below!
How to create a full width Instagram feed on Squarespace 7.1
How to create GIF stickers for Instagram in Canva & Photoshop
How to create a Youtube preview for Instagram Stories in Canva
Why you should stop using Linktree & how to create your own in Squarespace
How to grow your business & get clients with Instagram in 2022
If you liked this post, Pin it to Pinterest! 👇🏻
