Integration with Facebook and Instagram

Facebook

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

   

4. Choose the type of application, website.

   

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

   

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

   

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

   

8. Click the Skip to Developer Dashboard link.

   

9. Copy the App ID and paste it into clientConfig.json as a value of the appKey property of the facebook tab.

   

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.

    

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:

    

    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.

       

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

       

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

       

    4. At the end of the page, click the Save Changes button.

       

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.

       

    2. Check user_photos and click Add 1 item.

       

    3. Click Add Notes.

       

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

       

    5. Upload the required screenshots.

       

13. Fill in the Facebook Login Integration field.

    

14. Log in to Facebook through Customer's Canvas.

    

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

    

16. Enter and verify your phone number, then click Confirm.

    

Instagram

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

   

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.

   

5. Click Manage Clients.

   

6. Click Register a New Client.

   

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.

   

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:
   clientConfig.json

   { 
     "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

Other

• Facebook Review Guidelines