How to Integrate an Instagram Feed on a Squarespace Site

Integrate IG.jpg

Instagram is one of the world's largest social networks, surpassed only by Facebook, YouTube, and WhatsApp. With over a billion monthly active users, it's no wonder that site owners want to use it.

  • Artists, photographers, and other creative types can build an audience.

  • Businesses can share photos of their products and build an audience.

  • Influencers can build their influence and make money through sponsorships.

  • Individuals can use it just for fun.

Instagram is also somewhat notorious for being a "walled garden" throughout its history. For years after it was developed, it was only even visible on mobile devices. However, those walls gradually came down, and it's now visible on the web and mobile, and you can embed posts from Instagram into your blog posts and on your site in other ways.

You're here, reading this post, which means you're a site owner, and you're using Squarespace. Great choice! You want to integrate Instagram with your site. Luckily, there are a few different ways you can do it, and it's pretty easy.

Determine Your Embed Type

There are two distinct ways you can embed Instagram into your Squarespace site. They use a couple of different methods, so you need to determine which option you want to use. What are they?

Option 1: Embed a single Instagram post into a single place on your site. For example, you're reading this blog post -- let's say I want to embed a single Instagram post right here, beneath this paragraph. That single post is displayed in that position for as long as the post exists.

Option 2: Embed an entire Instagram feed. This feed, rather than showing a single post, shows multiple posts. More importantly, it updates as you update your Instagram feed, always showing the most recent handful of posts you've created.

Embed Entire Feed.jpg

Each of these is doable; you just need to use a different method to implement them. Let's find out how.

Embedding a Single Instagram Post

Squarespace has an Instagram block as part of their site composition, but that'snotwhat you'll be using here. That's the function for adding a feed, so I'll go over that more later.

Instead, you need to embed code from Instagram and add it using a code block on Squarespace.

Step 1: Compose your site or blog post to the point where you need to add an Instagram post. For example, you'll want to write your blog post, leaving space for the Instagram post you wish to add.

IG Code Block.jpg

Step 2: Add a code block. A code block is a specific block of content that you can use to paste code into, which will then execute that code. Per Squarespace, it's used "to add custom code to a page, blog post, sidebar, footer, or other content areas."

There's one potential caveat here. Again, per Squarespace, "On all plans, Code Blocks support plain text, HTML, Markdown, and CSS code surrounded by <style></style> tags. Adding JavaScript or iframes to Code Blocks is a premium feature available in business and commerce plans."

Instagram's embed code uses HTML, but it does call a .js file. Thisshould work fine on all Squarespace plans, but if you find you're having issues, you might need to upgrade your plan.

To add a code block, place your cursor in your content area where you want the Instagram post to display. Then, from the menu, click "Code." A box will appear, asking you to paste in your code. Ensure that the "display source" toggle is OFF; if it's on, it will display the code rather than what the code renders into.

Step 3: Fetch your Instagram code. You need to find the post on Instagram, which means it needs to be published already. For example, take a post like this one direct from Squarespace's Instagram feed.

If you want to embed that post, click on the "…" menu item in the upper-right corner of the post. This pops up the menu options. Next, you want to click "embed," which will bring up a box with code in it. You can choose whether you wish to embed a version with or without the caption. The code will look something like this.

Step 4: Paste your embed code into the code block in your blog post. You'll want to make sure it's set to HTML as the display method, so it executes the code correctly and embeds the post.

Squarespace may or may not render a preview of the code. If it doesn't, you can click "Preview in Safe Mode" to render it. It's also possible that it still won't render in a preview but will render fine when you publish the post. You can publish it, take a look, and edit it out if it doesn't work right.

One thing to note here is that if you're trying to embed a post from a private Instagram account, it may display the post, but any links leading to the post will lead to a dead page on Instagram (unless the person browsing is an approved follower of the private account.) My recommendation is to make sure your Instagram account is public before you embed posts. If you're using Instagram for business, you'll need to have a public account anyway.

If you need to display an Instagram post from a private account, you might be better off taking a screenshot and embedding it as an image. That way, you don't have to mess around with code blocks. Since engagement doesn't matter to a private account, the image method works just fine.

That's all! You can repeat this process for every post you want to embed. Remember, too; you can use a code block in any content page on your site. Want to embed a specific post in a sidebar or footer? Go for it. Just remember that it's static; it won't update when you push new content to your Instagram feed. If you want an updated feed of the most recent posts, that's what the second option is for.

Embedding an Instagram Feed

A fairly common technique for brands that use Instagram heavily is to display an Instagram feed on their site. It might be a bar across the bottom of the site showing recent posts, or it might be embedded on the homepage. The point is, it shows the most recent X number of posts from Instagram and allows a website user to click through and interact with them at their leisure.

It's an excellent way to get users of the website to visit Instagram and to showcase photos of products in action, special collections, and the like. If you combine it with Instagram shopping (which I'll talk more about later), you can even use it to promote more sales!

This is what the Instagram block is for in Squarespace. Using it is pretty straightforward, but you do need to do some initial setup.

Step 1: Connect Instagram to your Squarespace account. In order to do this, you need to:

  • Make sure you're logged out of Instagram. This is because the connection will automatically log in to whatever account you're using, which can cause problems if you have multiple accounts.

  • On Squarespace, click Settings, then Connected Accounts. Choose to connect a new account, and choose Instagram. Log into the appropriate Instagram account. Note: if you use one Instagram login to manage multiple accounts (like a business account and a personal account), you may need to make a specific set of credentials for the Instagram account you want to use exclusively. Otherwise, Instagram might mix photos from both feeds.

That's it! Once you have connected your accounts, you'll authorize Squarespace to access Instagram via its API to integrate various features. For example, you can then add an Instagram social sharing icon, you can pull Instagram content into an Instagram block, and you can integrate Instagram shopping.

Step 2: Add the Instagram block. You'll need to decide where you want to put the block with your Instagram feed. It can be on your homepage, in a blog post, in your footer, in a sidebar, or wherever else you can put content on your site. Just keep in mind that it's a reasonably large widget, so it might skew your layout if you don't tweak it. Here's how to add it.

1. Put your cursor where you want the block to be inserted.

2. In the menu, click Instagram.

3. Choose the appropriate connected account from the accounts drop-down.

4. Choose the number of items to display. This can be anything from 1 to 20 Instagram posts.

6. Apply your changes to save the block and save your post.

There are a few limitations to this. First and foremost, Instagram will push any new content published to the Instagram feed. You can't filter by search term or hashtag, unfortunately. There are third-party services that may be able to do this, but they use the code block method above.

Secondly, your Instagram block will only display the first item in a gallery or the first frame of a video post in your block. Videos aren't playable, and gallery posts aren't navigable; the user will need to click through to Instagram to browse.

Third, IGTV, Stories, and Reels are not supported. They won't show up on your Squarespace site at all; Instagram won't push the content over.

Choosing a Design

There are four core designs for the Instagram block. They can all be customized by setting different levels of padding, the aspect ratio, and how posts display. They are:

Slideshow layout. You have one post displayed at a time, but it slides from one to the next on a timer, from one to ten seconds per slide. You can use manual controls instead.

Carousel layout. Like a slideshow, except it shows the first post and the edge of the second, to more immediately indicate that there are multiple posts to display. Again, they can slide from one to the next automatically or with manual controls.

Grid layout. This displays a grid of embedded posts. You can choose how wide and tall you want the grid to be. You can also make it so that when a user clicks on a post, it opens in a lightbox before sending them to Instagram.

Stacked layout. Posts display one on top of another vertically, with no horizontal layout.

Typically, a carousel or a grid is the best option for most businesses. You're free to choose whichever one works best for you, however.

If the Instagram block doesn't work right, there are a bunch of troubleshooting options you can try out.  Squarespace details them here, or you can drop me a line, and I'll try to help you out.

Instagram Shopping

One of the cool things you can do with Instagram is to publish a photo with your products in it and tag the products with the information from your product page. It displays an accurate price and even allows users to buy the product directly from Instagram. It's called Instagram Shopping.

Even better, once you have Squarespace and Instagram integrated, you have this feature enabled. The first step is setting up Instagram Shopping on your store.

  • This is the help center section for Instagram Shopping. It details how to configure everything from the Instagram end. I'm not going to reproduce it fully here - Instagram changes things just often enough it's better to check their help center directly.

  • This is the help center section for tagging products on Squarespace. You need to have a store with individual product pages to tag, and you need a Commerce plan to access the feature. Additionally, every product needs to have its unique ID, title, description, and price, which are flagged with the correct data tags in your code. Squarespace does a lot of the heavy lifting for you, but you need to make sure it's all available for the Facebook/Instagram product catalog to sync.

Once you get this all set up, you can do cool things like post a picture of someone wearing four of your products and tag each product so that anyone who likes the look can buy it, in whole or in part. It's pretty sweet! It's also outside the scope of embedding an Instagram feed on your Squarespace site, so I'm not going to dig any deeper right now.

The general process for linking up Instagram and Squarespace is, luckily, pretty easy and foolproof. There aren't many things that can go wrong, so troubleshooting is generally pretty easy. Nevertheless, I highly recommend setting it up if your business uses Instagram in any regular capacity. It's an excellent visual element to add to your site, and it's low-maintenance because Instagram pushes new content directly without your intervention.