How to Display Instagram Posts on Your Website?

We're basically fetching (scraping) data from Instagram ( and insert it into HTML. Dirty but simple solution to show your Instagram posts on your website.


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

JavaScript #

let request = new XMLHttpRequest();'GET', '', 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="
${data.shortcode}/" target="_blank" rel="noreferrer">
<span class="gallery__like">
<img src="
${data.thumbnail_src}" alt="${data.accessibility_caption}" loading="lazy">

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

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 them 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