FotoFlexer

FotoFlexer Core API

The FotoFlexer API provides a simple interface for external websites to harness the power of FotoFlexer. Utilizing minimal code, any website can add industry-leading online image editing capabilities. Possible uses include:

Photo Repositories
Dating Sites
Social Networks
Online Auctions
Classifieds
And more!

There is no registration process, no API keys, and no REST or SOAP. Setup is a breeze! FotoFlexer even provides sample code to get you up and running in no time.

To get started, read this guide, download the Integration Kit, and view the live API demo. Visit the Developer Center for more info.

By using FotoFlexer API, you agree to the API Terms of Use.

Overview

FotoFlexer API uses standard Javascript to embed configuration parameters and instantiate a loader. All Javascript and application files are hosted by FotoFlexer.com. The integrating site instantiates FotoFlexer by specifying an image url, callback url, and optional logo url.

When launched, FotoFlexer loads the image specified at the image url for editing, and displays the logo specified at the logo url for a more customized experience. After a user is finished editing, and clicks the "Save" button, FotoFlexer will store the image, and then make an http request for the callback url, passing the new edited image url as a parameter. This sequence is illustrated to the right.

Basic Setup

Setting up FotoFlexer API is straightforward, and consists of three steps:

Configure Parameters
Embed Javascript
Configure Callback Script

1. Configure Parameters

There are three javascript variables that must be set. These are ff_image_url, ff_callback_url, and ff_logo_url.

ff_image_url: This is the url of the image to be edited. It must be accessible via a web browser. For example, "http://www.foo.com/images/bar.jpg."
ff_callback_url: This is the url that will be called when the user is finished editing and clicks the "Save" button. FotoFlexer will redirect the user to whatever URL is specified here. In addition, two new GET parameters will be appended with the url of the edited image and the url of a thumbnail. For example, you could specify ff_callback_url as "http://www.foo.com/handler.php." FotoFlexer would then redirect to "http://www.foo.com/handler.php? image=http://fotos.fotoflexer.com/2007/08/31/abc123.jpg& thumb=http://fotos.fotoflexer.com/2007/08/31/abc123_thumb.jpg."
ff_logo_url: This is an optional parameter, and specifies a logo to be displayed within the editor to provide a more customized editing experience for users. This image must be accessible by a web browser, must be in either GIF, JPG, BMP or PNG format, and must have dimensions of no more than 25px width x 100px height.

Put together, these variables would look similar to this:

2. Embed Javascript

FotoFlexer is instantiated through a Javascript file hosted by FotoFlexer.com. The file must be properly embedded in the integrating webpage:

This code, as well as the configuration code from step 1, may be placed anywhere on the page. For fastest page loading, FotoFlexer recommends placing this Javascript at the end of the HTML, right before the closing <body> tag. This will ensure that all page content is loaded before the browser attempts to initialize FotoFlexer.

3. Configure Callback Script

After a user has finished editing an image, FotoFlexer will save the image, store it on FotoFlexer's servers, and then redirect the user to the callback url with the new (edited) image url and a thumbnail url passed as parameters. The script residing at the callback url must be able to parse the GET parameters, and then process the result. This may include fetching the image to store locally, saving the URL to a database, or updating the page via AJAX with the newly edited image.

Just about anything is possible with the callback url. Using PHP, the simplest implementation would be this:

<?php

// Parse parameters to get Image and Thumbnail urls
$image = $_GET['image'];
$thumb = $_GET['thumb'];

// Now copy the images to the local server.
copy($image,"/path/to/images/image.jpg");
copy($thumb,"/path/to/thumbnails/thumb.jpg");

?>

In a production environment, the callback script should authenticate the image source, and perform error checking. Examples of this are provided in the Integration Kit.

Launching

Once FotoFlexer API has been properly configured, it is instantiated through a Javascript function called ff_activate(). This function can easily be called through an onclick event anywhere on the page:

<a href="javascript:void(0);" onclick="ff_activate();">Edit Image</a>

ff_activate takes the values of the configuration variables, packages them into a URL with GET parameters, and then redirects the user.

Please download the Integration Kit for code examples and a working API implementation.

Uploader Setup

In the case that an integrating site prefers not to host images, FotoFlexer offers a free upload and hosting service as part of the API. Using an alternate interface, a site can allow users to upload images directly to FotoFlexer. The following code snippet enables FotoFlexer to handle the upload, hosting, and editing of the uploaded images. When done, the API will redirect to the callback url as normal.

To use the API Uploader:

<form enctype="multipart/form-data"
      action="http://fotoflexer.com/API/API_Upload.php"
      method="POST">
  <input name="userfile" id="userfile" type="file" />
  <input type="hidden" name="Logo" id="Logo"
      value="http://yourdomain.com/foo.jpg" />
  <input type="hidden" name="CB" id="CB"
      value="http://yourdomain.com/foo.php" />
  <input type="submit" value="Upload" />
</form>

Extending The API

So far, this guide has illustrated the simplest type of interface between a website and FotoFlexer: a single image is edited, and then passed back to the site. Although this is sufficient for many applications, the API is highly extensible, and allows much more complex behavior. Extending the API requires knowledge of Javascript and server-side scripting, such as PHP.

In its simplest form, FotoFlexer API has two points of contact with the integrating site: entry and exit. The entry is made by a client calling a specific URL with certain parameters. The exit is made by FotoFlexer redirecting to the callback url with certain parameters. The actual packaging of the URL by the client, and the processing by the callback script, provide powerful avenues for customization and extension.

Entry

FotoFlexer API calls are addressed to "http://fotoflexer.com/API/API_Loader.php". To properly initialize FotoFlexer, several GET parameters must be sent along with the http request. These are:

ff_image_url: This is the url of the image to be edited. It must be accessible via a web browser. For example, "http://www.foo.com/images/bar.jpg."
ff_callback_url: This is the url that will be called when the user is finished editing and clicks the "Save" button. FotoFlexer will redirect the user to whatever URL is specified here. In addition, two new GET parameters will be appended with the url of the edited image and the url of a thumbnail. For example, you could specify ff_callback_url as "http://www.foo.com/handler.php." FotoFlexer would then redirect to "http://www.foo.com/handler.php? image=http://fotos.fotoflexer.com/2007/08/31/abc123.jpg& thumb=http://fotos.fotoflexer.com/2007/08/31/abc123_thumb.jpg."
ff_logo_url: This is an optional parameter, and specifies a logo to be displayed within the editor to provide a more customized editing experience for users. This image must be accessible by a web browser, must be in either GIF, JPG, BMP or PNG format, and must have dimensions of no more than 100px height x 25px width.

A sample url would take the following form:

http://fotoflexer.com/API/API_Loader.php? ff_image_url=http://www.foo.com/images/bar.jpg& ff_callback_url=http://www.foo.com/handler.php& ff_logo_url=http://www.foo.com/images/logo.gif

This URL will load FotoFlexer with the specified image and logo. When the user clicks "Save" from within the editor, FotoFlexer will save the image, store it on the FotoFlexer servers, and then redirect to the callback url, appending GET parameters with the new image url and thumbnail url.

Exit

When a user clicks "Save" within FotoFlexer API, FotoFlexer will redirect the user to the callback url, appending the new image url and thumbnail url as GET parameters with the names "image" and "thumb," respectively. The url FotoFlexer redirects to would look something like this:

http://www.foo.com/handler.php?
image=http://fotos.fotoflexer.com/2007/08/31/abc123.jpg& thumb=image=http://fotos.fotoflexer.com/2007/08/31/abc123_thumb.jpg

The script residing at this url (in this case, "handler.php") would be responsible for parsing the GET parameters, and then performing any other actions.

The callback url need not be a simple file location. It may be a dynamic url, containing additional GET parameters. When FotoFlexer parses the callback url, it will recognize if additional GET parameters are present, and include those when it redirects. This allows the developer to pass session IDs, user IDs or other information to help maintain state while the user is editing.

For example, the callback url could be:

http://www.foo.com/view_image.php?uid=1234&sid=1a2b3c4d5e6f7a8b9c0d

In this case, FotoFlexer would append parameters to the end, like so:

http://www.foo.com/view_image.php?uid=1234&sid=1a2b3c4d5e6f7a8b9c0d& image=http://fotos.fotoflexer.com/2007/08/31/abc123.jpg& thumb=image=http://fotos.fotoflexer.com/2007/08/31/abc123_thumb.jpg

Extending the API allows for sophisticated behavior, including dynamically generated API instances and AJAX integration.

Get Started

Get started with FotoFlexer API today! Download the Integration Kit to get code examples in both PHP and Rails, as well as see the various Javascript calls in action. The Integration Kit contains a fully functional API implementation. It's a great starting point for more advanced integration.

FotoFlexer Home