Configuring an Instagram Feed

*** Sorry Not working for the moment ***

Until Migrate Instagram Feed to Latest API #16 has been played

NGX-Ramblers has built-in support for rendering social media feeds for your group automatically, one of which is instagram. When configured correctly, it can be rendered alongside a corresponding facebook feed as shown in the example below and shows the 14 most recent media posts:

Introduction

This article shows you how to:

• Configure facebook and Instagram apps in the Facebook App Dashboard if this is not already done for your group.
• Get a short-lived-access-token.
• Exchange this for a long-lived-access-token.
• Collect and permanently store configuration in your Admin System Settings.

Before You Start

You will need:

• To have registered a Facebook Developer Account.
• An Instagram account with media.
• A command-line tool such as Terminal (on mac) or a command prompt (on Windows) in order to perform basic cURL requests.

Step 1: Create a Facebook App

• Go to developers.facebook.com, click My Apps, and create a new app and choose the Consumer or None app type.
• Once you have created the app and are in the App Dashboard, navigate to Settings > Basic, scroll to the bottom of page, and click Add Platform.

• Choose Website, add your website’s URL, and save your changes. For the platform, choose Website.

Step 2: Configure Instagram Basic Display

• Click Products, locate the Instagram Basic Display product, and click Set Up to add it to your app.

• Scroll to the bottom of the page and click Create New App.

• In the form that appears, complete each section using the guidelines below.

Display Name

Enter the name of the Facebook app you just created.

Valid OAuth Redirect URIs

• Enter your website’s URL followed by /handle_auth. It doesn't really matter what this is as long as when you navigate to this url the page won't redirect to a "page not found" screen and clear the url you just tried to navigate to. NGX-Ramblers websites don't do this, but just show an alert message a page cannnot not be found. This is what you need.
• For example: https://www.ngx-ramblers.org.uk/handle_auth
• After you enter a URL, save your changes. Copy the complete URL to a note somewhere since you will need to copy/paste it in later steps to get authorization codes and access tokens.

Deauthorize Callback URL

• Enter your website’s URL again.

Data Deletion Request Callback URL

• Enter your website’s URL again.

App Review

• Skip this section, as you will not need to switching the app to Live Mode in order for the feed to be enabled.

Step 3: Add an Instagram Test User

• Navigate to Roles > Roles and scroll down to the Instagram Testers section. Click Add Instagram Testers and enter your Instagram account’s username and send the invitation.

• Open a web browser tab and go to www.instagram.com and sign into your Instagram account that you just invited. Navigate to (Profile Icon) > Edit Profile > Apps and Websites > Tester Invites and accept the invitation.

• Your Instagram account is now eligible to be accessed by your Facebook app while it is in Development Mode.

Step 4: Authenticate the Test User

• Construct the Authorization Window URL below, replacing {app-id} with your Instagram app’s ID (from the App Dashboard > Products > Instagram > Basic Display > Instagram App ID field) and {redirect-uri} with the website URL https://www.ngx-ramblers.org.uk/handle_auth that you provided in Step 2. The URL must be exactly the same.

https://api.instagram.com/oauth/authorize
  ?client_id={app-id}
  &redirect_uri=https://www.ngx-ramblers.org.uk/handle_auth
  &scope=user_profile,user_media
  &response_type=code

• For example:

https://api.instagram.com/oauth/authorize
  ?client_id=684477648739411
  &redirect_uri=https://www.ngx-ramblers.org.uk/handle_auth
  &scope=user_profile,user_media
  &response_type=code

• Open a new browser window and paste in the url you've prepared above. It should appear and display your Instagram user’s name, the app’s name, and a description of the permissions your app is requesting.

• Authenticate your Instagram test user by signing into the Authorization Window, then click Authorize to grant your app access to your profile data. Upon success, the page will redirect you to the redirect URI you included in the previous step and append an Authorization Code. For example: https://www.ngx-ramblers.org.uk/handle-auth?code=AQCPojlEZVyWVZ8aCpSkbcaCqOyuusWBFC3umVO47KkpKNwTUSni1_jaX_S_BniA9DDH95_MsmF4bygDrO1vjKr6eVwCZ2DLrX2lcBG0mRvL5oGwZs9tmLO-fqaHEi-CLAtJme5APcIyOyuBZk6hLdnyS8hBBWcy1RaV7zudwpj-FUsofvAOkJ7vDozABSPIAFMpGtXtHb3E51i_w-HiM8mYrVaTGAh0M51ESZ8DLYnGJQ#_

• Note that #_ has been appended to the end of the redirect URI, but it is not part of the code itself. Copy the code (without the #_ portion) so you can use it in the next step. Authorization codes are short-lived and are only valid for 1 hour.

Step 5: Exchange the Code for a Token

• Prepare the following POST request which you will need to send as a cURL command to the API after you've copied it to the clipboard:

curl -X POST \
  https://api.instagram.com/oauth/access_token \
  -F client_id={app-id} \
  -F client_secret={app-secret} \
  -F grant_type=authorization_code \
  -F redirect_uri=https://www.ngx-ramblers.org.uk/handle_auth \
  -F code={code}

• Replace {app-id}, {app-secret}, and {code} with your Instagram app ID, Instagram app secret, your redirect URI, and the code you collected on the previous step. For example:

curl -X POST \
  https://api.instagram.com/oauth/access_token \
  -F client_id=684477648739411 \
  -F client_secret=eb8c7... \
  -F grant_type=authorization_code \
  -F redirect_uri=https://www.ngx-ramblers.org.uk/handle_auth \
  -F code=AQCPojlEZVyWVZ8aCpSkbcaCqOyuusWBFC3umVO47KkpKNwTUSni1_jaX_S_BniA9DDH95_MsmF4bygDrO1vjKr6eVwCZ2DLrX2lcBG0mRvL5oGwZs9tmLO-fqaHEi-CLAtJme5APcIyOyuBZk6hLdnyS8hBBWcy1RaV7zudwpj-FUsofvAOkJ7vDozABSPIAFMpGtXtHb3E51i_w-HiM8mYrVaTGAh0M51ESZ8DLYnGJQ

• Open your terminal or command prompt window and paste in the cURL command you have prepared.
• Upon success, the API will return a JSON encoded object containing a short-lived Instagram User Access Token, valid for 1 hour:

{
  "access_token": "IGQVJ...",
  "user_id": 17841405793187218
}

• Copy the access_token (also referred to in the next section as short-lived-access-token) to your notes as you will need to copy / paste it in the next steps.

Step 6: Get a Long-Lived Token

• You now need to use the GET /access_token endpoint to exchange a short-lived Instagram User Access Token for a long-lived token. Once you have a long-lived token, this is what will be saved into your website configuration permanently.
• Prepare a command as shown below, but replace {app-secret} and {short-lived-access-token} with your Instagram app secret and the code you collected on the previous step.

curl -i -X GET https://graph.instagram.com/access_token
  ?grant_type=ig_exchange_token
  &client_secret={app-secret}
  &access_token={short-lived-access-token}

• In your existing terminal or command prompt window, paste the cURL command you prepared above and you should see a JSON response returned similar to the following:

{
  "access_token":"IGQWRNNF9IWEVDNkFWaF9JSTRRcEFGYTcxZAGdiMjhRSlNkZAGt5LXBoVmYtOWhSbzM4Y",
  "token_type": "bearer",
  "expires_in": 5183944  
}

Step 7: Save your Instagram configuration details in your Website Config

• Navigate to Admin System Settings and click on the External Systems tab. The second section enables you to enter the Instagram credentails you have just collected.

Now enter / check the following details:

• Url — enter https://www.instagram.com if it's not already populated
• Group Name — enter the name of your group at the end of the url when you visit your group on instagram.
• Access Token — enter the long-lived access_token that you collected on Step 6
• Show Instagram Feed — check this box to show the feed or uncheck to hide it.
• Click the Save button and then visit your website home page to see whether your feed is rendering properly!

Refreshing The Access Token

According to the Instagram API documentation, the long-lived access_token is only valid for 60 days. However your NGX-Ramblers website will automatically refresh the token when the site is used so there is never any need to do this manually — if you've managed to get the feed working in the prior step, that's all you'll ever need to do.

Troubleshooting

If you've followed the above process and you are still not seeing the instagram feed above, drop us an email and we'll take a look at your site logs to see what's wrong!