In June 2016 Instagram introduced updates to their Platform Policy to improve people’s control over their content. The new API update means a lot of you will have found your Instagram feeds on your site no longer working and unfortunately it can be quite complicated trying to figure out how to get the feeds running again by applying for permission from Instagram to access the API Platform. We have recently set this up for ourselves and a number of clients and thought it might help to create this step by step guide.

As easy as we hope this guide makes the process for you, it will still require the help of your developer.

The first step in the process is to get your access token – this is the important key needed to allow your account to be viewable.
To get started follow this link - https://www.instagram.com/developer/ (ensure that you are logged in to Instagram first).

1. Once you click on the above link you should see this screen

 screengrab 1

2. In the top right hand corner click on Manage Clients

 

3. Click on ‘Register a New Client’

 

 

Enter your details in the registration form.

• Application Name – Enter any info here i.e. your company name or the site you want your feed to appear on e.g. Engage Website Instagram Feed
• Description – Brief description of where the feed will appear.
• Company Name - Engage
• Website URL – Website where feed will appear – www.madetoengage.com
• Valid Redirect URLs – This is the step that has caused people some issue. Enter the following exact text as your redirect url – http://localhost
• Privacy Policy URL – Link to your Privacy Policy on your website/website where feed will appear
• Contact Email – Your contact email address

 

Enter the Captcha and click Register

You will then see a Successfully registered ‘Application Name’ message and a list of registered clients.

4. Click Manage on your newly registered client

 

5. From here you will need two key pieces of information, the Client ID and the Redirect URL. You’ll need to click on the security tab to see the Redirect URL.

On the security tab if the Disable implicit OAuth is ticked please untick and click Update Client then navigate back to this screen.

6. In a new tab enter the following into your address bar, swapping out the underlined content with your actual information i.e. remove CLIENT-ID and add your client ID from above & remove REDIRECT-URl and add in

http://localhost : https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

7. From here there are a number of options on what might happen next.

6A. You may get this pop up asking you to give authorisation to proceed:

Click Authorise.

You should see the URL update to include your access token. There will be still a Not Found HTTP Error 404 but on inspection of the URL you will see it now provides an access token. Everything after the = is the access token. If so, proceed to step 7

6B. However, you may get an error message similar to below where the URL does not update to include an access token:

In this case you need to enter the below in your address bar, again swapping out YOUR-CLIENT-ID and YOUR-REDIRECT-RI for your actual information
https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code

8. After step 6A or 6B you should see your access token appear in the URL. There will be still a Not Found HTTP Error 404 but on inspection of the URL you will see it now provides an access token:

Everything after the = sign is your access token. Take a note of this.

9. Once more you need to enter the below in your address bar, swapping out YOUR-ClIENT-ID and YOUR-REDIRECT-RI. This is to give further authorisation.

https://www.instagram.com/oauth/authorize/?client_id=YOUR-CLIENT-ID&redirect_uri=YOUR-REDIRECT-RI&response_type=code&scope=basic+comments+follower_list+likes+relationships+public_content

Click Authorize.

 

10. Once you have done this authorisation and you have your access token you need to ensure you can access your account and get the images you are hoping to render. To do this please go to this URL:

https://api.instagram.com/v1/users/search?q=[USER_NAME]&count=12&access_token=[ACCESS_TOKEN]

Please change the dummy content to the relevant details i.e. [USER_NAME] to your Instagram username and [ACCESS_TOKEN] to the access token received in step 7.

Once complete you should be shown something like below:

 

You want the text on the page to begin with {“meta”: {“code”: 200}, “data”: [{“username”:
The data you see should all be your info i.e. your username, your bio, your website etc.

11. If you are able to get this information you now need to go back to your developers and get them to update the section on your website where your instagram feed appears. You will need to provide them with your Client ID, your Access Token and your Username.

Once your developers have made the relevant changes your api should be ready to go. To add it to the site we would recommend using spectragram.js. It creates a nice and easy setup to get your instagram feed up and running.

Essentally all you need to do as a developer is add the following script files to your site

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/spectragram.js"></script>

And the following in your javascript file (ensuring it gets triggered)

jQuery.fn.spectragram.accessData = {
accessToken: '[your-instagram-access-token]',
clientID: '[your-instagram-application-clientID]'
};

$('div').spectragram({
query: 'converse',
max: 14,
size: 'big',
wrapEachWith: '<p></p>'
});

Once you have updated the code above with the details you have got from above and updated the $(‘div’) with the relevant id of where you would like the feed to render, your Instagram feed should appear on your site.