readme.md

Static Example

🚨 This example shows how to authenticate and consume the Instagram Basic Display API but please do be aware that because it is static and client side you should not publish direct to production as it does not protect your client_secret.

Feel free to take the code and use it but you will need something like dotenv or similar to be able to store these variables as environment variables or github secrets or similar.

Facebook and Instagram Setup

First make sure you have the client_id, client_secret and redirect_url configured and noted down, for more information go to the Facebook and Instagram Setup page.

Configure index.js with your client_id and redirect_url

Open /samples/Static/index.js and at the top of the page add your credentials you created in the Facebook and Instagram Setup above.

index.js

const client_id = 'enter your client_id here';
const redirect_url = 'enter your redirect_url here';

Configure oauth.js with your client_id, client_secret and redirect_url

Open /samples/Static/oauth.js and at the top of the page add your credentials you created in the Facebook and Instagram Setup above.

🚨 PLEASE NOTE This example shows how to authenticate and consume the Instagram Basic Display API but please do be aware that because it is static and client side you should not publish direct to production as it does not protect your client_secret.

oauth.js

const client_id = 'enter your client_id here';
const client_secret = 'enter your client_secret here';
const redirect_url = 'enter your redirect_url here';

Start a local web server

First navigate to the directory this readme.md file is in.

cd path/to/samples/static/

Launch a web server in the samples/Static folder on port 5000

Here are some examples in various languages and tools

Python

python3 -m http.server 5000
python -m SimpleHTTPServer 5000

.NET Core

dotnet tool install --global dotnet-serve
dotnet serve -p 5000

JavaScript

sudo npm install http-server -g
http-server --port 5000

PHP

php -S 127.0.0.1:5000

Serve local site over HTTPS using ngrok

Next you will need to serve the static site over HTTPS

First navigate to the directory this readme.md file is in.

cd path/to/samples/static/

Use ngrok to be able to serve local site over HTTPS

ngrok http 5000

Update Facebook app to accept ngrok url as a valid redirect_url

Open index page via ngrok

e.g https://ngrok.url/index.html which will serve the index.html page from the samples/static folder over https which is required by the Facebook app.