Setup Instagram

Overview

The influence of social networks has become so big nowadays and has spread all over. Like its peers Facebook and Twitter; Instagram is growing popularity at the rate of knots. Instagram recorded 111 million active users in 2019, and with such a large user base, Instagram becomes the ideal platform for businesses to connect with their customers.

Purpose

At OnPrintShop, you can integrate Instagram services in the Designer Studio. This will allow your customers to use their Instagram images in their product designs and more.

How to integrate:

Follow the step-by-step guide to understand the integration of Instagram on OnPrintShop.

1. Create a Facebook App

Go to developers.facebook.com, click My Apps, and create a new app. Once you have created the app follow the steps given here to complete Facebook Integration. In the App Dashboard, navigate to the Settings >> Basic, scroll to the bottom of the page and click on the Add Platform. Choose Website, add your website’s URL, and save your changes.

You can also use the application created for Facebook login and follow from step – 2:



Otherwise, you can use any other app created for Facebook Login or Facebook User Images.

2. Configure Instagram Basic Display

Click on the Add Products, locate the Instagram Basic Display product and click on the Set Up button to add it to your app:



Note: If you are not able to find the Instagram Basic Display application then on the Products Page, scroll below where you’ll find the Looking for Additional Products and Permissions box:



Here, click on the Remove App Type button.

In the next dialog box, tick the valid options. This will help Facebook improve and tell them why you are looking to switch apps:



Click on the Save.

In the next dialog box, enter your account password and click on Submit.

Now, you’ll be able to see the Instagram Basic Display application in the list.

In the form that appears, complete each section using the guidelines below:



• Display Name - Enter the name of the Facebook app you just created.
• Valid OAuth Redirect URIs - Enter your website’s URL. Normally this would be a dedicated URI that can capture redirect query string parameters, but for this tutorial, your website’s URL will be fine. For example https://yourdomainname.com/studio/Services/images.php After you enter a URL, save your changes and check the URL again; we may have appended a trailing forward slash depending on your URL structure. Copy the complete URL somewhere since you will need it in later steps to get authorization codes and access tokens.
• Deauthorize Callback URL - Enter your website’s URL again. Eventually, you will have to change this to a URL that can handle deauthorization notifications, but for this tutorial, you can re-use your website URL.
• Data Deletion Request Callback URL - Enter your website’s URL once again. Just like the Deauthorize Callback URL, you will eventually have to change this to a URL that can handle data deletion requests, but for now, you can re-use your website URL.

3. Add an Instagram Test User

Scroll down to the Instagram Testers section, click Add Instagram Testers and enter your Instagram account’s username and send the invitation:



To activate the test user

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

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

4. Add a Test User for Facebook

During the business verification, one would require to submit the Facebook credentials using which the Facebook authorizers can verify your application.

For this process, create a Test User account of Facebook, as this will save your account privacy:



• To create a Test User for Facebook, go to the Roles >> Test user.
• Here, click on the Add button.
• Next, click on the Create Test User button.
• This will add a new test user. Next, click on the Edit button of the newly added test button and choose ‘Change the name and password for this test user:



• Here, enter the new password and click on the same.

5. Admin Panel Configuration

To configure the Instagram details copied in step 2 go to the Admin >> Admin >> Store Configuration >> External Service Settings >> Social Sharing tab >> Instagram v2:



• Enter the Client ID and Client Secret key, and click on the Save.
• Now, you can use your test account defined in step-3 to check the functionality. However, you will have to enable the Live Mode of your app to let your customers use the facility.

6. Create Screencast

Log out of your previous sessions (of Facebook and Instagram) running on your print website and start afresh.

To create a screencast, use your Instagram Test Account added in Step 3, and Facebook Developers account. Record a video or screencast which shows the following:

• Open your store i.e. print website.
• Navigate to any product in your store.
• Click on the Custom Design. This will lead you to the designer studio.
• On the designer studio, click on Images.
• In the Images pop-up, click on the Instagram v2 button
• Login with Facebook into your Instagram account. (Make sure your Instagram and Facebook accounts are linked.):



• This will connect with your Instagram Account.
• After a successful connection, all the Images from your account will appear.
• Use any image to complete a design.
• Click on save and continue to the Additional Information page or Cart page.
• Login into your website with your credentials.
• Complete the order.
• Complete the video screencast and save.

Save this video, as we’ll need to upload this screencast in the app review process for the Facebook officials to verify the in-app review and other details.

7. Enable the Live Mode

Now, to get access to users’ Instagram photos, your web store has to fulfill all the Facebook guidelines and criteria. (continue after step 4)

Instagram Basic

• To get Instagram reviews, go to the App Review >> Permissions and Features:



• Search instagram_basic. This will allow your application to read customers’ account profile information and media.
• Click on the request then, on the Continue.
• Here, one needs to enter the review permission details for the application to be verified.

Business Verification

• Before that make sure to get the Business Verification in addition to the App Review before you access the data. Click go to verification or follow the steps given here.

Submission Guidelines

• Also, it is advisable to read all the guidelines beforehand. It will provide you with an extra base before submitting the request. Read guidelines such as App Review Process, Sample App Review Submissions, and Common Rejection Reasons.

Verification Details

• Click on the Complete App Verification. Now in the App Verification Details pop-up, choose Yes for the Facebook authentication solution. This will help the Facebook review team to log in and verify your application.
• In the text area given, provide detailed step-by-step instructions on how a reviewer can test your integration and how you are using the requested permissions or features. Here, you need to add the Facebook Test Account details (created in Step 4).
• Also, provide login details for your website which the reviewer can use to start the session into your website (or provide an instruction to create an account).

Sample Content

Requesting Permission and Features

• In the Tell Us Why Are You Requesting instagram_basic pop-up provide a detailed description of how your app uses the permission or feature requested, how it adds value for a person using your app, and why it's necessary for app functionality.

Sample Content

• Next, upload a screencast created a video walkthrough of how your app will use this permission or feature i.e. the video created in Step -6.
• Now, submit the application for review.

Page Read Engagement

• To get Instagram reviews, go to App Review >> Permissions and Features:



• Search pages_read_engagement.
• This will allow your application to read customers’ account profile information and media.
• Click on the request and then, on the Continue.
• Here, one needs to enter the review permission details for the application to be verified.
• Same as the instagram_basic read the guidelines and provide the verification details.
• You can use the sample data provided after making the necessary changes.
• Also, you can use the same screencast uploaded for instagram_basic.

Graph User Profile and Graph User Media

You’ll have to submit your application for app review and your app needs to be approved for instagram_graph_user_profile and instagram_graph_user_media. During the verification process, Facebook will verify how your web store will use the user's Instagram photos, i.e. what is the actual purpose of integrating the Instagram application. For this on the left panel go to, Instagram Basic Display >> Basic Display >> App Review for Instagram Basic Display section:



Click on Add to Submission for Instagram_graph_user_media and Instagram_graph_user_profile. Later, click on the Edit Details:



For instagram_graph_user_profile and instagram_graph_user_media you’ll get a pop-up where you have to enter how you’re using the permission and upload the screencast. You can use the sample data provided above with the necessary changes:



When you click on the Edit Details of App Verification, the following pop-up gets open:



• Under the Test, the User searches the name of the Facebook test user created in Step 4.
• In the Testing Credentials, provide a Test credential such as username and password that any Facebook reviewer can use to log into your app while testing.
• Confirm that you’ve completed the required steps and click on the Save.

After the successful verification process, your customers will be able to use their Instagram photos in the designer studio.