How to get Instagram API access token and fix your broken feed
Instagram changed up the API to require Access Tokens to use even the most basic ‘media’ endpoint requests. This is a quick breakdown on the steps to get the Access Token on your local machine… and you don’t have to be a coder or developer to follow most of these steps and fix your Instagram feed.
Step 1 — Register Application
Visit https://www.instagram.com/developer and register a new app
Step 2 — Register New App Client
Go to Manage Clients, and hit ‘Register a New Client’ to register and gain API access
Step 3 — Copy or Save Client ID
Copy the Client ID here, or at least keep this tab open, you will need the Client ID soon.
Step 4—Configure Client for Public Access
Click ‘Edit’ on your app from the Manage Clients screen, then open the ‘Security’ tab and uncheck the ‘Disable Implicit OAuth’ since we’d like the public to be able to see our feed.
Also, open the ‘Sandbox’ tab and confirm you are the ‘admin’ of this app.
Step 5—Spin up a ‘localhost’ to access API url
One big change to the API is that you have to use an ‘Access Token’ to access media now… this is likely what broke your feed.
Spin up a localhost server for this step: You will need to run a local server to view your access token, so use your favorite MAMP, LAMP, Node whatever you use to create a local server. If you don’t use local servers, it’s super easy with MAMP to get up and running: mamp.info/en/downloads. For the purposes of this example I will use MAMP and point Apache to port 3000.
Step 6—Use this API URL in abrowser
Once you have a ‘localhost’ server running, you can use a simple URL in your browser to grab your access token. Open your browser and paste the url below, replacing the string after ‘client_id’ and before the ’&’ with your Client ID you saved earlier, and hit Enter to visit this URL:
Remember: Replace the ‘a52dbbed09524a0c83dd2f3620da3386’ part of this url with your Client ID. You can access the Client ID again from the Instagram Developers site on the Manage Clients page.
Step 7—Authorize it.
Visiting the URL we made with the Client ID will bring up an ‘Authorize’ screen. At this point, you are using your local server to simulate an API connection, and you will Authorize it to get a view of the Access Token response. Click ‘Authorize’.
Step 8—Ta-da! Access token.
This page appears broken, but it has a critical bit of data in the URL… right after ‘#access_token=’ you can grab your public Access Token, which also has your ID in it.
According to this response, the access token is: 1915084522.a52dbbe.76ef404eec5045e0ab349f864efe1751
User ID is the first string of numbers before the first dot (.) so the User ID here is 1915084522
Step 9—Example
Here is a quick snippet to give you an idea of how you can use the access token:
(Updated March 29, 2017 with a StackOverflow find, lol)
<?php
function get_instagram($user_id=15203338,$count=6,$width=190,$height=190){
$url = 'https://api.instagram.com/v1/users/'.$user_id.'/media/recent/?access_token=13137.f59def8.1a759775695548999504c219ce7b2ecf&count='.$count;
// Also Perhaps you should cache the results as the instagram API is slow
$cache = './'.sha1($url).'.json';
if(file_exists($cache) && filemtime($cache) > time() - 60*60){
// If a cache file exists, and it is newer than 1 hour, use it
$jsonData = json_decode(file_get_contents($cache));
} else {
$jsonData = json_decode((file_get_contents($url)));
file_put_contents($cache,json_encode($jsonData));
}
$result = '<div id="instagram">'.PHP_EOL;
foreach ($jsonData->data as $key=>$value) {
$result .= "\t".'<a class="fancybox" data-fancybox-group="gallery"
title="'.htmlentities($value->caption->text).' '.htmlentities(date("F j, Y, g:i a", $value->caption->created_time)).'"
style="padding:3px" href="'.$value->images->standard_resolution->url.'">
<img src="'.$value->images->low_resolution->url.'" alt="'.$value->caption->text.'" width="'.$width.'" height="'.$height.'" />
</a>'.PHP_EOL;
}
$result .= '</div>'.PHP_EOL;
return $result;
}
echo get_instagram();
?>