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”:
First, connect your Instagram
In your Squarespace site, click Settings > Social Links
Click into Add A Social Link or Email
Type your Instagram URL. Tip: Your instagram URL is instagram.com/ followed by your username, but remove the @. Example: www.instagram.com/yourusernamehere
Press Enter on the keyboard
Click Save in the top left corner
As you can see, the Social Links block integrates with a number of other social media accounts such as Facebook, Pinterest and Twitter. Squarespace have made the connection process very similar to that of Instagram, so you can connect your other social media while you’re at it!
Now you have connected your Instagram account, you can add it as a Social Link around your site.
There are two places you can put your Social Links:
Social Links in your header
Social Links anywhere in your page
To add Social Links to your header:
In Squarespace 7.0
If you use Version 7.0, the Social Links in your header varies by template (find yours here). Some of the 7.0 templates are not compatible with Social links in the header, and the others that are may have different layouts.
Tip: If you are using a Squarespace 7.0 template that is not compatible with Social Links in the Header, you can add some using this simple method.
Styling your social link buttons in the Header depends on the template but you may be able to edit the design of the following attributes:
Show/hide Social Icons in header
Icon color
Icon shape
Icon size
You will find these under Design > Site Styles.
In Squarespace 7.1
For Squarespace 7.1, you can have your social links in your header with any template.
To do this, go to Edit > Edit Site Header > Elements then click on the on/off toggle to display the social icons.
When you toggle the Social Icons on, you can then choose a size for them.
You can also update where the Icons display in the header by clicking on the Desktop Icon or Mobile Icons at the top of the panel, then Layout, and choosing from a variety of Header layouts which will move the Social Icons around.
To change the color of the Social Icons you will need to change the navigation link color, as they are the same. You can find this under Design > Colors > Edit the color theme you have live on your site header > Find Navigation Links and edit the color > Click Save
To add the Social Links anywhere to your page:
This is the same method in Squarespace 7.1 and 7.0, and it’s really easy!
All you need to do it simply:
Find an insert point anywhere on your page, click and choose the Social Links block which you can add anywhere in the site.
The cool thing about these Social Links Blocks is that you can style them independently.
In the Social Links block settings click Design along the top, then you can choose from alignment, size and the shape of the icons. Have a play around with these to make when work with your web design.
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 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 > Connected Accounts and click Add an Account here
A pop-up menu will appear, choose Instagram and Log in
Select Authorize once logged in
Head to the page where you want to display your Instagram Feed then find an insert point, select the Instagram block
Designing the Instagram block
When you first add the Instagram Block, you can choose how many pictures from your Instagram feed to show in Squarespace by moving the toggle bar left to right.
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! 👇🏻
