How to Publish Content with the Instagram Graph API
Facebook finally exposes the API for creating Instagram posts with photos and videos. The Instagram Content Publishing API was in closed beta with Instagram Partners for a long time, but it has changed in January 2021 and now you can use the API too.
You’ll see how to enable the Instagram Graph API and how to use it step by step.
At the end of this tutorial you’ll have a React app with Facebook Login and a form for an image and a caption with any hashtags you like.
1. Before you start coding
If you want to use the Instagram Content Publishing API, Facebook requires you to follow a few steps first. The good news is that it takes only a few clicks.
Step 1: Create an Instagram business account
If you already have a personal account on Instagram, you can easily convert it to a business account. If you’re just experimenting with the Instagram API, you can create another account — you may have 5 accounts at a time.
Step 2: Connect a Facebook page to your Instagram business account
Even though you might not want to share anything on your Facebook page, you still need it for the Instagram API. You’ll see why when we get to the code.
Step 3: Register a Facebook app
When you use the Instagram or Facebook API, you always have to provide a unique ID of your Facebook app. After you create a Facebook app, you can activate various products, e.g. Facebook Login and Instagram Graph API for this React web app.
Step 4: Set up Facebook Login
- Go to the Facebook Dashboard and select your app: https://developers.facebook.com/apps
- Then you’ll see the App Dashboard with all available products. Select “Facebook Login”.
- When setting up Facebook Login, you have to enter only the “Site URL”. Our React app will run on
Step 5: Set up Instagram Graph API
Then go back to the App Dashboard and add another product — “Instagram Graph API”. You don’t need to do anything besides clicking the “Set Up” button. That’s it!
2. Flow for posting to Instagram with APIs
The following chart shows the overall flow for sharing content to Instagram. Here you can also see why you need to have a Facebook page connected to your Instagram account. We’ll implement this flow in a React app in the next step.
3. Let’s code the Instagram app
- We’ll set up the app with Create React App by running just one command:
npx create-react-app instagram-content-publishing-react-app
2. Facebook requires clients to use HTTPS with their products. We can enable it locally by changing the
start script in
"start": "HTTPS=true react-scripts start"
3. Then we have to inject the Facebook SDK to our app. We can create a function that will run before starting the React app.
If you’d like to initialize the SDK after your app has started, you can have a look at that approach here: https://github.com/pixochi/fb-page-posts-integration/blob/master/src/fb-hooks.js.
4. The code below does everything you’ve seen in the chart. We log in to Facebook with their SDK and get a user access token, and then the rest can be found in the
For a better idea, you can have a look and clone the GitHub repo with the complete app:
4. Other considerations
Should I use the SDK for Facebook Login?
I’m not saying that Facebook will do something shady with data from your app, but if your app displays some sensitive information only to authenticated users, you should consider building the flow for Facebook Login manually without the SDK.
Is it secure to post to Instagram from the frontend?
This demo sends all API requests and handles the entire flow on the frontend for the sake of simplicity. However, it is recommended to improve security of your app by using App Secret for server API calls. That means you would implement just the Facebook Login on the frontend and move the rest to your server.
You may like
How to Build a Chrome Extension With React, TypeScript, and Webpack
From creating a boilerplate to publishing a complete extension to Chrome Web Store