- 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 six steps in total and can be implemented completely free. Webflow cannot run PHP, so JavaScript is used.
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. They are as follows.
- Using custom code
- Using the Webflow CMS
The one I recommend is No. 1. The reason is simple: it is easy and free. Building it this way gives you more flexibility, so that is the route we will take.
[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 photo display area inside Webflow — original
Note: Webflow cannot run PHP, so we use JavaScript.
You would think the final step of adding code in Webflow is just a matter of publishing, but there is a big pitfall waiting there, so I will show you how to avoid it based on what actually happened to me.
[STEPS 1–2] Switching Instagram to a professional account and linking a Facebook account
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 following items.
- 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 titled “Obtaining an access token with no expiry” on reference site 3 and get yourself a token that never expires.
How to obtain the Instagram professional account ID is written just below it, so checking both together keeps things moving.
At this point, make sure you have noted down the following credentials.
- Instagram professional account ID
- Access token (expiry: unlimited)
(2026 update: since this article was published, Meta has made major changes to the Instagram integration API. The permission items above, and the steps for obtaining and extending the access token, may differ from the current specification. Always confirm the current specification in Meta’s official documentation before implementing.)
[STEP 5] Add the JS that loads Instagram to Webflow
Take the JS from whichever of reference sites 1 and 2 you prefer, add it to Webflow, and fill the credentials you obtained into the relevant fields.
Always put the JS you add in the page settings, under the Before </body> tag field.
[STEP 6] Build the photo display area inside Webflow.
The JS used here automatically loads images into a specified piece of HTML. That means you need to add a Div in Webflow and create the class it expects.
Work inside Webflow
Add a Div block and set its class to “insta_list” for reference site 1, or “Instagram” for reference site 2
Where the custom code goes
Open the page settings and put the JS in the Before </body> tag field. The JS will not work properly anywhere else.
Changing the layout without using custom code
This is the approach of handling the layout entirely through the parent “Instagram” element. The method is simple: set the parent to Grid and specify the size of a single cell.
It is very straightforward and anyone could think of it, but it is the approach I recommend most. The reason is that it makes the finished design easy to picture inside Webflow.
The photo below is from the method I actually used when building a friend’s site, and the blank areas make it easy to see where the photos will land.
Summary: how to make an Instagram feed embedded in no-code Webflow update automatically
Demand for adding Instagram is likely to grow further from here. So get the method down while you can.
Incidentally, this is information the Webflow question corner has not answered, and I expect plenty of people want it. While wondering whether I could somehow turn it into an English article, I have been enjoying a trip around Japan lately.
If nomad working interests you, I would like you to read my lifestyle articles too. Your fixed costs might drop further than you expect.
(2026 update: I have since moved my base to Sendai and now run Webharu Inc.)
I also take on Webflow production work, 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 as follows.
FAQ
Can I embed Instagram in Webflow for free?
Yes — the custom-code route is completely free. There are two ways to get automatic updates, custom code and the Webflow CMS, but the custom-code method is the one to choose because it is easy, free and flexible.
What should I do about the Instagram access token’s expiry?
Obtain an access token with no expiry and extend it. The reference site has the steps under “Obtaining an access token with no expiry”, and how to get the Instagram professional account ID is written just below it.
What do I need to build in Webflow to display the embedded photos?
Because the JS automatically loads images into a specified piece of HTML, you add a Div block in Webflow and create the class it expects. The class name is “insta_list” for reference site 1 and “Instagram” for reference site 2.
Where in Webflow do I add the Instagram JS code?
Open the page settings and add it to the Before
