Instagram

Showcase your latest Instagram posts.

Enable

To enable Instagram module, please go to WP admin panel › Settings › G1 Socials › Instagram page and check the Enabled box.

Requirements

To show Instagram posts, you will need:

1. A Facebook Developer Account. Instagram is owned by Facebook and now Instragram API is managed by Facebook
2. An Instagram Account with media

Setup

To display your Instragram posts on your site, you have to create an Instragram application and connect it with the site. Please follow these steps:

1. Go to https://developers.facebook.com/, click My Apps, and create a new app. Once you have created the app and are in the App Dashboard, navigate to Settings > Basic, scroll the bottom of page, and click Add Platform.

2. Choose Website, add your website’s URL, and save your changes. You can change the platform later if you wish, but for this tutorial, use Website
3. Click Products, locate the Instagram product, and click Set Up to add it to your app

4. Click Basic Display, scroll to the bottom of the page, then click Create New App

5. In the form that appears, fill in:
   1. Display Name. Enter the name of the Facebook app you just created
   2. Valid OAuth Redirect URIs. Read below from where you can get it
   3. Deauthorize Callback URL. Copy here the Valid OAuth Redirect URIs value
   4. Data Deletion Request Callback URL. Copy here the Valid OAuth Redirect URIs value
   5. App Review for Instagram Basic Display. Read below when you need to send your app for a review
6. To get Valid OAuth Redirect URIs, please return back to your site and go to WP admin panel › Settings › G1 Socials › Instagram page
7. Next to App ID field, click Where do I get this info? link
8. You should see Valid OAuth Redirect URI
9. Copy the URL and enter it in the Instagram application Valid OAuth Redirect URIs field (point 5.2 above)
10. Save changes

11. Once you have finished, copy Instagram App ID and Instagram App Secret

12. Go back to WP admin panel › Settings › G1 Socials › Instagram page and paste them into App ID and App Secret fields
13. Save changes
14. You should now see some additional fields (screen below)

15. Click Get token button
16. If you are not logged in on to your Instagram account, you will be asked to log in
17. Then, Instagram will ask you to Authorize access your newly created application
18. If you followed the previous steps and your application is configured correctly, you should be redirected back to your Instagram settings and the token should be filled in. Below Access Token completed field, you should see information what account the token is associated with
19. Otherwise, you will see the image below. It means that your Instagram application is still in development and your Instagram user's account has not been authorized to access it. To solve the problem, please read App Review section below.

App Review

To use your Instagram application, it has to be in Live Mode or your Instagram user's account has to be added to it as a test user.

Switch to Live Mode

To go Live with your app, you have to submit it for a review. Go back to your Facebook Developer Account, then Instagram > Basic Display and choose instagram_graph_user_media submission option.

Add a test user

Your application doesn't have to be Live to allow you test it. All you need is to add a test user. To do so, please do as follows:

1. Go back to your Facebook Developer Account
2. 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.

3. Go to your Instagram Account
4. Click Edit Profile

5. Navigate to Authorized Applications
6. Choose Tester Invites and accept the invitation
7. Your Instagram account is now eligible to be accessed by your Facebook app while it is in Development Mode

Display

You can display Instagram posts in these locations:

• Sidebar
• Before Main Collection
• Before Footer

Sidebar

To place the Instagram widget in a sidebar, please follow these steps:

1. Go to the WordPress Admin › Appearance › Widgets page
2. Find the G1 Socials Instagram widget and add it to your target sidebar
3. Fill the title
4. Adjust display options
5. Save

Before Main Collection

To display the Instagram posts before the main posts feed, please follow these steps:

1. Go to WordPress Admin › Appearance › Customize page
2. Open Home › Before Main Collection panel
3. Select Show Instagram box
4. Publish

Before Footer

To display the Instagram posts before the footer, please follow these steps:

1. Go to WordPress Admin › Appearance › Customize page
2. Open Footer › Modules panel
3. Select Show Instagram box
4. Adjust display settings: color scheme and background
5. Select Instagram - single row box if you prefer to display only one line of posts
6. Publish

Cache

Recommended setup

The cache time should be always set to value greater that 0 (default value is 120) to minimize the number of queries sent to the Instagram servers. When results are cached, a page loading time is not affected by the time the widget has to wait for Instagram to respond.

Disable cache

In some cases, it is useful to disable the cache. When something goes wrong and results are not loaded or are wrong, you may want to disable it and force to fetch data from Instagram again. To disable the cache, set its time to 0 in the WordPress Admin › Settings › G1 Socials › Instagram page. Remember to restore the value after testing.