How to connect a live Instagram feed to your Squarespace website
Connecting your social media accounts to your Squarespace website does come with some caveats. Social media is designed to hold and retain people’s attention within the platform. Ever tried to click a link and go outside of Instagram? Yeah not easy. Your attention is their currency and they love you to spend, spend, spend.
If your goal is to get more lovely kindred spirits to your website (and it should be) the last thing you want to do is sign-post them straight out again - rabbit hole doom scrolling this way ->
That said there is something to be said about connecting with your lovely community in places they hang out and in places that you enjoy hanging out too.
With a bit of strategic placing a live Instagram feed can be a nice way to showcase your latest posts automatically (no need to manually update, bonus!) and have regularly updated content on your website. So how do you do it?
How to connect Instagram to your Squarespace website
To connect your Instagram account to Squarespace and enable Squarespace to pull updated information follow the steps below:
First off you want to make sure that your Instagram account is set to public so that it shows correctly on your website
After signing into Squarespace select your website
Click on ‘Settings’ from the left-hand menu
Scroll down to ‘THIRD PARTY TOOLS’
Select ‘Connected Accounts’
Click ‘CONNECT ACCOUNT’ and choose Instagram
Log in to your account and select ‘Authorise’
Your Instagram account should now be connected and the pull enabled (meaning it should now auto-sync)
Adding the Instagram block to your website
Now you have your account connected you can now add an Instagram block which will auto-update as and when you post on Instagram.
There are several ways to design your Instagram block on Squarespace.
Add a new section to your web page in the location where you want to display the feed - usually towards the bottom of your home or about page.
Fluid Engine Editor
Make it stand out
Whatever it is, the way you tell your story online can make all the difference.
If using the Fluid Engine version (not the Classic version) select ‘+ ADD BLOCK’
Scroll down through all the different block options until you get to ‘Integrations’ or use the search bar
Select ‘Instagram’ and a small grid should appear
Select the pencil icon to edit the number of items (or squares)
Switch to the ‘Design’ tab to choose grid, stacked, carousel and slideshow, aspect ratio (being Instagram it makes sense to use ‘1:1 Square’) and choose the padding to make the Instagram block your own
I would advise to have the ‘Open Links in New Window’ ticked so that Instagram opens in a new browser, leaving your website browser open so that people can look at and follow you on Instagram but can then easily come back to your website
Once you’ve got your Instagram feed how you want it click and drag the block to where you want it on the page
Classic Editor
Make it stand out
Whatever it is, the way you tell your story online can make all the difference.
If you are still using the Classic Editor the first step is slightly different, but then you can follow the rest of the steps above
In your new section if you hover your mouse over the top you should see a block box appear with two blue + signs
Select the blue +
Scroll down through all the different block options until you get to ‘Integrations’ or use the search bar
Select ‘Instagram’ and a small grid should appear
Follow the steps above to tweak the layout design of your Instagram block
Now you can add some text above or below your Instagram block to let people know to come and say hi or come and follow your journey over on the grid!
If your pictures aren’t pulling through yet don’t worry, sometimes it just takes saving your changes to activate the pull and if you refresh your live website you should now see your latest Instagram posts. If not contact Squarespace support for further help.
If you’ve already added your Instagram block, but you’ve noticed that it’s not updating, don’t worry it’s a common problem and one that will happen more than once. Fear not, I’ve written another blog post to show you
What to do if your Instagram feed is not updating on your Squarespace website.
Optimising your Instagram block on Squarespace for mobile
If using a grid format I would suggest using even numbers, so maybe 4 or 6, as the squares will display in rows of 2 so it’s best to have an even number.
Any more than 6 and you’re starting to get a rather long Instagram feed when viewing on mobile. Try it out and see what you think is best you can always tweak the layout design until you get a look that feels right on both desktop and mobile.
Other ways to connect your social media accounts on Squarespace
If you want to link to other social media channels such as YouTube, Pinterest or LinkedIn (I find the footer or your about page is the best place for this) it’s nice and easy within Squarespace.
After signing into Squarespace select your website
Click on ‘Settings’ from the left-hand menu
Scroll down to ‘Social Links’ under the ‘WEBSITE’ sub-heading
Open another browser window and go to your profile page on your chosen social media platform and copy the URL address to your profile page (you need the actual web link rather than your handle)
Come back to your website and click on ‘Add a social link or email’ and simply paste in the URL of your profile page
Repeat this process for each platform you wish to add
Now that your social media links are set in Squarespace you can now add a social media icon block to your page:
Go to the section where you wish to add the social media icons, such as in the footer
Select ‘+ ADD BLOCK’ and scroll down to ‘Social Links’
Once you click on it a social media icon block will appear which you can drag to where you want it to sit on the page. It will automatically pull icons for all the platforms that you added in the steps above
While hovering over the block select the pencil icon and toggle to ‘Design’ to alter the size and look of the icons
If you don’t want all the platforms to show - select the platform you’d like to remove under the ‘Content’ tab and just toggle off the ‘Display Social Icon’ or ‘DELETE SOCIAL LINK’
If you’re using the Classic Editor follow the same steps as above except selecting the blue + to then select ‘Social Links’. With the classic editor, you cannot easily drag the blog to where you’d like it, so it may be best to upgrade to a Fluid Engine block.
