Create your own Facebook OAuth application to Connect to Filestack

By default, you do not need to configure anything to start uploading files from Facebook, Filestack is ready to go out of the box. When a user logs into their Facebook account from your site, the Filestack company application will show up. You can configure it so that your application shows up instead in order to make a more seamless experience for your customers. This is also a MUST if you are using a CNAME account. If this step is not completed prior to using CNAME in a production environment, your users will not be able to access Facebook. Let's get started!

  1. Go to Facebook for Developers Page and click the green Add a New App button. Then click advanced setup and enter an application name and select a category, then click Create App ID and fill out the captcha to create the app.

    Screenshot showing Create a New App Id step in Facebook for Developers

  2. From the dashboard, go to the settings tab and fill out your application name and email address. You'll also need to enter a privacy policy (we use www.filestack.com/privacy) and select the category for the use of your application then click "save changes".

    Screenshot showing App details step in Facebook for Developers

  3. Under the Advanced setting tab find the section labeled Domain Manager. Add https://www.filestackapi.com/ to the listed domains. Select Exact Match.

    Screenshot showing Add a Domain step in Facebook for Developers

  4. On the App Review page set the app to live and choose the category that your application fits into.

    Screenshot showing App Review step in Facebook for Developers

  5. Select "Start a Submission" and add user_photos as the item you wish to include in your submission.

    Screenshot showing Submission step in Facebook for Developers

  6. If asked to submit a video of your application, a screencast of the picker in action should suffice. Here is one that we have used.

  7. You will receive a Facebook Notification and email that your app has been reviewed and approved.

  8. After you receive approval you'll need to get your App ID and App Secret.

    Screenshot showing Dashboard in Facebook for Developers

    Then enter them into your Filestack Developer Portal.

    Screenshot showing Filestack Developer Portal

  9. Test your Facebook implementation by launching the filestack dialog and connecting to Facebook

Facebook is a default source, but if you are overwriting the default sources you will need to add facebook in the fromSources parameter.

client.pick({
  fromSources: ['facebook'],
}).then(result => {
  console.log(JSON.stringify(result.filesUploaded))
})

Remember that if at any point you have difficulties, we welcome questions at support@filestack.com