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.

Setup

To display your Instragram posts on your site, you have to create an Instragram application and connect it with the site. You can use existing application is you already have it e.g. for the social login. To connect Instagram with your site, please follow these steps:

  1. Go to https://www.instagram.com/developer/
  2. Click Register Your Application button
  3. On the next screen, click Register a New Client button
  4. Fill in:
    • Application Name
    • Description
    • Company Name
    • Website URL. It's your site's URL
    • Valid Redirect URIs. Read below from where you can get it
    • Privacy Policy URL. Has to be valid page with text
    • Contact Email
  5. Click Register

Instagram Setup - Step 1

  1. To get Valid Redirect URI, please return back to your site and go to WP admin panel › Settings › G1 Socials › Instagram page
  2. Next to Client ID field, click Where do I get this info? link
  3. You should see Valid Redirect URI
  4. Copy the URL and enter it in the Instagram application Valid Redirect URIs field (sceen above)

Instagram Setup - Step 2

  1. Once the client is created, click Manage right next to it

Instagram Setup - Step 3

  1. Switch to Security tab
  2. Uncheck Disable implicit OAuth box
  3. Click Update Client button to save changes

Instagram Setup - Step 4

  1. Copy Client ID

Instagram Setup - Step 5

  1. Go back to WP admin panel › Settings › G1 Socials › Instagram page and paste the Client ID
  2. Save changes
  3. You should now see some additional fields (screen below)

Instagram Setup - Step 6

  1. Click Get token button
  2. If you are not logged in on to your Instagram account, you will be asked to log in
  3. Then, Instagram will ask you to Authorize access your newly created application as it's in SANDBOX mode. Don't worry. We need the application only to get the access token so it can be in SANDBOX mode
  4. 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

Instagram Setup - Step 7

  1. Below Access Token completed field, you should see information what account the token is associated with
  2. Posts in all display locations (read below) will be from that account only

Display

You can display Instagram posts in these locations:

  • Sidebar
  • Before Main Collection
  • Before Footer

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

Instagram Widget

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

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

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.