Integration with Facebook and Instagram

Integration with Facebook or Instagram allows your clients to use their Facebook or Instagram photos in customized products. To integrate Customer's Canvas with Facebook you should create a Facebook app and paste its ID as a value of the facebook parameter in ~\Configuration\clientConfig.json or use the IConfiguration interface to set the parameter on a product level. Integration with Instagram is enabled the same way. When integration is successfull you will see the additional tabs in the image gallery, as follows:

Click Manage Clients in Instagram.

This topic contains two sections, Facebook and Instagram, that describes how to create apps in Facebook and Instagram respectively.

Facebook

  1. Open Facebook Developers in a browser.
  2. Log in to Facebook with your developer account.
  3. Click My Apps, then click Add a New App.

    Adding a New App in Facebook.

  4. Choose type of the application, website.

    Choosing type of the application.

  5. Enter application name and click Create New Facebook App Id.

    Creating New Facebook App Id.

  6. Choose Photo as the application Category (categories are sorted in alphabetical order) and click Create App ID.

    Choose application Category.

  7. At the end of the page enter the URL of your website, and click Next.

    Entering Site URL.

  8. Click the Skip to Developer Dashboard link.

    Skip to Developer Dashboard.

  9. Copy the App ID and paste it to ~\Configuration\clientConfig.json as a value of the facebook parameter.

    App ID in Facebook.

  10. Any Facebook app should go through review before it is made available to Facebook users. Before submitting your app to be reviewed, you need to provide the necessary information about the app. Go to App Details and fill out the following fields:

    App Details in Facebook.

  11. Choose your Primary Language and enter the Long Description of your app. Long description is the explanation of what your app does and why you need the functionality that you are sending through to review.

    Choosing Primary Language and entering the Long Description.

  12. Enter an accessible website URL that hosts your privacy policy

    Entering Privacy Policy URL.

  13. Upload your app logo, 1024 x 1024 high-resolution image.

    Uploading logo.

  14. At the end of the page click the Save Changes button

    Saving changes.

  15. Your app needs to access users photos. For this you need to get user_photos permission.
  16. Go to Status & Review and click Start a Submission.

    Go to Status and Review.

  17. Check user_photos and click Add 1 item.

    Add user_photos permission.

  18. Click Add Notes.

    Click Add Notes.

  19. Select the product personalization option, turn on Web platform, add detailed instructions for how to test the application, and click Save.

    user_photos notes.

  20. Upload required screenshots

    Required screenshots.

  21. Fill the Facebook Login Integration field.

    Facebook Login Integration.

  22. Login to Facebook through Customer's Canvas.

    Log in to Facebook from Customer's Canvas.

  23. Confirm that you have tested your app and click Submit for Review.

    Submit your Facebook app for review.

  24. Enter and verify your phone number and click Confirm.

    Verify your phone number.

  25. Note

    For more information about Facebook reviewing apps, please, see Facebook Review Guidelines.

Instagram

  1. Open Instagram for Developers in a browser.
  2. Log in to Instagram with your developer account.
  3. Click Register Your Application.

    Instagram Register Application.

  4. If you have not signed up as a developer you will be asked to fill out the following form. After form is filled click Sign Up.

    Developer Signup.

  5. Click Manage Clients.

    Click Manage Clients in Instagram.

  6. Click Register a New Client.

    Register Client.

  7. Fill out the form and click Register.
  8. The Redirect URI is formed by adding Resources/SPEditor/Pages/SocialNetworkRedirect.html to the domain name where you get Customer's Canvas deployed. For example, if you IFrame API script has the following URL:
    http://example.com/Resources/SPEditor/Scripts/IFrame/IframeApi.js
    then your Redirect URI is
    http://example.com/Resources/SPEditor/Pages/SocialNetworkRedirect.html.
    If you use the hosted version of Customer's Canvas, then your Redirect URI is like follows:
    http://h.customerscanvas.com/Users/xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx/SimplePolygraphy/Resources/SPEditor/Pages/SocialNetworkRedirect.html
    where xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx is the unique identifier of your Customer's Canvas instance.
  9. Uncheck Disable implicit OAuth.
  10. Fill the form and click Register.

  11. After the application is registered successfully, copy the CLIENT ID to the ~\Configuration\clientConfig.json as a value of the instagram parameter.

See Also

Other