---
title: "Facebook | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/asset-sources/facebook/"
---

# Facebook

> You can allow your clients to use their Facebook photos in customized print products. To enable this asset source in Customer's Canvas, you need to create a Facebook app and add **Facebook Login** to this app. After this product has been set up in your Facebook developer account, you can use the _Facebook App ID_ in **~\Configuration\clientConfig.json**. When integration is successful, you can see the corresponding tab in the Asset Manager:

![The Facebook and Instagram tabs in the Asset Manager.](images/FacebookInstagramTabs.png)

This topic describes how you can create a Facebook app and set up the Facebook product in this app. Also, you can find details on how to [submit a Facebook App for review](#general-review).

You can learn how to set up the Instagram product in your Facebook app in the [corresponding topic](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/asset-sources/instagram.md).

## 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.  Hover over **My Apps**, then click **Create App**.

    ![Creating an app in Facebook.](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.](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.](images/FacebookLogin.png)

7.  Select **Web** as the platform for the app.

    ![Selecting a platform.](images/FacebookPlatform.png)

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

    ![Entering Site URL.](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 deploy the Design Editor. For example:  
    http://example.com/Resources/SPEditor/Pages/SocialNetworkRedirect.html  
    If you use the cloud version of Design Editor, then your **Redirect URI** is as follows:  
    `https://portal.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 Design Editor instance.

    ![Facebook OAuth redirect list.](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.](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.](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](#general-review). To [define an asset source](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/image-manager.md) in the Asset Manager, you can use your `App ID` as a value of the `appKey` property.

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

### General Review

To get access to Facebook user photos, you must go through the general app review and 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.](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.](images/FacebookReviewRequest.png)

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

        ![Facebook verification details.](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.](images/FacebookScreencast.png)

3.  Click **Submit for Review**.