Note: the steps and screens in this article are as of 2022. Names and placement may have changed in Webflow’s current UI. In particular, Meta has repeatedly made major changes to the Instagram integration API, so always confirm the current specification in Meta’s official documentation.
Hi, I’m Masato, a Webflow specialist. In this article I solve the problem above.
✅ What this article covers
- How to embed Instagram in Webflow
- How to make the embedded Instagram feed update automatically
There are two ways to make Instagram update automatically, as listed below.
- Using custom code
- Using the Webflow CMS
The one I recommend is No. 1. The reason: it is easy and free. Building it this way also gives you more flexibility, so that is the route we will take.
Key takeaways
- Embedding Instagram in Webflow — what it means
- Embedding Instagram in Webflow means using custom code (JavaScript) to display Instagram posts on your site and keep them updating automatically. It takes 6 steps in total and can be implemented completely free. Webflow cannot run PHP, so JavaScript is used.
Contents
[Copy and paste to finish] How to make an Instagram feed embedded in Webflow update automatically
- [STEP 1] Switch Instagram to a professional account
- [STEP 2] Link it with a Facebook account
- [STEP 3] Log in to Facebook for Developers and obtain each credential
- [STEP 4] Extend the Instagram access token
- [STEP 5] Add the JS that loads Instagram to Webflow | original
- [STEP 6] Build the Instagram photo display area inside Webflow | original
Note: Webflow cannot run PHP, so we use JavaScript.
You might think the final step of adding the code to Webflow is just a matter of publishing, but there is a big pitfall there, so I will show you how to avoid it based on my own experience.
[STEPS 1–2] Switching Instagram to a professional account and linking a Facebook account
Please follow reference site 1 (Japanese) to set this up.
[STEP 3] Log in to Facebook for Developers and obtain each credential
For the permissions in STEP 3, I used the items listed below.
- pages_show_list
- business_management
- instagram_basic
- instagram_manage_comments
- instagram_manage_insights
- pages_read_engagement
- pages_manage_posts
[STEP 4] Extend the Instagram access token
You can extend the access code using reference site 3 (Japanese). Find the section “Get an access token with no expiration” on reference site 3 and obtain an access token that never expires.
Right below that section, it explains how to get your Instagram professional account ID, so checking both together keeps things moving smoothly.
At this point, make sure you have noted down the following values.
- Instagram professional account ID
- Access token (expiration: unlimited)
(2026 update: after this article was published, Meta made major changes to the Instagram integration API. The permission items above and the steps for getting and extending the access token may differ from the current specification. Always check the current specification in Meta’s official documentation before implementing.)
[STEP 5] Add the JS that loads Instagram to Webflow
Add the JS code from whichever of reference sites 1 and 2 you prefer to Webflow, and fill in the relevant fields with the values you have obtained so far.
Always open the page settings and put the JS code in the Before </body> tag field.
[STEP 6] Build the Instagram photo display area inside Webflow
The JS code used here automatically loads images into the HTML element you specify. That means you need to add a Div in Webflow and create the specified class.
- Work inside Webflow
Add a Div Block and give it the class “insta_list” for reference site 1, or “Instagram” for reference site 2
- Where to put the custom code
Open the page settings and put the JS in the Before </body> tag field. Placed anywhere else, the JS will not work properly.
Changing the layout without custom code
This method completes the layout using the parent “Instagram” element. It is simple: set the parent to “Grid” and specify the size of each cell.
It is a very simple idea that anyone could come up with, but it is the method I recommend most. The reason is that it makes the finished design easy to picture inside Webflow.
The image below is actually the method I used when building a friend’s site; the empty cells are where the photos go, which makes it easy to understand.
October 2026 update: the current state of the Instagram integration API and the alternatives
(October 2026 update) Meta ended the “Instagram Basic Display API” for personal accounts on December 4, 2024. According to Meta’s announcement, all requests fail after the shutdown, and no Instagram API remains available for apps built for personal accounts (source: Meta for Developers, “Update on Instagram Basic Display API”, September 4, 2024; checked October 5, 2026).
STEP 3 in this article is the Facebook Page–linked method, which uses permissions such as instagram_basic and pages_show_list in Facebook for Developers. According to the official guidance, this approach is still offered as the “Instagram API with Facebook Login.” However, the steps in this article are from 2022, so details of the screens and steps may have changed.
According to the official guidance, the two methods available today are listed below. Both require an Instagram professional account (Business or Creator); they do not work with a personal account.
- Instagram API with Facebook Login: for professional accounts linked to a Facebook Page. Permissions include instagram_basic, pages_show_list, and pages_read_engagement (the steps in this article belong to this line)
- Instagram API with Instagram Login: works even without a Facebook Page. Permissions include instagram_business_basic
As for access tokens, the official guidance is to exchange a short-lived token (valid for 1 hour) for a long-lived token; the long-lived token is valid for 60 days and must be refreshed before it expires. The “access token with no expiration” in STEP 4 is not mentioned on the official overview page, so if you build this into a site, set up a mechanism to refresh the token within 60 days (source: Meta for Developers, “Instagram Platform Overview”, updated September 28, 2026; checked October 5, 2026).
Summary: how to make an Instagram feed embedded in no-code Webflow update automatically
Demand for adding Instagram to sites is likely to keep growing. So get the method down now.
Incidentally, this information has not been answered even in the Webflow Q&A corner, and I expect many people need it. While wondering whether I could somehow turn it into an English article, I have lately been enjoying a trip around Japan.
If you are interested in nomad work, please read my lifestyle articles too. Your fixed costs might turn out lower than they are now.
(2026 update: I am now based in Shiogama, Miyagi, Japan, where I run Webharu Inc.)
I also take on Webflow production requests, so if you are stuck on a build, I would be glad to receive your questions and requests through the form. Until next time.
The two sites I referred to when putting this method into practice are listed below.
Selected work
JTB Americas
A full renewal of the North America site, with the operations team able to update it themselves
Hosted by Nippon TV
High-fidelity Figma-to-Webflow conversion, with load speed and responsiveness optimized
PonTech Lab Inc.
Built with AI (Claude Code) on Next.js and Cloudflare, with the build process published
FAQ
Can I embed Instagram in Webflow for free?
Yes. The custom code method is completely free. There are two ways to auto-update the feed, the custom code method and the Webflow CMS method, and I recommend custom code because it is easy, free, and flexible.
What should I do about the Instagram access token’s expiration?
In the article’s steps, I obtained an “access token with no expiration” using the method on a reference site. According to the official guidance as of October 2026, a long-lived access token is valid for 60 days and must be refreshed before it expires. If you build this into a site, set up a mechanism to refresh it regularly.
What do I need to create in Webflow to display the embedded photos?
The JS code automatically loads images into the HTML element you specify, so add a Div Block in Webflow and create the specified class. The class name is “insta_list” for reference site 1 and “Instagram” for reference site 2.
Where in Webflow do I put the Instagram JS code?
Open the page settings and put it in the Before
![How to Choose a Webflow Agency: Cost and 5 Quote Checks [From a Rival Founder]](/assets/posts/thumb-webflow-agency-choice.avif?v=4c985a91)
![Webflow vs STUDIO: Pricing, CMS, and Which to Choose [2026]](/assets/posts/thumb-webflow-vs-studio.avif?v=7e977456)