TrophyCustomer's Canvas is honored with a 2020 InterTech Technology Award! Learn more 

Facebook and Instagram

Integration with Facebook or Instagram allows your clients to use their Facebook or Instagram photos in customized print products.

To enable these asset sources in Customer's Canvas, you need to create a Facebook app and add Facebook Login and Instagram products to this app. After these products have been set up in your Facebook developer account, you can use the Facebook App ID and Instagram App ID in ~\Configuration\clientConfig.json. When integration is successful, you can see these tabs in the Asset Manager:

The Facebook and Instagram tabs in the Asset Manager.

This topic describes how you can create a Facebook app and set up both Facebook and Instagram products in this app. Also, you can find details on how to submit a Facebook App for review.

Creating a Facebook App

To enable an asset source with Facebook photos, create a Facebook App:

  1. Open Facebook for Developers in a browser.
  2. Log in to your Facebook account.
  3. Point to My Apps, then click Create App.

    Creating an app in Facebook.

  4. In the dialog box that appears, select the application type: For Everything Else.
  5. Type in your application name and contact email and click Create App ID.

    Creating an app ID.

  6. In the App Dashboard, scroll to the Add a Product section, find Facebook Login, and click Set Up.

    Adding the Facebook Login.

  7. Select Web as a platform for the app.

    Selecting a platform.

  8. Type in your Site URL, and click Save.

    Entering Site URL.

  9. In Settings of Facebook Login, specify your redirect link in Valid OAuth redirect URIs. 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:
    http://example.com/Resources/SPEditor/Pages/SocialNetworkRedirect.html
    If you use the cloud version of Customer's Canvas, then your Redirect URI is as follows:
    https://h2.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.

    Facebook OAuth redirect list.

  10. In the App Dashboard, click Settings > Basic and fill in the following fields:
    • Privacy Policy URL: https://customerscanvas.com/privacy-policy
    • App Icon
    • Category: Shopping
    • Business Use: Support my own business

    Facebook basic settings.

  11. Scroll to the bottom of the page, click Add Platform, and select Website.
  12. Type in your Site URL again and click Save Changes.

    Entering Site URL.

  13. In the Advanced settings, scroll to Share Redirect Whitelist and turn on Allow Cross Domain Share Redirect.

After this step, you can test your app before submitting it for review. To define an asset source in the Asset Manager, you can use your App ID as a value of the appKey property.

json
{
  "assetSources": {
    "[source]Facebook": {
      "type": "SocialNetworkSource",
      "network": "facebook",
      "apiKey": "3015301530153015"
    }
  },
  "widgets": {
    "Toolbox": { "buttons": [ "Image" ] }, 
    "AssetManager": {
      "tabs": [
        {
          "name": "Facebook",
          "assetSourceInstance": "[source]Facebook"
        }
      ]
    },
    ...
  }
}

Integration with Instagram

Before you start, you need:

Instagram Basic Display

To create the Instagram source in the Asset Manager, configure Instagram Basic Display:

  1. Open Facebook for Developers in a browser.
  2. Log in to your Facebook account.
  3. In the App Dashboard, scroll to the Add a Product section, find the Instagram product, and click Set Up.

    Adding the Facebook Login.

  4. Click Basic Display, scroll to the bottom of the page, then click Create New App.
  5. In the form that appears, enter the Display Name of the app.
  6. In Client OAuth Settings, specify your redirect link in Valid OAuth redirect URIs. The Redirect URI is formed by adding Resources/SPEditor/Pages/instagram-redirect.html to the domain name where you get Customer's Canvas deployed. For example:
    http://example.com/Resources/SPEditor/Pages/instagram-redirect.html
    If you use the cloud version of Customer's Canvas, then your Redirect URI is as follows:
    https://h2.customerscanvas.com/Users/xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx/SimplePolygraphy/Resources/SPEditor/Pages/instagram-redirect.html
    where xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx is the unique identifier of your Customer's Canvas instance.
  7. In Deauthorize Callback URL, specify your URL that handles deauthorization notifications.
  8. In Data Deletion Request URL, specify your URL that handles data deletion requests.
  9. Click Save Changes.

Testing the App

To test your app before the review and switching to the Live mode, you need to create an Instagram test user as follows:

  1. In the App Dashboard, click Roles > Roles, scroll to the Instagram Testers section, and click Add Instagram Testers.

    Adding Instagram testers.

  2. In the form that appears, enter your Instagram account's username and click Submit to send an invitation.
  3. Open www.instagram.com in a browser and sign into your Instagram account that you just invited.
  4. Navigate to Profile > Edit Profile > Apps and Websites > Tester Invites and click Accept.

    Accepting Instagram tester invites.

You can now test this app in Customer's Canvas. To enable the Instagram tab in the Asset Manager, copy your Instagram App ID from the Instagram product page and paste it into the clientConfig.json file as a value of the appKey property of the instagram asset source.

json
{
  "assetSources": {
    "[source]Instagram": {
      "type": "SocialNetworkSource",
      "network": "instagram",
      "apiKey": "123456789012345"
    }
  },
  "widgets": {
    "Toolbox": { "buttons": [ "Image" ] }, 
    "AssetManager": {
      "tabs": [
        {
          "name": "Instagram",
          "assetSourceInstance": "[source]Instagram"
        }
      ]
    }
  }
}

Not to compromise the Instagram App Secret, specify this value in ~\Configuration\AssetSourcesConfig.json as follows:

json
{
    "[source]Instagram": {
        "type": "SocialNetworkSource",
        "secret": "888a44444a222222222a3333a1111111"
    }
}

After you have tested the app, you can submit if for review.

Submitting the App for Review

Before you can switch your app to the live mode, you must go through app review:

  • General Review to get permission to read the photos a person has uploaded to Facebook.
  • Instagram Review to get permission to read an Instagram user's media.

General Review

To get access to Facebook user photos, you need to request the user_photos permission.

  1. In the App Dashboard, click App Review > Permissions and Features, scroll the list to user_photos, click Request, and then click Continue.

    Requesting the user_photos permission.

    Note

    The user_photos permission requires business verification.

  2. In the Request for App Review, provide verification details and describe how you'll use user_photos.

    Submitting a request for app review.

    • Provide detailed step-by-step instructions for using user photos and click Save.

      Facebook verification details.

    • Describe how you're using user photos and demonstrate it in a screencast, which must be uploaded, and then click Save.

      Facebook verification details.

  3. Click Submit for Review.

Instagram Review

The Instagram review is independent of the general app review and requires specialized review steps. To submit for a product review, you must begin your submission from within the Instagram tab.

To get access to Instagram user photos, you need to request the instagram_graph_user_media permission.

  1. In the App Dashboard, click Instagram > Basic Display, scroll to the section App Review for Instagram Basic Display.

    Requesting permissions for Instagram.

  2. For both instagram_graph_user_profile and instagram_graph_user_media, click Add to Submission and describe how you're using the permission and demonstrate it in a screencast.
  3. Click Submit for Review.

See Also

Manual

Other