How It Works

The URL "https://platform.fatsecret.com/js" contains all the JavaScript variables and functions needed to run a FatSecret Platform application. When this JavaScript is embedded in a web page the key building blocks of the application are created and content is subsequently loaded "on-demand" using JavaScript API calls.

Note that you must always specify your API Key when referencing "https://platform.fatsecret.com/js". For more information, see the key Script URL parameter reference.

The key elements of each application are:

• a single container;
• canvas content (loaded into the container); and
• sections (the building blocks of each canvas).

The container is a special place on your page where the content of your application is shown. Typically this is a div element in the browser's document object model (DOM). In the "out of the box" configuration (where the query parameter "auto_load=true" is used), the FatSecret Platform API will automatically create and insert a container element in the DOM of your web page for you.

Unless an application is automatically loaded, you must take care of nominating an element as the container for your application (see fatsecret.setContainer for more information).

Each canvas is a combination of one or more sections of content to be shown to users.

For instance, the food.get canvas displays the nutritional information for a given food, with common serving sizes and other foods that this food is frequently eaten with; while the calendar.getmonth canvas displays a calendar of daily food and activity diary information and summary nutritional information for a given month.

Canvas content is loaded into the container on a web page, following a predefined "template".

Each canvas is divided into one or more sections. Unless otherwise specified, the sections of each canvas are automatically positioned within a pre-defined "template". When content is manually loaded, the individual sections of each canvas may be separately positioned on the web page.

For instance, the food.get canvas comprises of the following sections:

The predefined template of each canvas can be overloaded if the auto_template script URL parameter is set to false.

E.G. 1: a simple alternate layout for the food.get canvas is shown below, using the fatsecret.addRef script function:

The fatsecret.addRef function instructs the JavaScript API to associate the span with id food_title with the foodtitle section and the div with id nutrition_panel with the nutritionpanel section (see Manually Loading Content).

E.G. 2: the same alternate layout for the food.get canvas is achieved, using the fatsecret.writeHolder script function:

Using either of the approaches outlined above will cause the "foodtitle" and "nutritionpanel" sections to be output directly on the web page as follows

For further working examples please refer to the Sample Code documentation.