How To Display Instagram Feed On Website Using PHP?

Before we start coding, you might be someone NOT interested in coding. If that's the case, you should use a website plugin like SociableKIT. Watch the following video.

Need to embed Instagram hashtag feed on your website? Watch this tutorial.

Need to embed private Instagram feed on your website? Watch this tutorial.

What's next? You can try SociableKIT now, view a live demo here, here and here or continue with the code tutorial below.

Let's code!

Do you have a photo or video manager on your website? Do you upload photos or videos on your Instagram account?

If your answer is both YES, you're wasting a lot of time managing your brand's Instagram photos and videos online.

What if there's a way to upload your photo or video ONCE, and then let if appear both on your Website and your Instagram account?

Will you be happy saving your precious time? Our code for today will make you happy then, just like we are!

Today we’re gonna talk about how to display publicly available Instagram photos and videos on your website using PHP and Instagram API.

This one is great if you want your Instagram photos and videos to be shown on your website in a synchronized way.

Once you uploaded a photo or video on Instagram, it will be automatically reflected and shown on your website too.

Today post will include the following contents:

1.0 Source Code Overview
2.0 Final Code Output
3.0 Get your Instagram Access Token
4.0 Create index.php File And Make It Bootstrap Ready
5.0 Add A Page Header
6.0 Initialize Variables Needed To Retrieve Instagram Feed
7.0 Get JSON Data And Decode It
8.0 Loop Through the JSON Data
9.0 Add Custom CSS
10.0 How To Display Non-Square Media?
11.0 Download the Complete Source Code
12.0 Use the Instagram Feed Website Plugin
13.0 What’s Next?
14.0 Related Source Codes
15.0 Some Notes

1.0 Source Code Overview

Here's an overview of what our code does:

1.1 Gets photos and videos from your Instagram account. (see more features on the PRO live demo)

1.2 Display these instagram data to a webpage (assuming it is your PHP website.)

1.3 Show some awesome UI powered by Bootstrap. If you're not yet familiar with this awesome front-end framework, see our step by step Bootstrap tutorial here.

2.0 Final Code Output

2.1 BASIC Source Code Output

We have to know where we are going, once we completed the code tutorial below, we will achieve this output:


2.2 PRO Source Code Output


The PRO live demo above shows codeofaninja's Instagram posts from this link:

The PRO source codes has more features you might need. You can view the list of features and download them in section 11.2 and 11.3 below. For now, here's the step by step tutorial of our BASIC source code. Enjoy!

3.0 Get your Instagram Access Token

To get your Instagram API Access Token, use this Instagram access token generator.

4.0 Create index.php File And Make It Bootstrap Ready

<!DOCTYPE html>
<html lang="en">

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Display Instagram Posts On Website - BASIC - Live Demo</title>

	<link rel="stylesheet" href="//">


<div class="container">
<div class="row">

<!-- Instagram feed will be here -->


<script src=""></script>
<script src="//"></script>

<!--[if lt IE 9]>
<script src=""></script>
<script src=""></script>


5.0 Add A Page Header

This will be under the class="col-lg-12" div tag.

<div class="col-lg-12">
	<div class="page-header">
		<h1>Display Instagram Feed On Website - BASIC - Live Demo</h1>

6.0 Initialize Variables Needed To Retrieve Instagram Feed

This will be under page header.

// use this instagram access token generator

Let me explain the variables above:

  • $access_token will contain value retrieved from section 3.0
  • $photo_count is where you can specify how many posts you want to retrieve.
  • $json_link is where we'll get the JSON data (photos and videos) of the Instagram user.

7.0 Get JSON Data And Decode It

Get the JSON data from the $json_link using json_decode() to decode it so we can loop through the contents later.

$json = file_get_contents($json_link);
$obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING);

Use the following code instead if you're using PHP version older than 5.4

$json = file_get_contents($json_link);
$obj = json_decode(preg_replace('/("\w+"):(\d+)/', '\\1:"\\2"', $json), true);

I highly recommend you upgrade to PHP version 5.4+, you can ask your web najlepszy hosting provider to do it for you.

8.0 Loop Through the JSON Data

Now we'll loop through the JSON data retrieved from the $json_link, and also display the images using HTML.

foreach ($obj['data'] as $post) {
	$pic_src=str_replace("http://", "https://", $post['images']['standard_resolution']['url']);
	$pic_created_time=date("F j, Y", $post['caption']['created_time']);
	$pic_created_time=date("F j, Y", strtotime($pic_created_time . " +1 days"));
	echo "<div class='col-md-4 col-sm-6 col-xs-12 item_box'>";		
		echo "<a href='{$pic_link}' target='_blank'>";
			echo "<img class='img-responsive photo-thumb' src='{$pic_src}' alt='{$pic_text}'>";
		echo "</a>";
		echo "<p>";
			echo "<p>";
				echo "<div style='color:#888;'>";
					echo "<a href='{$pic_link}' target='_blank'>{$pic_created_time}</a>";
				echo "</div>";
			echo "</p>";
			echo "<p>{$pic_text}</p>";
		echo "</p>";
	echo "</div>";

9.0 Add Custom CSS

Add the following code below the bootstrap CSS in the head section.


	border: thin solid #d1d1d1;
	margin:0 1em .5em 0;

10.0 How To Display Non-Square Media?

As of September 2015, Instagram API allows us to retrieve media (images and videos) in their original (non-square) aspect ratio.

The instructions above works for people who does not want to create an API client and prefer the square images. But for people who need the original aspect ratio of their media, you will need an API client access token. Here's how to do it:

By the way, special thanks to @Ed in the comments section below for helping me figure it out.

10.1 Create an API Client

  1. Login to Instagram and go to
  2. Click "Manage Clients", then click "Register New Client". Both located on the upper right corner for the page.
  3. Fill out the form. In the "Details" tab, make sure you fill out the "Application name" and "Valid redirect URIs".
  4. In the "Security" tab, un-check "Disable implicit OAuth"
  5. Fill out all other required fields and click "Register"
  6. Once registered, it will give you a "Client ID"

10.2 How To Get Your API Client Access Token:

  1. Go to the following URL:
  2. Replace CLIENT_ID and REDIRECT_URL with your own and go to that URL.
  3. This will redirect you to your REDIRECT_URI.
  4. You will see your access token in your browser's address bar. It looks like

10.3 How To Get Other User's Access Token?

Other Instagram users, can use the same API client to get their access token.

  1. They need to receive a sandbox invite and accept it.
  2. They need to go to the same URL:
  3. They can see their access token in the browser's address bar. It looks like

I probably need to build a simple tool for this. :D

10.4 Check "Non Square Media"

You might still have to do the following:

  1. Locate your API Client and click "Edit".
  2. Click the "Migrations" tab and check the box that says "Non square media".
  3. Click "Update Client".


Related from Instagram Blog: Thinking Outside the Square and API Migration.

11.0 Download the Complete Source Code

You can get the source code by following the whole, well detailed tutorial above. But isn’t it more convenient if you can just download the complete source code we used, and play around it?

There’s a small fee in getting the complete source code, it is small compared to the value or skill upgrade it can bring you, or income you can get from your website project or business.

For a limited time only, I will give you the source code for a low price. DOWNLOAD THE SOURCE CODE by clicking the green buy button below.

11.1 Download The BASIC Source Code

Manage photos and videos for your Instagram account and website once YES
Save time figuring out and coding these features on your website YES
Display photos from instagram YES
Display videos from instagram YES
Display post date YES
Display post description YES
Bootstrap enabled script YES
Responsive layout (great for mobile devices) YES
Link to actual instagram post (opens in new tab) YES
Free source code updates YES
Free email support for 6 months YES
Download Now

11.2 Download The PRO Source Code

All features of BASIC source code YES
Display number of likes YES
Display number of comments YES
Time ago format on post date YES
Auto link URLs in the post description. YES
Instagram videos can be played without leaving your website YES
Load more photos and videos automatically when scrolling YES
Shows a loading animation when trying to load more content YES
Newly loaded content still has photos, videos, number of likes, etc. YES
Will say "All posts were loaded." when there's no content to be loaded YES
Object-oriented code YES
Easier to integrate YES
How to use the PRO source code?
1. Once you extracted the files, copy the folder 'display-instagram-feed-level-3' in your root directory. YES
2. Put the following code at the beginning of you PHP file.

include_once 'display-instagram-feed-level-3/libs/php/dsm_instagram_feed.php';
$dsm_instagram_feed = new DsmInstagramFeed();
3. Put the following code inside head section.

4. Put the following code where you want the feed to appear.

5. Put the following code before the closing body tag.

Download Now

Do you need more reasons to get it?

Buy only once, use on up to 10 websites and instagram accounts! YES
No different kind of licenses. YES
No many different pricing schemes. YES
No monthly or any recurring fees. YES
No need to rely on another website to render Instagram photos and videos. YES
No need for codes from other websites. YES
You can learn more how to code, I love teaching and can give you free tips! YES
Familiarize yourself with the Instagram API. YES
Features are constantly improving, and you get it for free. YES
Completely customizable. YES

Thanks a lot for supporting our website!

12.0 Use the Instagram Feed Website Plugin

You demanded it, we built it. A lot of people requested a website plugin version of this Instagram Feed code. Now it is available. It works no matter what website platform you use. We have tried it in WordPress, Squarespace, Wix and more. 

13.0 What's Next?

Today we have learned how to show your Instagram photos and videos on your website.

Did you know that you can also display your Twitter feed on your website?

Let us go to the next tutorial: How To Display Twitter Feed on Website?

14.0 Related Source Codes

Did you know that you can also display other social media data on your website? I’ve created tutorials on them too, see the following:

Social Media Script Tutorials
Display Facebook Page EVENTS on Website
Display Facebook Page PHOTOS on Website
Display Facebook Page VIDEOS on Website
Display Facebook Page POSTS on Website
Display Instagram FEED On Your Website
Display Twitter FEED on Website
Display Google+ FEED on Website

15.0 Some Notes

#1 Found An Issue?

If you found a problem with this code, we can solve it faster via Email or FB message, please send me a message via email [email protected], or via our official Facebook page!

Please be more detailed about your issue. Best if you can provide an error message and your test or page URL. Thanks!

Please feel free to comment if you have any questions, suggestions, found something wrong or want to contribute to this code.

#2 Become a true Ninja!

  • 1. Subscribe to social media scripts tutorial news and updates.
  • 2. Be updated about what works and what does not work on social media APIs.
  • 3. Be notified for any related social media API updates.
100% Privacy. We will never spam you!

#3 Thank You!

Thanks for visiting our tutorial on how to display Instagram feed on your website using PHP and Instagram API.

Before you write a comment, please read this guide and our code of conduct.