Person holding phone with the PS Running Club website open. It features a photo of the members

Displaying Instagram posts on static sites

Frontend
Published April 7

This article attempts to explain how you can show Instagram posts in a raw html website, or with a framework like Astro

Why

There are multiple benefits with not relying on loading posts on-demand with JavaScript. Here are some of them.

Price

You save loads of tokens if you only update the website a few times every day. You can even update it every half-hour, and you will still not exceed the free limit.

No JavaScript

Everyone doesn’t have a modern browser, and we have to accept that. JavaScript generated content is also a big risk if you’re planning on supporting text-to-speech or any other accessibility feature.

Privacy

Instagram is not able to track who views the videos unless they control the embed (which is the easier method).

How to implement

Setting up the app

First off, login to the Facebook developer portal. You then have to create an “App”. On the “Use cases” step, select “Manage messaging & content on Instagram”.

Adding your account

Select “Roles” under “App roles” in the sidebar, and add a user to the “Instagram Tester” role. Accept the invite in your Instagram account settings.

Getting the token

Press “Use cases” on the sidebar and press the “Customize” button. From there, complete steps 1 and 2, and the rest are optional. Make sure to store the token in a safe location.

When to call it

I run a script as a GitHub Action each hour. First it fetches all posts and then it sorts by latest date. It then replaces a part of the HTML and uploads to GH Pages.

Conclusion

The reason I went with this approach is because of the accessibility and privacy benefits.

While this may seem overly complex, it works for me. And it works for people with older browsers. If you have any questions, feel free to email me at samuel.smlxdesign@gmail.com