Facebook layouts

This topic describes:

  • how customer support sets up alternative HTML layouts
  • how to select alternative layouts in the Facebook paragraph
  • how to edit alternative layouts using knowledge of HTML, CSS, and Velocity

To receive up to 2 alternative layouts, contact customer support.

To create HTML layouts, set up alternative layouts for mobile and text versions also. If no alternative layouts are saved for those versions, the default layout is used.

In some cases, some text elements will not be in the order that you want.

Selecting a layout

  1. To select a default layout or an alternative layout, while editing a message in the Template Kit, on the left side of the preview, in the menu bar of the Facebook paragraph, click Facebook. The configuration window opens on the right side.
  2. Click the Options tab.
  3. In the Layout area, in the Layout drop-down list, select the layout you want to use.

    Image: Layout settings

  4. Click Apply.

Editing a layout

You can edit alternative layouts but not the default layout.

If you lack knowledge of HTML, CSS, and Velocity, contact customer support to edit the alternative layouts. If you edit them without in-depth knowledge, serious display errors may occur in your mailings.

  1. To edit alternative layouts, in the preview on the left, click Settings. The configuration window opens on the right.
  2. Open the Facebook tab. Each layout has source text fields for the desktop, mobile, and text versions.

    Image: Facebook tab

  3. Edit the source text of the corresponding layout according. Under Inserting content, read how to place the various content items.

    Set up alternative layouts for mobile and text versions also. If no alternative layouts are stored for these versions, the default layout is used.

  4. Click Apply.

Inserting content

Access the content of the Facebook paragraph using Velocity variables and format the transferred content using HTML style attributes.

The following Velocity variables are available:

  • Status. Information on current item paragraphs
  • Present. For using queries that check for the presence of an element
  • Value. For issuing the content

Notes for the creation of new layouts

  • Font definitions. If you are using an alternative layout variant, font definitions must exist in the HTML you entered. The texts are not formatted by the Template Kit to give you complete freedom in visual design.
  • Widths. Specify a fixed width or a width in percent. You should enter a percentage, because this prevents elements from sticking out of the layout.
  • Danger of display errors. If you edit the layouts without in-depth knowledge of HTML, serious display errors may occur in your mailings.

Status variables

Variable Type Description
$facebookItemFirst Boolean Is true if it is the first post in the Facebook paragraph, or is otherwise false.
$facebookItemIndex Integer Contains the position of the post within the Facebook paragraph as a number (1 for the first post, 2 for the second post and so on).
$facebookItemLast Boolean Is true if it is the last post in the Facebook paragraph, or is otherwise false.

Present variables

Variable Type Description
$facebookTextPresent Boolean Contains true if there is content for the Text box, or otherwise false.
$facebookAuthorPresent Boolean Contains true if there is content for the Author box, or otherwise false.
$facebookDatePresent Boolean Contains true if there is content for the Date box, or otherwise false.
$facebookLinkTextPresent Boolean Contains true if there is content for the Text box in the Link area, otherwise false.
$facebookLinkUrlPresent Boolean Contains true if there is content for the URL box in the Link area, otherwise false.
$facebookImageUrlPresent Boolean Contains true if there is content for the Image box in the Image tab, otherwise false.
$facebookImageAltTextPresent Boolean Contains true if there is content for the Alternative text box in the Image tab, otherwise false.
$facebookImageLinkPresent Boolean Contains true if there is content for the Link box in the Image tab, otherwise false.

Value variables

Variable Typ Description
$facebookTextValue String Contains the content of the Text box.
$facebookAuthorValue String Contains the content of the Author box.
$facebookDateValue String Contains the content of the Date box.
$facebookLinkTextValue String Contains the content of the Text box in the Link area.
$facebookLinkUrlValue String Contains the content of the URL box in the Link area.
$facebookImageUrlValue String Contains the image URL from the Image tab.
$facebookImageAltTextValue String Contains the content of the Alternative text box in the Image tab.
$facebookImageLinkValue String Contains the content of the Link box in the Image tab.
$editBar String Inserts the paragraph's button bar. This is required to integrate the button bar into the table, such as when implementing adjacent items. If this variable is not available, the button bar is placed above the item.