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 note the facebook login feature should work on your website while you configure instagram into your website 1 create a facebook app 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 setup facebook docid\ svi ohkqhcfepebxwmwit 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 setup facebook docid\ svi ohkqhcfepebxwmwit or setup facebook user photos docid 5nvcqtpua5cvu mub ckt 2 configure instagram basic display 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 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 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 https //developers facebook com/docs/apps/test users/ , 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 note for future references please save the email id and password of this facebook test user 5 admin panel configuration 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 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 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 https //developers facebook com/docs/apps/review/#business verification 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 https //developers facebook com/docs/apps/review/ , sample app review submissions https //developers facebook com/docs/apps/review/sample submissions/ , and common rejection reasons https //developers facebook com/docs/apps/review/sample submissions/ 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 test account details 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 on the get started >> custom design 4 this will redirect you to the onprintshop's designer studio 5 go to the images tab (left panel) >> image gallery 6 click on instagram v2 button 7 click on the 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 log in 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, mugs, t shirts, etc ) we have created this application for the " https //www onprintshop com/ https //www onprintshop com/ " website and use 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 the screencast video for https //www onprintshop com/ https //www onprintshop com/ we have created a video using our website " https //www onprintshop com/ https //www onprintshop com/ " 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 note if you face any issue in the verification process, then connect with the onprintshop technical team