Blog

The new way to add an Instagram Feed to your Website after Endpoint Retirement in 2020

Does it feel like nothing is going right in 2020??? Like we don’t already have enough to worry about with a Worldwide Recession, murder hornets, an upcoming election, and of course the Coronavirus (Covid-19)… well now we get to also add broken Instagram feeds to our ever growing list. If you’ve encountered this message “This endpoint has been retired” or just simply a broken or missing Instagram feed then you’re not alone because Instagram has decided to end support for something so widely used around the web. This has not only affected our website but all of our past clients that requested this functionality as well. We knew there had to be another solution, so we devoted countless hours in research and development to ultimately find one that works. We decided that with everything going on in the world and how wide spread the effects of this endpoint retirement must have on the web that we should give back and share our method with the community. In this tutorial we will teach you the new way to add an Instagram Feed to your website after endpoint retirement in the year 2020.

Step 1: Register a Facebook Developer App

Since the Instagram method for creating an Instagram feed is no longer supported in 2020 we will need to turn to a new method that utilizes a Facebook for Developers App. Before starting the steps below make sure that you are logged into your Facebook account.

Step 1-A: Visit the following Facebook Developer URL: https://developers.facebook.com/apps/

Step 1-B: Click on the ‘Add a New App‘ button and select the option ‘For Everything Else‘.

Step 1-C: Give your app an ‘App Display Name‘ to easily identify it and fill out the remaining information, when you’re ready click the ‘Create App ID‘ button.

Step 1-D: After successfully creating your app you will then be redirected to a different dashboard where you can ‘Add a Product’. From the product list you are going to use ‘Instagram Basic Display‘, once you’ve located it click the ‘Set Up‘ button to proceed.

Step 1-E: After clicking the ‘Set Up‘ button you will then once again be redirected to a different page, scroll down to the bottom and click the ‘Create New App‘ button. This should trigger a pop up window, double check your ‘Display Name‘ and then click the ‘Create App‘ button.

Step 1-F: Now that your app is created, you will need to finalize some of the settings. Scroll down to the bottom of the app dashboard to ‘My Products‘, find ‘Instagram Basic Display‘ and click on the ‘Settings‘ button.

Step 1-G: After clicking the ‘Settings‘ button you should be redirected to a settings page. Scroll down until you find the following fields and enter your website’s URL (*https only) on each of them:

  • Valid OAuth Redirect URIs
  • Deauthorize Callback URL
  • Data Deletion Requests

In order to use the Instagram platform, your app needs to be approved for instagram_graph_user_profile and instagram_graph_user_media permission. Scroll down to the ‘App Review for Instagram Basic Display‘ and click on each of the ‘Add to Submission‘ buttons. Fill in and supply all of the other listed requirements for Facebook approval.

Step 2: Generate your Instagram Token

Since Facebook needs to review and approve your app you will need to obtain a temporary Instagram token for the meantime. On the same settings page from Step 1-G complete the following steps:

Step 2-A: Find the section ‘User Token Generator‘ and click on the button ‘Add or Remove Instagram Testers’.

Step 2-B: After clicking the ‘Add or Remove Instagram Testers’ button you will be redirected to a different page, scroll down to the section ‘Instagram Testers’ and click the button ‘Add Instagram Testers‘.

Step 2-C: After clicking the ‘Add Instagram Testers‘ button a pop up window will open, add the username of your Instagram account and click the ‘Submit‘ button.

Step 2-D: After clicking the ‘Submit‘ button you should see your profile in the ‘Instagram Testers‘ section with a pending status. You will need to approve the invitation by logging into your Instagram account and visiting the follow link: https://www.instagram.com/accounts/manage_access/

Step 2-E: Once on the ‘Apps and Websites‘ Instagram access management page click on the tab ‘Tester Invites‘, you should see your app listed here, click on the ‘Accept‘ button. Your invite has now been accepted and added as active, if you go back to your Facebook app the ‘Pending‘ next to your username should now be removed.

Step 2-F: On the Facebook app go back to the ‘Basic Display‘ dashboard and scroll down to the ‘User Token Generator‘ section from ‘Step 2-A‘ and click the ‘Generate Token‘ button next to your profile. A window should pop up with an Instagram login, make sure you are logging into the correct account. After logging in you will be taken to a page to authorize permission to allow your app to gain access to your profile info and media, click the ‘Authorize‘ button.

Step 2-G: After clicking the ‘Authorize‘ button the window will be closed and a pop up window located on your Facebook app screen will display your generated token, click ‘I Understand‘ to display your full token.

Step 2-H: Copy your Instagram token and store it for use on the next main steps.

*Please note that your temporary Instagram token will only be valid for 2 months, after which you will need to repeat this step to obtain a new one.

Step 3: Retrieve your Instagram ID

Now that you have your Instagram token generated you can use that token to retrieve your Instagram ID by following these steps:

Step 3-A: Copy the following URL: https://graph.instagram.com/me?fields=id,username&access_token=your-instagram-token

Step 3-B: Replace ‘your-instagram-token‘ with your Instagram token generated from Step 2.

Step 3-C: Paste the URL containing your Instagram token in your web browser.

Step 3-D: Your Instagram ID should now be displayed on the web page, copy and store it for use on the next main steps.

Step 4: Setup a PHP Function to Display your Instagram Feed

Now that you have generated your Instagram token (Step 2) and retrieved your Instagram ID (Step 3) you can now setup a PHP function to display your Instagram feed. Copy the PHP code below and reference the ‘Items to Note‘ that follow for setup instructions:

PHP

function dd_instagram( $AccessToken , $feed = null ){
	$timestamp = mktime(date('H'), date('i'), 0, date('n'), date('j') - 1, date('Y'));
	$AccessToken = 'Your-Instagram-Token';
	$instagram_user_id = 'Your-Instagram-User-ID';
	$url = 'https://graph.instagram.com/'.$instagram_user_id.'/media?access_token=' . $AccessToken;
	$counter = 0;

	$ch = curl_init();

	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_HEADER, false);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
	curl_setopt($ch, CURLOPT_MAXREDIRS, 10);
	curl_setopt($ch, CURLOPT_USERAGENT, 'Instagram Gallery');

	$result = curl_exec($ch);
	$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
	curl_close($ch);

	$result = json_decode($result);
	
	foreach ($result->data as $media_id){
		$id = $media_id->id;;
		
		$counter++;
		if( $counter <= $feed ){
		
			if( $id ) {
				$url = 'https://graph.instagram.com/'.$id.'?fields=id,media_type,media_url,username,timestamp,permalink&access_token=' . $AccessToken;
				$ch = curl_init();
				curl_setopt($ch, CURLOPT_URL, $url);
				curl_setopt($ch, CURLOPT_HEADER, false);
				curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
				curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
				curl_setopt($ch, CURLOPT_MAXREDIRS, 10);
				curl_setopt($ch, CURLOPT_USERAGENT, 'Instagram Gallery');

				$result_image = curl_exec($ch);
				$http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
				curl_close($ch);
				$result_image = json_decode($result_image);
				echo '<span class="instagram-image"><a href="' .$result_image->permalink. '" target="_blank"><img src="' .$result_image->media_url. '"/></a></span>';
			}
		}
	}
}

Items to Note:

  • Replace ‘Your-Instagram-Token‘ with your Instagram token generated from Step 2. (Make sure you keep the outer quotes ”)
  • Replace ‘Your-Instagram-ID‘ with your Instagram ID generated from Step 3. (Make sure you keep the outer quotes ”)

Step 5: Display your Instagram Feed with a PHP Function Callback

Now that your PHP function is setup properly and contains your unique Instagram token and ID you can display it anywhere on your website using the PHP function callback. Copy the PHP code below and reference the ‘Items to Note‘ that follow for setup instructions:

HTML/PHP

<div id=”instagram-feed”><?php dd_instagram('instagram',4); ?></div>

Items to Note:

  • You can change the html wrapper element to anything you want, we made this as simple as possible by using a div with the id ‘instagram-feed‘ which will be used as a reference for the CSS in the next and final main step. Please note that if you end up changing this structure you will need to update the CSS as well.
  • You can change the number of images that display by editing the number ‘4‘. If you change this number then you will need to update the CSS as well depending on how many images you want to display on a row. (See Step 6)
  • Please remember that this code is meant to be a basic guideline, you may need to modify it in order to suit your particular needs.

Step 6: Style your Instagram Feed with CSS

Now that you have your Instagram feed displaying on your webpage you will need to use CSS to style its appearance. Copy the CSS code below and reference the ‘Items to Note‘ that follow for setup instructions:

CSS

#instagram-feed{ 
  width: 100%; 
  max-width: 600px; 
  float: left; 
}
#instagram-feed .instagram-image{ 
  width: 25%; 
  float: left;
  padding: 5px;
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
}
#instagram-feed .instagram-image img{ 
  display: none; 
}
#instagram-feed .instagram-image a{ 
  display: block; 
  background-color: #000;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover; 
}
#instagram-feed .instagram-image a::before{ 
  content: ''; 
  display: block; 
  padding-top: 100%; 
}

Items to Note:

  • On Line 3 you can edit or remove the ‘max-width‘ of 600px set on the main div element (#instagram-feed).
  • If you adjusted the number of images that display on Step 5, then you will need to update the width of the Instagram image element (.instagram-image) on Line 7.
  • If you want to control how many Instagram image elements (.instagram-image) display on a single row you can edit the width on Line 7. Example: If you want to display 4 Instagram images but only show 2 on each row, then you would change the width to 50%.
  • On Line 9 you can control how much spacing is around each Instagram image element (.instagram-image) by editing the padding.
  • Please remember that this code is meant to be a basic guideline, you may need to modify it in order to suit your particular needs.

Please Note: Temporary Solution with Limitations

Please note that this method may be subject to change at any moment and that with any third party applications we are at the mercy of the controlling party. This method contains a temporary method for obtaining an Instagram token, at the time of writing this tutorial we are still awaiting our Facebook app approval so we cannot give instructions beyond this point yet. Until approval your Facebook app also has an application rate limit, please read the official Facebook statement regarding the limitations:

Rate limiting defines limits on how many API calls can be made within a specified time period. Application-level rate limits apply to calls made using any access token other than a Page access token and ads APIs calls. The total number of calls your app can make per hour is 200 times the number of users. Please note this isn’t a per-user limit. Any individual user can make more than 200 calls per hour, as long as the total for all users does not exceed the app maximum.

Learn more here: https://developers.facebook.com/docs/graph-api/overview/rate-limiting#application-level-rate-limiting

Demo

Visit our homepage to see our new Instagram feed in action. | VIEW DEMO

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again. Please do not email us with problems regarding this tutorial unless you want to hire us.

Hire Us

If you are unfamiliar with web development and need help displaying or fixing your Instagram feed we are available for hire. Please contact us in order to receive a quote for this or any other service.

Request a Free Quote