How to add an Instagram feed to a Framer site

Two places for code in Framer

Framer gives you two ways to add third-party code. Which one to use depends on where the code needs to show something.

The embed code from Social Feed by grip space is a single script tag, and the feed is drawn right next to where that tag sits on the page. That is why the Embed component is the right tool: you decide the position on the canvas, like any other layer, and the feed appears there.

Before you start: get your embed code

1. Sign up for Social Feed by grip space with your email address. The Free plan needs no credit card and includes one widget.
2. In the dashboard, click “+ Connect Instagram account” and connect an Instagram professional account (Business or Creator). A personal account can be switched to a professional one for free in the Instagram app; here is how.
3. Open “Settings & preview”. Choose a grid or a slider, set the number of posts and columns while watching the preview, and save.
4. Under “Add the embed code to your website”, click “Copy”. The code looks like this:

<script type="text/javascript" src="https://n246.grip.space/api/v1/instagram/widget/xxxxxxxx"></script>

You only paste this code once. Layout, columns, filters and colors are stored with the widget, so when you change them in the dashboard later, your Framer site shows the new design without touching the Embed again.

Step by step: add the feed with the Embed component

1. Open your project in Framer and go to the page where the feed should appear, for example your home page or a dedicated “Instagram” page.
2. Open the Insert menu and search for Embed. Framer’s help center describes this exact path for adding an iframe or embed script.
3. Drag the Embed component onto the canvas and drop it where the feed should go, for example inside a section just above your footer, or below a heading such as “Follow us on Instagram”.
4. With the Embed selected, look at its options in the properties panel. Embeds can take a URL or HTML. Choose the HTML option. (Framer’s help article says to add the script tag “in the HTML section of the Embed component.”)
5. Paste your Social Feed embed code into the HTML field. Paste the whole thing, from <script to </script>.
6. Set the Embed’s width so it fills the section (see “Sizing the Embed” below), and give it a generous height to start with.
7. Publish your site, then open the live URL in a browser to see the feed.

Framer’s help article also says that depending on the integration, you “may need to manually wrap the script in additional code.” The Social Feed code does not need any wrapper: paste it as it is. If the feed does not appear on the published page, work through the troubleshooting list further down before changing the code.

Sizing the Embed

Framer is a visual tool, and every layer, including the Embed, has a width and a height. Getting these right is the main thing that decides whether the feed looks native to your design.

Width. Make the Embed follow its container rather than using a fixed pixel width. Framer Academy explains that relative sizing is for “when a layer should follow its container,” and fixed sizing is “when it needs a stable dimension.” A feed should follow its container, so it shrinks on tablets and phones. The widget itself fills 100% of the space it gets, up to the max width you set in the Social Feed dashboard (0 to 2,000 pixels; 0 means no maximum).

Columns adjust by themselves. The widget measures the space it is placed in. When each image would be smaller than about 100 pixels, it automatically uses fewer columns. A 4-column grid on desktop therefore drops to fewer columns on a narrow phone screen without any extra settings.

Height. This is where Framer needs a little care. A grid’s height depends on its width: wider screens mean bigger square tiles and a taller feed. The account header, Follow button and (on the Free plan) the “Powered by Social Feed” credit add some height too. Framer’s help pages we checked do not describe a height option for the Embed component or say whether HTML with scripts is shown directly in the page or inside a frame. So check the published page and adjust:

1. If the whole feed shows and the content below it moves down neatly, you are done. The Embed is sizing itself to its content.
2. If the bottom of the feed is cut off, or a small scrollbar appears inside the box, the Embed has a fixed height that is too small. If the properties panel offers a height that fits the content, use it; otherwise increase the height until the full feed shows at your widest breakpoint. For a similar case (HubSpot forms, which also sit inside a frame), Framer’s help advises setting the component to “hug its content vertically, not fixed to a small height,” and not wrapping it in a container with a smaller fixed height.
3. If there is a large empty gap below the feed, the Embed is taller than the feed. Reduce its height, or check it on each breakpoint, because the right height on desktop may be too tall on a phone.

Tip: if you find height hard to control, use the slider layout. A slider is always one row high, so its height changes much less between screen sizes than a grid of several rows does.

Breakpoints: desktop, tablet and phone

Framer sites use breakpoints. According to Framer Academy, you add one with the add control on the breakpoint bar and choose tablet, phone or a custom width, and the new layout “inherits from the primary breakpoint.” Changes to the primary (desktop) layout flow down, while changes made on tablet or phone become overrides for that breakpoint. The width shown on the canvas “is also the minimum viewport width at which that breakpoint becomes active.”

For an Instagram feed, this means:

1. Use one Embed and let it inherit. Add the Embed on the desktop breakpoint. The tablet and phone layouts inherit it, and the widget adapts its column count to the width on its own.
2. Override only the size. On tablet and phone, adjust the Embed’s height (if it uses a fixed height) and the section’s padding. You don’t need a second embed code for mobile.
3. Avoid separate Embeds per breakpoint. Two copies of the code means two widgets on the page, and it is easy to forget to update one of them. If you really want a different look on phones, such as a slider instead of a grid, create a second widget in the dashboard and test the published page carefully at each width to make sure only one feed shows.
4. Preview at several widths. Framer Academy recommends checking the page “at wide, medium, and narrow widths” rather than only at preset device sizes. Do the same on the published site by resizing your browser window.

Settings that suit Framer designs

Framer sites tend to be clean, design-led and full of white space. A few settings in the Social Feed dashboard help the feed fit in:

When visitors click a post, the widget can open a lightbox with the caption and/or like count, open the post on Instagram, or do nothing. Hovering can show an Instagram icon. For more on choosing layouts and post counts, see Grid or slider? Choosing a layout for your Instagram feed.

Why not use Custom Code for the feed?

Framer’s Custom Code area is great for scripts that do not show anything on the page. Framer’s help center describes the steps: open Project Settings, select the Custom Code tab, click Add Script (or the + icon), name the script, choose where it goes, optionally pick specific pages, and choose whether it runs “Once” or on every page visit. Framer Academy says the available positions are “at the start or end of the head and body,” and that you can add code for a single page in that page’s settings.

Those positions do not fit an Instagram feed. Code in the head is never displayed, and code at the start or end of the body is outside your layout: the feed would appear above everything or after your footer, not inside the section you designed. The widget has no setting to move itself to another part of the page. Use the Embed component, which puts the code exactly where you drop it.

Framer plans and Social Feed plans

Framer’s pricing page (Free, Basic, Pro and Enterprise when we checked) does not list embeds or custom code as a feature of any plan, and the help articles we read do not mention a plan requirement either. If the Embed component or its HTML option is not available in your project, check your plan or ask Framer support. Framer’s pricing page does say that connecting a custom domain needs a paid plan; free sites use a Framer domain. The feed works the same on either.

On the Social Feed side, plans are counted by widgets and monthly views:

A view is counted each time the feed loads, not each visitor. A feed on a page that every visitor sees, such as your home page, counts on every visit. If you go over your plan’s limit two months in a row, the feed pauses from the following month, and we email you when you reach 80% and 100% of the limit. See pricing for details.

Performance on a Framer site

The feed is designed to stay light. It is one small script, and it does not set cookies or use local storage. Images and videos load directly from Instagram’s servers. In a grid, images in the first row load right away and the rest load only when the visitor scrolls near them. A slider loads all of its images at once, so keep sliders to a sensible number of posts.

If the feed sits far down a long home page, most visitors who never scroll that far will not download the lower images of a grid, which keeps the page light.

Troubleshooting

1. Nothing shows in the Framer editor. That is expected. Framer does not run these scripts on the canvas. Publish and check the live site.
2. Nothing shows on the published site. First, make sure the widget is set to Published in the Social Feed dashboard; an unpublished widget shows nothing. Then check that you pasted the code into the Embed’s HTML option (not the URL field), and that the whole tag is there. Then publish again; changes in Framer appear on the live site only after you publish.
3. The feed is cut off at the bottom. The Embed or its parent frame has a fixed height that is too small. Increase it, or let it fit the content if your editor offers that, and check each breakpoint.
4. There is a big gap under the feed. The Embed is taller than the feed, often only on smaller breakpoints. Reduce the height on that breakpoint.
5. The feed appears twice. There are two Embeds with the code on the page, or the code is both in an Embed and in Custom Code. Remove one.
6. The feed shows too few or too many columns. The widget reduces columns when tiles would be smaller than about 100 pixels. If the Embed is very narrow, widen it or choose fewer columns in the dashboard.
7. The lightbox looks cramped. See the note above: switch the click action to open Instagram if the lightbox can only cover the feed’s box.
8. New Instagram posts are missing. On the Free plan, new posts appear once a day; on paid plans, right away. Also check whether a filter in the dashboard (Reels, carousels, videos, period or caption keywords) is hiding them.
9. The feed stopped after a busy period. If your views went over your plan’s monthly limit two months in a row, the feed pauses. The dashboard shows your views per widget, and we email you before this happens.
10. Still stuck? Our checklist Instagram feed not showing on your website? covers more causes.

Frequently asked questions

Do I need a Framer plugin or code component?
No. The Embed component that comes with Framer is enough, because the feed is a plain script tag.

Can I put the feed in a reusable component, such as my footer?
Framer’s documentation we checked does not cover embeds inside components specifically. In general, place the Embed inside the component, publish, and check that the feed shows on every page that uses it. Remember that every page with the feed counts toward your monthly views.

Can I hide the feed for a while without editing my Framer site?
Yes. Switch the widget to Unpublished in the Social Feed dashboard. The Embed stays in place but shows nothing until you switch the widget back. You may want to hide or resize the empty section in Framer if you leave it off for long.

Will the feed match my site’s language?
The small amount of text inside the widget, such as the Follow button and lightbox labels, switches between English and Japanese based on the page’s language setting, falling back to the visitor’s browser language. Your own captions appear as you wrote them on Instagram.

Can I show a hashtag feed or someone else’s account?
No. Social Feed by grip space shows posts from the Instagram account you connect, one account per widget. If you need hashtags, see our comparison of Instagram feed widgets for tools that list them.

Why did Instagram’s old API stop working with some feed tools?
Meta retired the Instagram Basic Display API in December 2024, which is why tools now need a professional account. We explain it in this article.

Building on another platform too? We have step-by-step guides for Webflow, Wix, Squarespace, WordPress, Shopify and plain HTML, and a general guide to adding a feed without a plugin.

Sources

1. Framer Help, “How to add an iframe or embed script”: https://www.framer.com/help/articles/how-to-add-an-iframe-or-embed-script/
2. Framer Help, “How to add custom code”: https://www.framer.com/help/articles/how-to-add-custom-code/
3. Framer Help, “Embedding a Trustpilot widget in your site”: https://www.framer.com/help/articles/how-to-embed-trustpilot-widget-into-your-website/
4. Framer Help, “Troubleshooting HubSpot forms on your site”: https://www.framer.com/help/articles/troubleshooting-hubspot-forms-on-your-site/
5. Framer Academy, “Add Custom Code to your site”: https://www.framer.com/academy/lessons/custom-code
6. Framer Academy, “Create responsive breakpoints”: https://www.framer.com/academy/lessons/framer-fundamentals-breakpoints
7. Framer Academy, “Use relative, fixed, and viewport sizing”: https://www.framer.com/academy/lessons/framer-fundamentals-fixed-and-relative-sizing
8. Framer pricing: https://www.framer.com/pricing