Jump to: navigation, search

Setup Instagram

Instagram Integration

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 your customers.

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. Follow the step-by-step guide to understand the integration of Instagram on OnPrintShop.

Note – The Facebook login feature should work on your website while you configure Instagram into your website.

Step 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 Settings > Basic, scroll the bottom of the page and click 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.

Setup Instagram2.png

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

Step 2: Configure Instagram Basic Display

Click Products, locate the Instagram Basic Display product and click Set Up to add it to your app.

Instagram18.png

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.

InstagramUpdate20.png

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 Save.

InstagramUpdate21.png

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.

Setup Instagram3.png

  • 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.

Step 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.

Setup Instagram4.png

To activate the test user

Open a new web browser and go to www.instagram.com and sign in to your Instagram account that you just invited. Navigate to0 (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.

Step 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 – Roles >> Test user.
  • Here, click on the Add button.
  • Next, click on the Create Test User button.
  • Instagram10.png

  • 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.
  • Instagram11.png

Note – For future references please save the email id and password of this Facebook Test User.

Step 5: Configuration into OnPrintShop Admin Panel

To configure the Instagram details copied in step 2 go to,

Admin >> Admin >> Store Configuration >> External Service Settings >> Social Sharing tab >> Instagram v2

  • Enter the Client ID and Client Secret key, and click on Save.
  • Now, you can use your test account defined in the 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.

Setup Instagram7.png

Step 6: Create Screencast

Logout 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 ‘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.)

    Instagram12.png

    • 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.

Step 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

Instagram13.png

  • To get Instagram reviews, go to App Review >> Permissions and Features
  • Search instagram_basic. This will allow your application to read customers’ account profile information and media.
  • Click request, then 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

Verification Details

  • Click on Complete App Verification. Now in the App Verification Details pop-up choose Yes for 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

Test Account Username - xfrxrfeiyy_1591023474@tfbnw.net

Test account password - cmyk@123

Steps to verify Instagram_Basic

1. Go to <your website domain>

2. Choose any product.

3. Click 'Get Started' >> 'Custom Design'

4. This will redirect you to the OnPrintShop's Designer studio

5. Go to Images Tab (Left-Panel) >> Image Gallery

6. Click on "Instagram v2" button

7. Click 'Connect'

8. Click 'Login with Facebook' having an Instagram account or using Instagram Credentials.

9. The images associated with Instagram will load into the studio.

10. Select an image to complete the design and continue.

11. Login as a customer using credentials – xyz@gmail.com and password – abcd13.

12. Complete the order.

Note: If there are no images in the Instagram account then the system will show a 'No Images Found' message.

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

    OnPrintShop printing is a printing solution provider that provides A to Z custom solutions for printing business.

    It includes some of the major printing products like (banners, posters, wallpaper, Digital printing, Mug, T-shirts, etc.)

    We have created this application for "https://www.onprintshop.com/" website and use of this application to our end users can connect their Instagram account and use Instagram images for printing purposes.

    We have mentioned scope step by step in Screencast video for https://www.onprintshop.com/.

    We have created a video using our website "https://www.onprintshop.com/".

  • Next, upload 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

Instagram14.png

  • 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 request, then 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

Setup Instagram5.png

Click on ‘Add to Submission’ for Instagram_graph_user_media and Instagram_graph_user_profile. Later, click on Edit Details.

Instagram15.png

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.

Instagram16.png

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

Instagram17.png

  • 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 Save.

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

Note – If you face any issue in the verification process, then connect with the OnPrintShop technical team.