Facebook Integration

Uploads from the Facebook API support the following types of files:

Only image files are selectable.

Section Quick Jump:

API OAUTH Webhooks


Using the Facebook API

  1. User selects Facebook from services list
  2. user authenticates connection by logging into Facebook account
  3. user is connected and can select files from Facebook in Filestack dialog

Facebook api upload widget

Upload from Facebook

Uploading or "picking" a file from Facebook in the context of Filestack means choosing a file and creating a distributable link to that file where it exists in Facebook. This is the Filestack URL that all "Pick" functions return. If you are using the pickAndStore method, then the file from Facebook is copied to a new storage location.

Sample Upload Code
filepicker.pick( { mimetypes: ['image/*'], services:['FACEBOOK'], }, function(Blob){ console.log(JSON.stringify(Blob)); } );

Download to Facebook

Exporting a file to Facebook in the context of Filestack means saving a file from a url or Filestack Blob object to Facebook and creating a distributable link to that file where it exists in Facebook. This is the Filestack URL that the "export" function returns.

Sample Export Code
filepicker.exportFile( 'https://www.filestackapi.com/api/file/qHi4LxRh28IeEBdJcFpw', { mimetype:'image/*', suggestedFilename: 'newFile', services: ['FACEBOOK'] }, function(Blob){ console.log(Blob.url); } );

Sample Image Conversion Code for Facebook

If you have a Filestack Blob object or Filestack URL, then you can use the Filestack REST or Javascript APIs to convert office documents and image files. In the sample code below we "pick" an image file from Facebook and use the Javascript API convert method to resize the image to 400w by 400h in pixels.

Sample Conversion Code
filepicker.pick( { services: ['FACEBOOK'], mimetype: 'image/*', }, function(pickedBlob){ console.log("Conversion in progress...") filepicker.convert( pickedBlob, { width: 400, height: 400, }, { location: 'S3' }, function(convertedBlob){ console.log("Converted file url: ", convertedBlob.url); console.log("File is stored under your S3: ", convertedBlob.key); filepicker.remove( pickedBlob, function(){ console.log("Removed"); } ); } ); } );

Combining Filestack Functions for Facebook

Now let's combine these methods and see what you can achieve with Filestack and Facebook! Here we pick an image from Facebook, crop and resize it, then save it back into Facebook.

Sample Multi-Function Code
filepicker.pick( { services: ['FACEBOOK'], mimetype: 'image/*', }, function (Blob) { filepicker.convert( Blob, { width: 300, height: 300, crop_first: true }, function (converted_Blob) { filepicker.exportFile(converted_Blob.url, { services: ['FACEBOOK'], mimetype: Blob.mimetype, suggestedFilename: 'converted_' + Blob.filename }, function (exported_Blob) { console.log('File successfully saved!'); }); }); });

Create your own Facebook OAuth application to Connect to Filestack:

By default, you do not need to configure anything to start uploading Facebook photos, 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. So let's get started.

This video walks through the steps listed below

  1. Go to https://developers.facebook.com/apps/ 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.
  2. Click the Add New App button
    Fill out the info and create the facebook application
  3. From the dashboard, go to the settings tab and fill out your email address and click save.
    enter your email under the settings tab
  4. Next go to the advanced tab and fill out the Valid OAuth redirect URI with https://www.filestackapi.com/api/client/facebook/authCallback/open then click save.
    enter the OAuth redirect URI on the advanced tab
  5. Next go to App Details and fill out the descriptions, contact info, and add an App Icon and then click save.
    fill out the app details page
  6. Now go to Status and Review and toggle the yes/no switch to make the app public. You can also submit your app for review if you want, but it isn't necessary.
    Make the app public or submit it for review
  7. Next go to the dashboard and copy the App ID and App Secret.
    copy the App ID and App Secret from the dashboard
  8. Go to the developer portal and click on Auth Keys, scroll down and enter the App Id in Facebook App Key and App Secret in Facebook App Secret and then click save.
    Add the facebook App ID and App Key into the Filestack developer portal
  9. Test to make sure you can connect to your Facebook app through Filestack.
    Make sure your Facebook application works

Congratulations! Your custom Facebook application is all set up for use with Filestack!

Facebook Webhooks for Your Application

Facebook Webhooks serve the purpose of notifying users about events that occur in relation to their Filestack account. In your developer portal, you can set one or many urls whose purpose is to receive the messages triggered by specific Filestack events.

These are the three event types that will send messages to your webhook url(s) concerning Facebook:

  • Facebook File Uploads
  • Facebook File Exports
  • Facebook File Conversions

Configuring Facebook Webhooks

Filestack Webhooks are configured in the developer portal under Credentials > Webhooks. If you enter your url and select "All", then one entry will be made for each type of Filestack Webhook Event, including the ones for Facebook. To learn more about configuring and receiving webhooks please visit our main webhooks documentation page.

Receiving a Facebook Webhook Notification

Configuring your server to receive a new webhook is the same as creating any page on your website. If you are using Sinatra, add a new route with the desired URL. In PHP you could create a new .php file on your server. It doesn't need to be complicated. With webhooks, your server is the server receiving the request. You can even use an external service such as RequestBin as shown in the screenshot above.

Webhook data is sent as JSON in the request's body. The full event details are included and can be used directly. The "action" in the JSON is the type of Filestack event that happened, be it a file being uploaded, or simply the Filestack dialog opening.

Filestack will retry sending a webhook 3 times if the first attempt fails. The second attempt to deliver a webhook happens 5 minutes after the first attempt, the third attempt happens after 1 hour, and the final attempt to deliver a webhook happens 12 hours after the first attempt.

Note that for file uploads, both symlinks and files copied with pickAndStore, the "client" field shows the service used.

For conversions, the "provider" shows where the file resides. If the file was stored to Filestack's storage, the provider will be "internal", otherwise it could be "amazon" if the original was stored to S3, or one of the cloud drives Filestack connects to, such as "Facebook" if the link to the file was a symlink.

The following are examples of what the Facebook specific webhook messages include and look like:

  1. File Upload (symlink):

  2. {  
       "action":"fp.upload",
       "timestamp":1443444905,
       "id":100946,
       "text":{  
          "url":"https://www.filestackapi.com/api/file/WAunDTTqQfCNWwUUyf6n",
          "client":"Facebook",
          "type":"image/jpeg",
          "filename":"1579337399020824.jpg",
          "size":139154
       }
    }

  3. File Upload (with store):

  4. {
       "action":"fp.upload",
       "timestamp":1443515345,
       "id":105258,
       "text":{
          "container":"kg_bucket",
          "url":"https://www.filestackapi.com/api/file/0CpUz9H4QfaX7LwwsgUf",
          "filename":"Cat_crying_Lolcat.jpg",
          "client":"Facebook",
          "key":"EqACdfNRmylz2h1SSYwT_Cat_crying_Lolcat.jpg",
          "type":"image/jpeg",
          "size":205354
       }
    }

  5. File Export (save to):

  6. {
      "action": "fp.export",
      "timestamp": 1444257665, 
      "id": 142447, 
      "text":{
        "source": "https://www.filestackapi.com/api/file/qHi4LxRh28IeEBdJcFpw",
        "client": "Facebook",
        "filename": "newFiletest.jpg",
        "created": "https://www.filestackapi.com/api/file/s40jJOQDGVr2T86cgOAe"
      }
    }
            

  7. File Conversion:

  8. {
       "action":"fp.converse",
       "timestamp":1435586806,
       "text":{
          "url":"https://www.filestackapi.com/api/file/uydUKAcTSsWB3g5HOsB4/convert?w=102",
          "link":{
             "writeable":true,
             "mimetype":"image/jpeg",
             "handle":"uydUKAcTSsWB3g5HOsB4",
             "url":"filepicker_upload_persist/pHSrbCRqSqeR1wh8USfY_1.jpeg",
             "created_at":"2015-06-29T13:31:02.204Z",
             "provider":"Facebook",
             "app_id":7876,
             "filename":"1.jpeg",
             "mongo_id":null,
             "_metadata":null,
             "access_tokens":[
    
             ],
             "is_folder":false,
             "persist":false,
             "user_id":null,
             "id":31968,
             "size":"111175"
          }
       },
       "id":109
    }