How To Display Instagram FEED On Website? Step By Step Guide!

display-instagram-feed-website
Before we start coding, let me ask you this: Do you really want to code this feature on your website? Or would you prefer to use a website plugin that does the trick instantly?

There is an easy way to customize & embed Instagram feed on your website. No coding required. How? Use the DSM Website Plugin! Learn how to use it from this Step by step tutorial.

Going back to coding…

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 Social Media Scripts – LEVEL 3 – PRO PACK
13.0 Use the Instagram Feed Website Plugin
14.0 What’s Next?
15.0 Related Source Codes
16.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 LEVEL 2 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 LEVEL 1 Source Code Output

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

demo-screenshot-display-instagram-feed-level-1

2.2 LEVEL 2 Source Code Output

demo-screenshot-display-instagram-feed-PRO

2.3 LEVEL 3 Source Code Output

display-instagram-feed-on-website-level-3-demo

The LEVEL 3 live demo above shows codeofaninja’s Instagram posts from this link: http://instagram.com/codeofaninja

The LEVEL 2 and LEVEL 3 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 LEVEL 1 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">
<head>

	<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 - LEVEL 1 - Live Demo</title>

	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>
<body>

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

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

</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</body>
</html>

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 - LEVEL 1 - Live Demo</h1>
	</div>
</div>

6.0 Initialize Variables Needed To Retrieve Instagram Feed

This will be under page header.

<?php
// use this instagram access token generator http://instagram.pixelunion.net/
$access_token="CHANGE_TO_YOUR_ACCESS_TOKEN";
$photo_count=9;
	
$json_link="https://api.instagram.com/v1/users/self/media/recent/?";
$json_link.="access_token={$access_token}&count={$photo_count}";
?>

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 you web 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_text=$post['caption']['text'];
	$pic_link=$post['link'];
	$pic_like_count=$post['likes']['count'];
	$pic_comment_count=$post['comments']['count'];
	$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.

.item_box{
	height:500px;
}

.photo-thumb{
	width:100%;
	height:auto;
	float:left; 
	border: thin solid #d1d1d1;
	margin:0 1em .5em 0;
	float:left; 
}
</style>

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 https://instagram.com/developer/
  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: https://www.instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&response_type=token
  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 http://yourdomain.com/instagram_uri.php#access_token=xxx.yyy.zzz

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: https://www.instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&response_type=token
  3. They can see their access token in the browser’s address bar. It looks like http://yourdomain.com/instagram_uri.php#access_token=xxx.yyy.zzz

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”.

instagram-get-non-square-media

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 LEVEL 1 Source Code

FEATURESLEVEL 1
Manage photos and videos for your Instagram account and website onceYES
Save time figuring out and coding these features on your websiteYES
Display photos from instagramYES
Display videos from instagramYES
Display post dateYES
Display post descriptionYES
Bootstrap enabled scriptYES
Responsive layout (great for mobile devices)YES
Link to actual instagram post (opens in new tab)YES
Free source code updatesYES
Free email support for 6 monthsYES
BUY TO DOWNLOAD LEVEL 1 NOW USING
* You can use your debit or credit card with PayPal.

11.2 Download The LEVEL 2 Source Code

FEATURESLEVEL 2
All features of LEVEL 1 source codeYES
Display number of likesYES
Display number of commentsYES
Time ago format on post dateYES
Auto link URLs in the post description.YES
Instagram videos can be played without leaving your websiteYES
Load more photos and videos automatically when scrollingYES
Shows a loading animation when trying to load more contentYES
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 loadedYES
BUY TO DOWNLOAD LEVEL 2 NOW USING
* You can use your debit or credit card with PayPal.

11.3 Download The LEVEL 3 Source Code

FEATURESLEVEL 3
All features of LEVEL 1 and LEVEL 2 source codeYES
Object-oriented codeYES
Easier to integrateYES
How to use the LEVEL 3 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();
YES
3. Put the following code inside head section.

$dsm_instagram_feed->printCSS_DsmInstagramFeed();
YES
4. Put the following code where you want the feed to appear.

$dsm_instagram_feed->printContents_DsmInstagramFeed();
YES
5. Put the following code before the closing body tag.

$dsm_instagram_feed->printJavaScript_DsmInstagramFeed();
YES
BUY TO DOWNLOAD LEVEL 3 NOW USING
* You can use your debit or credit card with PayPal.

Do you need more reasons to get it?

MORE REASONS TO DOWNLOAD 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 Social Media Scripts – LEVEL 3 – PRO PACK

Social Media Scripts - LEVEL 3 - PRO PACK
ITEMOriginal CostLEVEL 3 PRO PACK
Display Facebook EVENTS on Website$49.99YES
Display Facebook PHOTOS on Website$49.99YES
Display Facebook VIDEOS on Website$49.99YES
Display Facebook FEED on Website$49.99YES
Display Instagram FEED On Your Website$49.99YES
BONUS! The following script does not have LEVEL 3, only LEVEL 2. We will give them to you as bonus.
Display Twitter FEED on Website$29.99YES
Display Google+ FEED on Website$29.99YES
BUY TO DOWNLOAD LEVEL 3 PRO PACK NOW USING
Read more about this package. * You can use your debit or credit card with PayPal.

13.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. 

14.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?

15.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 EVENTS on Website
Display Facebook PHOTOS on Website
Display Facebook VIDEOS on Website
Display Facebook TIMELINE on Website
Display Instagram FEED On Your Website
Display Twitter FEED on Website
Display Google+ FEED on Website

16.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 mike@codeofaninja.com, 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.