How to Display Instagram Posts on Your Website?

We're basically fetching (scraping) data from Instagram (https://www.instagram.com/username/?__a=1) and insert it into HTML. Dirty but simple solution to show your Instagram posts on your website.

HTML #

<div class="gallery" id="gallery"></div>

JavaScript #

let request = new XMLHttpRequest();
request.open('GET', 'https://www.instagram.com/username/?__a=1', true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
let dataSource = JSON.parse(this.response);
let galleryContainer = document.getElementById("gallery");
for(let i = 0; i < 3; i++){
let data = dataSource.graphql.user.edge_owner_to_timeline_media.edges[i].node;

let markup = `
<figure class="gallery__item">
<a href="https://www.instagram.com/p/
${data.shortcode}/" target="_blank" rel="noreferrer">
<span class="gallery__like">
${data.edge_liked_by.count}</span>
<img src="
${data.thumbnail_src}" alt="${data.accessibility_caption}" loading="lazy">
</a>
</figure>
`
;

galleryContainer.insertAdjacentHTML('beforeend', markup);
}
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();

This method might not work in the future. Take a look at the Instagram API page for best solution.

Previous Post

Why I Use RGB Instead of HEX?

We used HEX colors for years in css, but It's time to replace it with RGB

Read article
Next Post

Eleventy Powered Free Blog & Portfolio Template

Hey I'm Yasin. I created this awesome blog template with Eleventy. Feel free to use it. No rights reserved.

Read article