---
title: "Facebook and Instagram"
canonical: https://customerscanvas.com/docs/cc6/integration-with-facebook-and-instagram.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["6.15.0", "6.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# Facebook and Instagram

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
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.](https://customerscanvas.com/docs/cc6/images/FacebookInstagramTabs.png)
 
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↗](https://developers.facebook.com/apps) in a browser.
2. Log in to your Facebook account.
3. Point to **My Apps**, then click **Create App**. 
    ![Creating an app in Facebook.](https://customerscanvas.com/docs/cc6/images/FacebookNewApp.png)
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.](https://customerscanvas.com/docs/cc6/images/FacebookCreateAppId.png)
6. In the App Dashboard, scroll to the **Add a Product** section, find **Facebook Login**, and click **Set Up**. 
    ![Adding the Facebook Login.](https://customerscanvas.com/docs/cc6/images/FacebookLogin.png)
7. Select **Web** as a platform for the app. 
    ![Selecting a platform.](https://customerscanvas.com/docs/cc6/images/FacebookPlatform.png)
8. Type in your **Site URL**, and click **Save**. 
    ![Entering Site URL.](https://customerscanvas.com/docs/cc6/images/FacebookEnterUrl.png)
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.](https://customerscanvas.com/docs/cc6/images/FacebookOAuth.png)
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.](https://customerscanvas.com/docs/cc6/images/FacebookBasicSettings.png)
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.](https://customerscanvas.com/docs/cc6/images/FacebookPlatformUrl.png)
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](https://customerscanvas.com/docs/cc6/asset-manager.htm.md) in the **Asset Manager**, you can use your **App ID** as a value of the **appKey** property.
 
```
{
  "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:
 
- [Facebook developer account.↗](https://developers.facebook.com/apps)
- Facebook app.
- [Instagram account with media.↗](https://www.instagram.com/)

### Instagram Basic Display
 
To create the Instagram source in the **Asset Manager**, configure Instagram Basic Display:
 
1. Open [Facebook for Developers↗](https://developers.facebook.com/apps) 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.](https://customerscanvas.com/docs/cc6/images/InstagramProduct.png)
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.](https://customerscanvas.com/docs/cc6/images/InstagramAddTester.png)
2. In the form that appears, enter your Instagram account's username and click **Submit** to send an invitation.
3. Open [www.instagram.com↗](https://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.](https://customerscanvas.com/docs/cc6/images/InstagramTesterInvites.png)

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.
 
```
{
  "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:
 
```
{
    "[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.](https://customerscanvas.com/docs/cc6/images/FacebookPermissions.png)
 
**Note** 
The **user\_photos** permission requires [business verification↗](https://developers.facebook.com/docs/apps/review/#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.](https://customerscanvas.com/docs/cc6/images/FacebookReviewRequest.png)

    - Provide detailed step-by-step instructions for using user photos and click **Save**. 
        ![Facebook verification details.](https://customerscanvas.com/docs/cc6/images/FacebookVerificationDetails.png)
    - Describe how you're using user photos and demonstrate it in a screencast, which must be uploaded, and then click **Save**. 
        ![Facebook verification details.](https://customerscanvas.com/docs/cc6/images/FacebookScreencast.png)
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.](https://customerscanvas.com/docs/cc6/images/InstagramPermissions.png)
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
 
- [The Asset Manager](https://customerscanvas.com/docs/cc6/asset-manager.htm.md)

### Other
 
- [Facebook Review Guidelines↗](https://developers.facebook.com/docs/apps/review)