{"id":"66b1d47d734c9700194110e2","title":"Instagram","path":"how-to/committee/configuring-social-media/instagram","contentMarkdown":"# Configuring an Instagram Feed\n________________\n# `*** Sorry Not working for the moment ***` \n\n## [Until Migrate Instagram Feed to Latest API #16 has been played](https://github.com/nbarrett/ngx-ramblers/issues/16)\n________________\n[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:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/7dd2c2c0-fcc6-472d-a1f5-c275e3733e1c.jpg)\n\n## Introduction\n\nThis article shows you how to:\n* Configure facebook and Instagram apps in the Facebook App Dashboard if this is not already done for your group.\n* Get a [short-lived-access-token](https://developers.facebook.com/docs/instagram-basic-display-api/overview#short-lived-access-tokens).\n* Exchange this for a [long-lived-access-token](https://developers.facebook.com/docs/instagram-basic-display-api/guides/long-lived-access-tokens).\n* Collect and permanently store configuration in your [Admin System Settings](https://ngx-ramblers.org.uk/admin/system-settings).\n\n### Before You Start\nYou will need:\n* To have registered a [Facebook Developer Account](https://developers.facebook.com/apps).\n* An [Instagram account](https://l.facebook.com/l.php?u=https%3A%2F%2Fwww.instagram.com) with media.\n* A command-line tool such as Terminal (on mac) or a command prompt (on Windows) in order to perform basic [cURL](https://curl.se) requests.\n\n### Step 1: Create a Facebook App\n* Go to [developers.facebook.com](https://developers.facebook.com/), click **My Apps**, and create a new app and choose the **Consumer** or **None** [app type](https://developers.facebook.com/docs/development/create-an-app/app-dashboard/app-types).\n* 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**.\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/aebf9864-af39-4d32-ae03-beedac3346c6.jpeg)\n\n* Choose **Website**, add your website’s URL, and save your changes. For the platform, choose **Website**.\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/a8c3d25a-423d-48f3-be30-4386a944269f.jpeg)\n\n### Step 2: Configure Instagram Basic Display\n\n* Click **Products**, locate the **Instagram Basic Display** product, and click **Set Up** to add it to your app.\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/2d2f656e-b5c3-4995-baa9-24836f195aee.jpeg)\n\n* Scroll to the bottom of the page and click **Create New App**.\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/3c826ded-e9f4-42dc-b211-0a0cc2551be4.jpeg)\n\n* In the form that appears, complete each section using the guidelines below.\n\n#### Display Name\n\nEnter the name of the Facebook app you just created.\n\n#### Valid OAuth Redirect URIs\n\n* 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.\n* For example: `https://www.ngx-ramblers.org.uk/handle_auth`\n* 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.\n\n#### Deauthorize Callback URL\n\n* Enter your website’s URL again.\n\n#### Data Deletion Request Callback URL\n\n* Enter your website’s URL again.\n\n#### App Review\n\n* Skip this section, as you will not need to switching the app to [Live Mode](https://developers.facebook.com/docs/apps#live-mode) in order for the feed to be enabled.\n\n### Step 3: Add an Instagram Test User\n\n* 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.\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/a7e84f5e-e08c-41bf-aeb2-08539df76e11.jpeg)\n\n* 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.\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/8baaa8fe-9b0c-402a-8851-4ae940412576.jpeg)\n\n* Your Instagram account is now eligible to be accessed by your Facebook app while it is in [Development Mode](https://developers.facebook.com/docs/apps#development-mode).\n\nStep 4: Authenticate the Test User\n----------------------------------\n\n* 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_.\n\n```\nhttps://api.instagram.com/oauth/authorize\n ?client_id={app-id}\n &redirect_uri=https://www.ngx-ramblers.org.uk/handle_auth\n &scope=user_profile,user_media\n &response_type=code\n```\n* For example:\n\n```\nhttps://api.instagram.com/oauth/authorize\n ?client_id=684477648739411\n &redirect_uri=https://www.ngx-ramblers.org.uk/handle_auth\n &scope=user_profile,user_media\n &response_type=code\n```\n\n* 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.\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/2c2af591-ae1a-4346-8a36-882d3f9b3b04.jpeg)\n\n* 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:\n`https://www.ngx-ramblers.org.uk/handle-auth?code=AQCPojlEZVyWVZ8aCpSkbcaCqOyuusWBFC3umVO47KkpKNwTUSni1_jaX_S_BniA9DDH95_MsmF4bygDrO1vjKr6eVwCZ2DLrX2lcBG0mRvL5oGwZs9tmLO-fqaHEi-CLAtJme5APcIyOyuBZk6hLdnyS8hBBWcy1RaV7zudwpj-FUsofvAOkJ7vDozABSPIAFMpGtXtHb3E51i_w-HiM8mYrVaTGAh0M51ESZ8DLYnGJQ#_`\n\n* 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**.\n\n### Step 5: Exchange the Code for a Token\n\n* Prepare the following `POST` request which you will need to send as a [cURL](https://curl.se) command to the API after you've copied it to the clipboard:\n\n```\ncurl -X POST \\\n https://api.instagram.com/oauth/access_token \\\n -F client_id={app-id} \\\n -F client_secret={app-secret} \\\n -F grant_type=authorization_code \\\n -F redirect_uri=https://www.ngx-ramblers.org.uk/handle_auth \\\n -F code={code}\n``` \n\n* 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:\n\n```\ncurl -X POST \\\n https://api.instagram.com/oauth/access_token \\\n -F client_id=684477648739411 \\\n -F client_secret=eb8c7... \\\n -F grant_type=authorization_code \\\n -F redirect_uri=https://www.ngx-ramblers.org.uk/handle_auth \\\n -F code=AQCPojlEZVyWVZ8aCpSkbcaCqOyuusWBFC3umVO47KkpKNwTUSni1_jaX_S_BniA9DDH95_MsmF4bygDrO1vjKr6eVwCZ2DLrX2lcBG0mRvL5oGwZs9tmLO-fqaHEi-CLAtJme5APcIyOyuBZk6hLdnyS8hBBWcy1RaV7zudwpj-FUsofvAOkJ7vDozABSPIAFMpGtXtHb3E51i_w-HiM8mYrVaTGAh0M51ESZ8DLYnGJQ\n```\n* Open your terminal or command prompt window and paste in the [cURL](https://curl.se) command you have prepared.\n* Upon success, the API will return a JSON encoded object containing a short-lived Instagram User Access Token, valid for 1 hour:\n\n```\n{\n \"access_token\": \"IGQVJ...\",\n \"user_id\": 17841405793187218\n}\n```\n\n* 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.\n\n### Step 6: Get a Long-Lived Token\n* 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.\n* 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. \n\n```\ncurl -i -X GET https://graph.instagram.com/access_token\n ?grant_type=ig_exchange_token\n &client_secret={app-secret}\n &access_token={short-lived-access-token}\n```\n\n* In your existing terminal or command prompt window, paste the [cURL](https://curl.se) command you prepared above and you should see a JSON response returned similar to the following:\n\n```\n{\n \"access_token\":\"IGQWRNNF9IWEVDNkFWaF9JSTRRcEFGYTcxZAGdiMjhRSlNkZAGt5LXBoVmYtOWhSbzM4Y\",\n \"token_type\": \"bearer\",\n \"expires_in\": 5183944 \n}\n```\n\n### Step 7: Save your Instagram configuration details in your Website Config\n\n* Navigate to [Admin System Settings](https://ngx-ramblers.org.uk/admin/system-settings) and click on the **External Systems** tab. The second section enables you to enter the Instagram credentails you have just collected.\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/6e33c5c0-08d7-406a-aeb2-13890a4f6f41.jpg)\n\nNow enter / check the following details:\n\n* **Url** — enter https://www.instagram.com if it's not already populated\n* **Group Name** — enter the name of your group at the end of the url when you visit your group on instagram. \n* **Access Token** — enter the long-lived `access_token` that you collected on Step 6\n* **Show Instagram Feed** — check this box to show the feed or uncheck to hide it.\n* Click the Save button and then visit your website home page to see whether your feed is rendering properly!\n\n#### Refreshing The Access Token\nAccording to the [Instagram API documentation](https://developers.facebook.com/docs/instagram-basic-display-api/reference/refresh_access_token#reading), 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.\n\n#### Troubleshooting\nIf 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](mailto:support@ngx-ramblers.org.uk)!","contentHtml":"

Configuring an Instagram Feed

\n
\n

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

\n

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

\n
\n

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:

\n

\"\"

\n

Introduction

\n

This article shows you how to:

\n\n

Before You Start

\n

You will need:

\n\n

Step 1: Create a Facebook App

\n\n

\"\"

\n\n

\"\"

\n

Step 2: Configure Instagram Basic Display

\n\n

\"\"

\n\n

\"\"

\n\n

Display Name

\n

Enter the name of the Facebook app you just created.

\n

Valid OAuth Redirect URIs

\n\n

Deauthorize Callback URL

\n\n

Data Deletion Request Callback URL

\n\n

App Review

\n\n

Step 3: Add an Instagram Test User

\n\n

\"\"

\n\n

\"\"

\n\n

Step 4: Authenticate the Test User

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

\"\"

\n\n

Step 5: Exchange the Code for a Token

\n\n
curl -X POST \\\n  https://api.instagram.com/oauth/access_token \\\n  -F client_id={app-id} \\\n  -F client_secret={app-secret} \\\n  -F grant_type=authorization_code \\\n  -F redirect_uri=https://www.ngx-ramblers.org.uk/handle_auth \\\n  -F code={code}\n
\n\n
curl -X POST \\\n  https://api.instagram.com/oauth/access_token \\\n  -F client_id=684477648739411 \\\n  -F client_secret=eb8c7... \\\n  -F grant_type=authorization_code \\\n  -F redirect_uri=https://www.ngx-ramblers.org.uk/handle_auth \\\n  -F code=AQCPojlEZVyWVZ8aCpSkbcaCqOyuusWBFC3umVO47KkpKNwTUSni1_jaX_S_BniA9DDH95_MsmF4bygDrO1vjKr6eVwCZ2DLrX2lcBG0mRvL5oGwZs9tmLO-fqaHEi-CLAtJme5APcIyOyuBZk6hLdnyS8hBBWcy1RaV7zudwpj-FUsofvAOkJ7vDozABSPIAFMpGtXtHb3E51i_w-HiM8mYrVaTGAh0M51ESZ8DLYnGJQ\n
\n\n
{\n  "access_token": "IGQVJ...",\n  "user_id": 17841405793187218\n}\n
\n\n

Step 6: Get a Long-Lived Token

\n\n
curl -i -X GET https://graph.instagram.com/access_token\n  ?grant_type=ig_exchange_token\n  &client_secret={app-secret}\n  &access_token={short-lived-access-token}\n
\n\n
{\n  "access_token":"IGQWRNNF9IWEVDNkFWaF9JSTRRcEFGYTcxZAGdiMjhRSlNkZAGt5LXBoVmYtOWhSbzM4Y",\n  "token_type": "bearer",\n  "expires_in": 5183944  \n}\n
\n

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

\n\n

\"\"

\n

Now enter / check the following details:

\n\n

Refreshing The Access Token

\n

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.

\n

Troubleshooting

\n

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!

\n"}