Instagram

Steps to set up Instagram Basic Display API with Xkit

Instagram's Guide: https://developers.facebook.com/docs/instagram-basic-display-api/getting-started
Authorization protocol: OAuth 2.0

πŸ“˜

Facebook and Instagram

Multiple steps below will take place in the Facebook Developer Account associated with your Instagram account. Before getting started, please make sure that you have access to your Facebook Developer Account.

1. Add the Instagram connector in the Xkit platform.

  • In the Xkit platform, click "New Connector" in the sidebar and click on the Instagram connector.
  • You will see a callback URL, which you will provide to Instagram in one of the following steps, and places to input the Client ID (Instagram App ID) and Client Secret (Instagram App Secret).

2. Create your integration with the Facebook Developers Platform.

  • In a separate window, sign in to your Facebook Developers account.
  • Click "Create App" and select the app type you require.
  • Name the app and click "Create App."
  • In the sidebar, select "Settings" and then "Basic."
  • Scroll to the bottom of the page, click "+ Add Platform," and select "Website."
  • Under the Website section, add your application's website.

🚧

Deauthorize and Delete Data URLs

In the next step, you will be asked to provide a Deauthorize Callback URL and a Data Deletion Request URL. While your app in is development, these URLs are not required to work. However, before deploying your app to production, you will need to go back and update these fields with functioning URLs.

3. Create your integration with Instagram and provide the callback URL.

  • Next, add the Instagram Basic Display product to your developer account by clicking " Products +" in the sidebar and then "Set Up" under Instagram Basic Display.
  • Scroll to the bottom of the page and click "Create New App"
  • Add the Display Name for your App and click "Create App."
  • Copy/paste the Xkit callback URL provided in the previous step.
  • Enter URLs into the Deauthorize Callback URL and Data Deletion Request URL fields (we have entered nonfunctioning URLs for this demo).
  • Click "Save Changes" to finish adding the Instagram Basic Display product to your developer account.

🚧

Instagram App ID vs Developer App ID

Make sure to copy/paste the Instagram App ID and App Secret from the Instagram Basic Display product and DO NOT copy/paste the Facebook Developer App ID that will be visible at the top of the dashboard.

4. Provide Xkit with the Instagram credentials.

  • Copy/paste your Instagram App ID and Instagram App Secret onto the Xkit page.
  • Click "Save" on the Xkit Service Provider Settings.

5. Update Xkit Catalog Settings and select required scopes.

  • Customize the Catalog Settings page if desired and click "Save."
  • Select the requested scopes/permissions required for your integration and click "Save".

6. Test Instagram connection to Facebook Developer account.

  • Click on "Roles" in the sidebar of your Facebook Developer account.
  • Scroll to the bottom of the page and select "Add Instagram Testers."
  • Enter the username of your Instagram account and click "Submit."
  • Login to your Instagram account, click on your profile picture in the top right corner, and then select "Settings."
  • Select "Apps and Websites" in the sidebar, then click on the "Tester Invites" tab, and click "Accept."

You've now successfully connected Instagram with Xkit!