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

February 9, 2021
PHP - JAVASCRIPT - API - INSTAGRAM - ACCESSTOKEN

WARNING: This post is over a year old. Some of the information this contains may be outdated.

DISCLAIMER: Any 3rd-party services in these posts and in the config are only recommendations/suggestions. I am not affiliated with any of them.

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 => {\ var imageUrl = data.graphql.shortcode_media.display_url;\ document.getElementById(“postImage”).src= imageUrl;

var userName = data.graphql.shortcode_media.owner.username;\ document.getElementById(“instaUsername”).append(userName);\ var accountName = data.graphql.shortcode_media.owner.full_name;\ document.getElementById(“instaName”).append(accountName);

var noLikes = data.graphql.shortcode_media.edge_media_preview_like.count;\ document.getElementById(“noLikes”).append(noLikes);

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

Medium Link: https://vikasbukhari.medium.com/how-to-get-public-instagram-post-json-using-javascript-php-without-access-token-ff5371f036ad


Comments are not enabled for this post.