Setup Instagram Basic Display API

[Pages:7]Setup Instagram Feed ? Instagram Basic Display API

? Facebook Account ? Facebook Developer Account ? Instagram Account Step 1: Create Facebook App 1. Go to 2. Log in with your Facebook account to get a Facebook Developer Account

3. Create App a. Select Consumer for app type and hit next

b. Fill in Display name c. Fill in App contact email d. Click Create app

4. Re-enter your password.

5. In the App Dashboard, go to the sidebar and click on Settings, it will dropdown, click Basic

a. Scroll down to the bottom and click on Add Platform b. Choose Website, add your website's URL () c. Click on Save Changes

Step 2: Configure Instagram Basic Display 1. Go to the sidebar and click on PRODUCTS

2. Find Instagram Basic Display and click Set Up 3. Instagram Basic Display will appear underneath PRODUCTS in the sidebar. In the

dropdown, click on Basic Display and scroll to the bottom and click on Create New App

4. Create New App: a. Fill in Display Name b. Fill in Valid OAuth Redirect URIs with your website URL () c. Fill in Deauthorize Callback URL with your website URL d. Fill in Data Deletion Request Callback URL with your website URL e. Skip App Review and save

Step 3: Add an Instagram Test User 1. Navigate to Roles > Roles and scroll down to the Instagram Testers section. Click Add Instagram Testers and enter your Instagram account's username and send the invitation.

2. Open in a new web browser and go to and sign into your Instagram account that you just invited. Navigate to (Profile Icon) > Edit Profile > Apps and Websites > Tester Invites and accept the invitation.

3. Your Instagram account is now eligible to be accessed by your Facebook app while it is in Development Mode.

Step 4: Get User Access Token If your app is solely for the purpose of generating access tokens with the User Token Generator, you do not need to submit your app for App Review. The User Token Generator does not require any permissions and can be used while your app is in Development Mode.

1. You can access the token generator in the App Dashboard > Products > Instagram Basic Display > Basic Display tab.

2. Scroll down to User Token Generator and click on Generate Token next to your account.

3. You will need to log into the Instagram account to confirm. 4. After confirming click on I understand, you might be prompt to provide your Facebook

password to view the user access token. You will need this for Step 5.

5. Make sure to also collect the Instagram App ID and Instagram App Secret on the same page. You will be prompted for a password to see the Instagram App Secret.

Step 5: Link your Caltech website with your Instagram Things you'll need from Step 4:

? Instagram App ID ? Instagram App Secret ? Instagram Access Token (the user access token that was just generated) 1. Log into your website and navigate to Settings > Setting Preferences 2. Select the Social Media tab at the top menu and scroll down to the Social Media Feeds

section. 3. Fill in your Instagram information:

a. Your Instagram URL b. Instagram Username c. Instagram App ID d. Instagram App Secret e. Instagram Access Token 4. Save Changes 5. Go to a page in edit mode and insert the Instagram feed.

6. Save and view your page!

Troubleshooting

My Facebook App got deactivated, what do I do? Try reactivating your application. It may require you to update Graph API. At the time of writing this, v15 is the latest version, and still works on Caltech Sites. After reactivating, you will need to repeat Step 4, to generate a new User Access Token, and Step 5, to update your Caltech Sites' Instagram settings with it. If your feed does not reappear, please report this to templates@caltech.edu.

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download