--- title: "Integration with Facebook and Instagram" canonical: https://customerscanvas.com/docs/cc4/integration-with-facebook-and-instagram.htm archived: true applies_to: - product: "Customer's Canvas On-Premises" - product: "Design Editor" versions: ["4.4.25", "4.x (may differ)"] --- **You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/). # Integration with Facebook and Instagram **Applies to:** Customer's Canvas On-Premises; Design Editor 4.4.25, 4.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 integrate Customer's Canvas with Facebook, you should create a Facebook app and paste its ID as a value of the **appKey** property of the **facebook** tab in `~\Configuration\clientConfig.json` or use the [IConfiguration](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.configuration.iconfiguration.htm.md) interface to set up this tab for a single product. Integration with Instagram is enabled in the same way. When integration is successful, you can see the additional tabs in the Image Gallery, as follows: ![The Facebook and Instagram tabs in the Customer's Canvas gallery.](https://customerscanvas.com/docs/cc4/images/FacebookInstagramTabs.png) The Facebook and Instagram sections of this topic describe how you can create apps in Facebook and Instagram respectively. Also, you can find details on how to set up gallery tabs for these social networking services. ## Facebook 1. Open [Facebook Developers](https://developers.facebook.com/products/) in a browser. 2. Log in to Facebook with your developer account. 3. Point to **My Apps**, then click **Add a New App**. ![Adding a New App in Facebook.](https://customerscanvas.com/docs/cc4/images/FacebookNewApp.png) 4. Choose the type of application, **website**. ![Choosing type of the application.](https://customerscanvas.com/docs/cc4/images/FacebookChooseType.png) 5. Enter an application name and click **Create New Facebook App Id**. ![Creating New Facebook App Id.](https://customerscanvas.com/docs/cc4/images/FacebookCreateAppId.png) 6. Choose **Photo** as the application **Category** (categories are sorted in alphabetical order) and click **Create App ID**. ![Choose application Category.](https://customerscanvas.com/docs/cc4/images/FacebookChooseCategory.png) 7. At the end of the page, enter the URL of your website, and click **Next**. ![Entering Site URL.](https://customerscanvas.com/docs/cc4/images/FacebookEnterUrl.png) 8. Click the **Skip to Developer Dashboard** link. ![Skip to Developer Dashboard.](https://customerscanvas.com/docs/cc4/images/FacebookSkipQuickStart.png) 9. Copy the App ID and paste it into `clientConfig.json` as a value of the **appKey** property of the **facebook** tab. ![App ID in Facebook.](https://customerscanvas.com/docs/cc4/images/FacebookAppId.png) 10. Add your redirect links to the **Valid OAuth redirect URIs** list. 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 your 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 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/cc4/images/FacebookOAuth.png) 11. 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.](https://customerscanvas.com/docs/cc4/images/FacebookAppDetails.png) 1. Choose your **Primary Language** and enter the **Long Description** of your app. The 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.](https://customerscanvas.com/docs/cc4/images/FacebookAddDescription.png) 2. Enter an accessible website URL that hosts your privacy policy. ![Entering Privacy Policy URL.](https://customerscanvas.com/docs/cc4/images/FacebookAddPolicy.png) 3. Upload your app logo, a 1024 x 1024 high-resolution image. ![Uploading logo.](https://customerscanvas.com/docs/cc4/images/FacebookAddLogo.png) 4. At the end of the page, click the **Save Changes** button. ![Saving changes.](https://customerscanvas.com/docs/cc4/images/FacebookSaveChanges.png) 12. Your app needs to access users photos. For this, you need to get the **user\_photos** permission. 1. Go to **Status & Review** and click **Start a Submission**. ![Go to Status and Review.](https://customerscanvas.com/docs/cc4/images/FacebookStatusAndReview.png) 2. Check **user\_photos** and click **Add 1 item**. ![Add user_photos permission.](https://customerscanvas.com/docs/cc4/images/FacebookUserPhotos.png) 3. Click **Add Notes**. ![Click Add Notes.](https://customerscanvas.com/docs/cc4/images/FacebookAddNotes.png) 4. Select the product personalization option, turn on the **Web** platform, add detailed instructions for how to test the application, and click **Save**. ![user_photos notes.](https://customerscanvas.com/docs/cc4/images/FacebookFillNotes.png) 5. Upload the required screenshots. ![Required screenshots.](https://customerscanvas.com/docs/cc4/images/FacebookRequiredScreenshots.png) 13. Fill in the **Facebook Login Integration** field. ![Facebook Login Integration.](https://customerscanvas.com/docs/cc4/images/FacebookLoginIntegration.png) 14. Log in to Facebook through Customer's Canvas. ![Log in to Facebook from Customer's Canvas.](https://customerscanvas.com/docs/cc4/images/FacebookLogInFromCC.png) 15. Confirm that you have tested your app and click **Submit for Review**. ![Submit your Facebook app for review.](https://customerscanvas.com/docs/cc4/images/FacebookSubmit.png) 16. Enter and verify your phone number, then click **Confirm**. ![Verify your phone number.](https://customerscanvas.com/docs/cc4/images/FacebookVerification.png) **Note** For more information about Facebook reviewing apps, please, see [Facebook Review Guidelines](https://developers.facebook.com/docs/apps/review). ## Instagram 1. Open [Instagram for Developers](https://instagram.com/developer/) in a browser. 2. Log in to Instagram with your developer account. 3. Click **Register Your Application**. ![Instagram Register Application.](https://customerscanvas.com/docs/cc4/images/InstagramRegisterApplication.png) 4. If you have not signed up as a developer, you will be asked to fill out the following form. After the form is filled in, click **Sign Up**. ![Developer Signup.](https://customerscanvas.com/docs/cc4/images/InstagramDeveloperSignup.png) 5. Click **Manage Clients**. ![Click Manage Clients in Instagram.](https://customerscanvas.com/docs/cc4/images/InstagramManageClients.png) 6. Click **Register a New Client**. ![Register Client.](https://customerscanvas.com/docs/cc4/images/InstagramRegisterClient.png) 7. Fill out the form and click **Register**. 1. 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 your 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 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. 2. Uncheck **Disable implicit OAuth**. ![Fill the form and click Register.](https://customerscanvas.com/docs/cc4/images/InstagramRegisterNewClientId.png) 8. After the application is registered successfully, copy the **Client ID** to the `clientConfig.json` file as a value of the **appKey** property of the **instagram** tab. ## Setting Up Tabs in the Image Gallery To configure the **Image Gallery**: 1. Open the `~\Configuration\clientConfig.json` file and find the definition of **tabs** in the **GalleryDialog** object. This **tabs** array defines all tabs, which **Gallery** contains. 2. Set the Facebook App ID and Instagram Client ID to the **appKey** properties of the **facebook** and **instagram** tabs. The definition may look as follows: ``` { "widgets": { "GalleryDialog": { "defaultTabName": "Public files", // The array of gallery tabs "tabs": [ { "name": "User files", "type": "user", "translationKey": "GalleryDialog.TAB_USER", "canEdit": true, "canUpload": true }, { "name": "Public files", "type": "public", "subFolderName": "", "translationKey": "GalleryDialog.TAB_PUBLIC", "canEdit": false }, { "name": "Facebook", "type": "facebook", "canEdit": true, // The Facebook App ID "appKey": "123456789012345" }, { "name": "Instagram", "type": "instagram", "canEdit": true, // The Instagram Client ID "appKey": "123456789012345" } ] } } } ``` ## See Also ### Manual - [Using the Image Gallery](https://customerscanvas.com/docs/cc4/using-image-gallery.htm.md) ### Other - [Facebook Review Guidelines](https://developers.facebook.com/docs/apps/review)