Using the Instagram API + Serverless Netlify to display your own Photos in 2021

Image on my website from the Instagram API

This guide leverages Netlify serverless functions to display your own photos on your personal website using the Instagram API. It doesn’t require authentication on the user’s part as the end goal is to simply display your own account’s photos on your own website.

Overview - Instagram Platform - Documentation - Facebook for Developers

1. Assign the Instagram account you want to use as a Tester.

Get Started - Instagram Platform - Documentation - Facebook for Developers

The first step is adding an Instagram account that you want to use to display your photos. Navigate to the Facebook App Dashboard and head over to the application you created. Add the Instagram Basic Display to your app.

Instagram Basic Display API

Navigate to the Instagram Testers section of the dashboard and add your own account as an Instagram tester. Generate a token for the account and store this token somewhere safe. Keep in mind that these tokens are only valid for 60 days.

2. Get your User ID

Now you need a reference of your own user id. The most reliable way I found was using the me api. This API gets the user id via the access token. Keep in mind this id is not the same one you can get publicly on the Instagram website.

https://graph.instagram.com/me?access_token={access_token}

Then your id should return:

{ "id": "17841412370746239" }

3. Retrieve the media

Using your user id and token, you can get the media url for your photos by specifying it in the fields using a comma delimiter.

Get Profiles and Media - Instagram Platform - Documentation - Facebook for Developers

https://graph.instagram.com/{user-id}/media?fields=id, caption,link,media_url&access_token={access-token}

What is returned:

{ "data": [{
    "id": "17891168110666689",
    "caption": "2/10 models would not recommend. Can’t stop laughing for 2 seconds to take photo",
    "media_url": "https://scontent.cdninstagram.com/v/t51.29350-15/120748981_969588000210663_132999200767840801_n.jpg?_nc_cat=104&ccb=2&_nc_sid=8ae9d6&_nc_ohc=dnG8fjr2IUIAX8S8808&_nc_ht=scontent.cdninstagram.com&oh=18d10a4a61ba2b51af684a33ec107bae&oe=600B2998"
}, { "id": "17976324082316241",
     "caption": "2/10 models would not recommend. Can’t stop laughing for 2 seconds to take photo",
     "media_url": "https://scontent.cdninstagram.com/v/t51.29350-15/120602071_273624070383413_902912852898004158_n.jpg?_nc_cat=108&ccb=2&_nc_sid=8ae9d6&_nc_ohc=09C0krtnCFMAX-QFyPT&_nc_ht=scontent.cdninstagram.com&oh=c58ed73f03af8bedc37bcc2d97573270&oe=600ABDDF"
}]}

Using Netlify

Head over to Netlify.com and create a website. Functions is where you can deploy serverless functions. Serverless functions work as a pseudo-backend so you can deploy static websites with server calls.

Create a serverless function in your functions directory. Name it anything you want. In this example, I use photos.js. This is a basic call using the Instagram API:

Specify in Netlify where to look for your functions.

Netlify Functions | Netlify

That’s it! You should be able to make simple API calls to display your Instagram photos. Remember some key things:

• You need to rotate out your key every 60 days. Long access tokens still need to be rotated out.
• Don’t commit your secret key. You can use it in dev and Netlify’s UI, but don’t store it in Github.

🤘