Embed Dynamic Instagram Feed Into HTML With Code Only (NO API/Plugin)

Question

I am looking to get started on how to embed an entire dynamic Instagram feed using HTML and JavaScript (if possible/if necessary) instead of using API's and plugins.

Essentially, what I want on a page for a website that I am currently working on is to show all of the posts as part of a feed on a website and whenever a new post is uploaded on Instagram, that newest post to load automatically.

Does anyone know how to do this or how I can get started on this please?

Answer 1

A little late to reply, but hopefully this is helpful for someone...

Firstly, so we're on the same page, you WILL need to use at least one API to do this-- the Instagram API. You need to use the Instagram API in order to fetch content from their service (this article explains the basic idea https://www.freecodecamp.org/news/what-is-an-api-in-english-please-b880a3214a82/)

Now, you do not say whether you've looked at the Instagram developer docs, but this would be a great place to start: https://developers.facebook.com/docs/instagram

It looks like they have some example code and tutorials, so hopefully there is enough info here to get you started! Based on your question, it sounds like you may want to first check out their BasicDisplayAPI: https://developers.facebook.com/docs/instagram-basic-display-api

Finally, you might find this other SO post helpful. Unfortunately the blog link is broken, but the code snippet looks promising Embed an instagram feed

This blog article looks promising as well: https://dev.to/ljcdev/embedding-an-instagram-post-in-your-website-3666