Simple:Press Documentation

Instagram

Introduction

The Instagram component allows users to connect to their IG account and display the latest photos in their user profile.  Up to 18 photos can be displayed.

Features

  • Users can connect to one of their IG accounts
  • Up to 18 photos can be displayed in a 3 x 2 grid
  • The grid has left and right control buttons
  • Each photo will display in a light-box popup when click upon
  • A button below the photo-grid will take the viewer to the users IG account.

Setup

Before you can set up the Instagram features in the plugin, you need to create an Instagram APP in your Instagram account.

Create An Instagram Application

  • Go to the Instagram developer site: https://instagram.com/developer/
  • Click the Manage Clients link in the header menu and login to your account.
  • After logging in, click the Register Your Application button
  • Fill out the fields required and save the form.
  • You will then have the option to Register A New Client.  If you do not see this option, just click Manage Clients again at the top of the screen.  You should then see the Register A New Client button.

  • You will be taken to the Register a new client page that looks something like this:

  • On this form you should do the following:
    1. Provide the name and a short description of your application.  Something like “SPMM Integration” could be used for the name and “Connect SPMM with Instagram” for the description.
    2. Provide your company name.  If you don’t have a company name you can use your own name.
    3. In the Website URL field, you need to provide your website url along with an additional string on the end.  The full string should look like this: http://www.exampledomain.com/?um-connect-instagram=true
    4. In the Valid Redirect URIs field, you need to provide your website url along with an additional string on the end.  The full string should look like this: http://www.exampledomain.com/?um-connect-instagram=true. You can also enter a string that looks like this: http://www.exampledomain.com/page-url/?um-connect-instagram=true which will return the user to the specified ‘page-url’ on your site.
    5. Enter the URL for your privacy policy and your email address
    6. Click the Register button.

Get Your Instagram Application Credentials

  • Click the Manage Clients link at the top of the screen again
  • On the entry for your new application, click the MANGE button

  • Make a note of the CLIENT ID and CLIENT SECRET – you will need this to set up the plugin.

Provide The Instagram Credentials To The Plugin

  • Go to MEMBER MANAGER->SETTINGS->COMPONENTS
  • Click the checkbox for the Simple:Press Member Manager – Instagram item and then the Save Changes button
  • Go to MEMBER MANAGER->SETTINGS->COMPONENT SETTINGS->INSTAGRAM
  • Turn on the Enable Instagram Photos checkbox and then fill in the Client ID and Client Secret you recorded earlier
  • Click the Save Changes Button

Use The Instagram Features

Once you have configured your Instagram Plugin as explained above, you can go to Member Manager->Forms to add the Instagram features to your forms:

  • Go To MEMBER MANAGER->FORMS
  • Click on any form – we recommend the user profile form.  Use the  “Default Profile” form if you have not yet set up any additional forms.
  • Click on the GRAY PLUS sign to add a field in any row.

  • In the pop-up window click the INSTAGRAM PHOTOS button.

  • Fill in the form that pops up and then click the ADD button.

  • Your Instagram photos field is now added to the Profile Form.  Don’t forget to save that form as well!

The End-User Front-End Experience

When the user on the front-end accesses your form with the IG Photo field, they will see an option that says “Connect To Instagram”.

When the user clicks that button, they will be taken to the Instagram login page where they can login and then confirm permissions to be granted to the plugin.

After confirmation, they will be returned to your site where they will need to navigate back to the page to complete the set up process.

Note: Having to navigate back to the page is likely going to cause some confusion for your users to be prepared to answer some questions about that process.  You might want to make a video illustrating the process on your site and add a link to the video on your form.