How To Get Public Instagram Post JSON using JavaScript/PHP Without Access Token.

In this blog post, I will be explaining how to fetch data related to an Instagram public post using JavaScript or PHP without an access token.

In the first part i will be using the JavaScript to fetch the data and display it on a Webpage and in the second part, we will do it with PHP Procedural approach.

The First thing that is to be done is to get the URL of the post or the Post ID from Instagram. In my case, I am using Cristiano Ronaldo’s post to demonstrate this.

Here is the URL of Instagram post that i am using

https://www.instagram.com/p/CKow063A0bp/

to get the JSON of above post we need to add “?__a=1” at the end of the URL.

Now, it would look something like this.

https://www.instagram.com/p/CKow063A0bp/?__a=1'

We will be using the above URL to get the JSON data of the current post.

This is how the JSON of the Post looks like.

To display the data on the webpage Using JavaScript, we will be using the Bootstrap card to display the details that we will fetch from the above URL.

Initially the Bootstrap card will look like this.

The Source Code of this Bootstrap Card is:

<div class=”card” style=”width: 18rem;”>
<img class=”img img-responsive” id=”postImage” class=”card-img-top” alt=”…”>
<p>Username : <strong><span id=”instaUsername”></span></strong> </p>
<p>Name: <strong> <span id=”instaName”></span></strong></p>
<div class=”card-body”>
<p class=”card-text”>No of Likes | <strong><span id=”noLikes”></span></strong></p>
<p class=”card-text”> No Of Comments | <strong><span id=”noComments”></span></strong></p>

</div>
</div>

Code Screenshot

Here is the JavaScript code that fetches the data and displays it on the webpage.

<script>

fetch(‘https://www.instagram.com/p/CKow063A0bp/?__a=1')

.then(response => response.json())
.then(data => {
// Do something with your data

// Fetch Image
var imageUrl = data.graphql.shortcode_media.display_url;
document.getElementById(“postImage”).src= imageUrl;

// Fetch Username
var userName = data.graphql.shortcode_media.owner.username;
document.getElementById(“instaUsername”).append(userName);

// Fetch Account Name
var accountName = data.graphql.shortcode_media.owner.full_name;
document.getElementById(“instaName”).append(accountName);

// Get Post Likes
var noLikes = data.graphql.shortcode_media.edge_media_preview_like.count;
document.getElementById(“noLikes”).append(noLikes);

// Get Post Comments
var noComments = data.graphql.shortcode_media.edge_media_preview_comment.count;
document.getElementById(“noComments”).append(noComments);

});

</script>

JavaScript Code

Output

Output of the Above Code.

Now, below is the Code to implement same using PHP.

<?php

$json = file_get_contents(‘https://www.instagram.com/p/CKow063A0bp/?__a=1');

$obj = json_decode($json);

echo ‘ <img class=”img img-responsive” src=”’.$obj->graphql->shortcode_media->display_url.’” id=”postImage” class=”card-img-top” alt=”…”>

<p>Username : <strong><span id=”instaUsername”>’.$obj->graphql->shortcode_media->owner->username.’</span></strong> </p>

<p>Name: <strong> <span id=”instaName”>’.$obj->graphql->shortcode_media->owner->full_name.’</span></strong></p>

<div class=”card-body”>

<p class=”card-text”>No of Likes | <strong><span id=”noLikes”>’.$obj->graphql->shortcode_media->edge_media_preview_like->count.’</span></strong></p>

<p class=”card-text”> No Of Comments | <strong><span id=”noComments”>’.$obj->graphql->shortcode_media->edge_media_preview_comment->count.’</span></strong></p>

‘;

?>

PHP Code to fetch and Display.

This explains how you will be able to fetch the details of Instagram Post (Public) using PHP or JavaScript.

Github Link: Click Here

Link: https://github.com/vikasbukhari/Public-Instagram-Post-JSON-using-JavaScript-PHP-Without-Access-Token

Read on My Blog: https://blog.vikasbukhari.com/posts/how-to-get-public-instagram-post-json-using-javascript-php-without-access%20token/