How to Publish Content with the Instagram Graph API

Share Instagram posts from a React app — Step by step guide

Jakub Kozak
Apr 21 · 5 min read

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.

How to Set Up a Business Account on Instagram

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.

How to Connect a Facebook Page to Your Instagram Business Account

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.

How to Create a Facebook app

Step 4: Set up Facebook Login

  • When setting up Facebook Login, you have to enter only the “Site URL”. Our React app will run on https://localhost:3000 in development.

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

  1. 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 package.json.

"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 shareInstagramPost function.

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.

https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow/

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.

https://developers.facebook.com/docs/graph-api/securing-requests/

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store