Getting Started

Filestack Architecture

File Upload

File Export (Save To)

Responsive Images

Image Transformations

Document Transformations

Video Transcoding

Audio Transcoding





Filestack Viewer


Supported Cloud Drives

Filestack Recipes

Filestack Integrations

Filestack SDKs

Register for an API key

Facebook Integration

One of the biggest success stories in the last fifteen years, Facebook popularized the idea of the social network and was one of the frontruners in the web 2.0 movement. With over a billion active users Facebook is a powerhouse of user generated content. Grab all your favorite photos from your Facebook account and upload them anywhere easily with Filestack.

Current Worldwide Users: 1,180,000,000

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

Users can select files from Facebook that match these broad file type categories: Only image files are selectable.

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 to 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(replaceHtmlChars(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( '', { 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 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. Click here to learn How to create a Facebook OAuth Application.

Facebook Webhooks for Your Application

You can be notified about all file uploads and conversions from all cloud services Filestack connects to. This includes Facebook. Follow this link to find out more about how to use Filestack's Facebook webhooks.

Here are some examples of the webhooks for uploads from Facebook:

File Upload (symlink):

File Upload (with store):

File Export (save to):
  "action": "fp.export",
  "timestamp": 1444257665,
  "id": 142447,
    "source": "",
    "client": "FACEBOOK",
    "filename": "newFiletest.jpg",
    "created": ""