Mises en page Facebook

Dans ce chapitre, vous apprendrez comment :

  • notre service client crée pour vous des mises en page HTML alternatives.
  • sélectionner des mises en page alternatives dans le paragraphe Facebook.
  • éditer des mises en page alternatives avec une connaissance approfondie du HTML, du CSS et de Velocity.

Pour obtenir jusqu’à 2 mises en page alternatives, contactez le service client d’Episerver, qui mettra en place des mises en page alternatives pour vous.

Remarque:  Si vous souhaitez enregistrer vos propres mises en page HTML, n’oubliez pas de configurer les mises en page alternatives correspondantes pour les versions mobile et les versions texte. Si aucune mise en page alternative n’est enregistrée pour les versions mobile et texte, la mise en page par défaut est automatiquement utilisée. Dans certaines circonstances, il se peut que vos fragments de texte individuels ne soient pas agencés comme vous le souhaitez.

Sélectionner la mise en page

Pour sélectionner la mise en page par défaut ou l’une des 2 mises en page alternatives, suivez les étapes suivantes :

  1. Lorsque vous éditez un mailing, rendez-vous dans le Template Kit à gauche, dans la barre de menu du paragraphe Facebook, et cliquez sur Facebook.

    Une fenêtre de configuration s’affiche sur la droite.

  2. Basculez dans l’onglet Options.
  3. Dans la section Identité visuelle, sélectionnez la mise en page que vous souhaitez appliquer dans la liste déroulante Identité visuelle.
  4. Cliquez sur Appliquer.

    Vous avez appliqué la mise en page sélectionnée avec succès. À gauche, dans la fenêtre d’aperçu, le formatage de votre paragraphe Facebook est modifié en conséquence.

Éditer la mise en page

Vous pouvez éditer vos mises en page alternatives ultérieurement. La mise en page par défaut ne peut pas être modifiée.

Attention:  Si vous souhaitez éditer vos mises en page alternatives ultérieurement, vous devez avoir une connaissance approfondie du HTML, du CSS et de Velocity. Si vous n’avez pas de connaissances approfondies en HTML, en CSS et avec Velocity, veuillez contacter le service client d’Episerver, qui se fera un plaisir d’effectuer les modifications souhaitées. Si vous éditez les mises en page alternatives sans connaissances approfondies, des problèmes d’affichage conséquents peuvent apparaître dans vos mailings.

Pour éditer vos mises en page alternatives, procédez comme suit :

  1. Cliquez sur Paramètres dans l’aperçu à gauche.

    Une fenêtre de configuration s’affiche sur la droite.

  2. Basculez dans l’onglet Facebook.

    Pour chaque mise en page, des rubriques de texte source sont disponibles pour la version de bureau, la version mobile et la version texte.

  3. Éditez le code source de la mise en page correspondante selon vos souhaits. Dans Insérer du contenu vous est expliqué comment lire et positionner les différents contenus.

    Remarque:  N’oubliez pas de configurer les mises en page alternatives correspondantes pour les versions mobile et les versions texte. Si aucune mise en page alternative n’est enregistrée pour les versions mobile et texte, la mise en page par défaut est automatiquement utilisée.

  4. Cliquez sur Appliquer.

    Vous avez édité votre mise en page avec succès. À gauche, dans la fenêtre d’aperçu, le formatage de votre paragraphe Facebook est modifié en conséquence.

Insérer des contenus

Accédez aux contenus du paragraphe Facebook avec des variables Velocity et formatez le contenu transféré avec des instructions de style HTML.

Les variables Velocity suivantes sont disponibles :

  • Variables de statut - informations concernant la publication Facebook actuelle
  • Variables de présence - pour l’utilisation de requêtes vérifiant la présence d’un élément
  • Variables de valeur - pour l’extraction du contenu

Indications pour créer une nouvelle mise en page

  • Définition des polices : Lors de l’utilisation d’une variante de mise en page, toutes les définitions de polices doivent être disponibles dans le code HTML saisi. Les textes ne sont pas formatés par le Template Kit, afin que vous ayez toute liberté quant à la conception visuelle.
  • Largeur : Spécifiez une largeur fixe ou une largeur en pourcentage. Nous vous recommandons de saisir un pourcentage, afin d’éviter que des éléments ne dépassent de la mise en page.
  • Risque d’erreurs d’affichage : Notez que vous devez avoir une bonne connaissance du HTML, car le code HTML que vous entrez n’est pas validé par Episerver Campaign. Si vous entrez un code HTML erroné, d’importants problèmes de mise en page peuvent apparaître.

Variables de statut

Variable

Type

Description

$facebookItemFirst

boolean

Contient true, s’il s’agit de la première publication du paragraphe Facebook, sinon false.

$facebookItemIndex

integer

Contient la position de la publication dans le paragraphe Facebook en tant que nombre (1 pour la première publication, 2 pour la deuxième, etc.).

$facebookItemLast

boolean

Contient true, s’il s’agit de la dernière publication du paragraphe Facebook, sinon false.

Variables de présence

Variable

Type

Description

$facebookTextPresent

boolean

Contient true s’il existe du contenu pour le champ Texte, sinon false.

$facebookAuthorPresent

boolean

Contient true s’il existe du contenu pour le champ Auteur, sinon false.

$facebookDatePresent

boolean

Contient true s’il existe du contenu pour le champ Date, sinon false.

$facebookLinkTextPresent

boolean

Contient trues’il existe du contenu pour le champ Texte, dans la zone Lien, sinon false.

$facebookLinkUrlPresent

boolean

Contient trues’il existe du contenu pour le champ URL, dans la zone Lien, sinon false.

$facebookImageUrlPresent

boolean

Contient trues’il existe dans l’onglet Image du contenu pour le champ Image, sinon false.

$facebookImageAltTextPresent

boolean

Contient trues’il existe dans l’onglet Image du contenu pour le champ Texte alternatif, sinon false.

$facebookImageLinkPresent

boolean

Contient trues’il existe dans l’onglet Image du contenu pour le champ Lien, sinon false.

Variables de valeur

Variable

Type

Description

$facebookTextValue

string

Contient le contenu du champ Texte.

$facebookAuthorValue

string

Contient le contenu du champ Auteur.

$facebookDateValue

string

Contient le contenu du champ Date.

$facebookLinkTextValue

string

Contient le contenu du champ Texte de la zone Lien.

$facebookLinkUrlValue

string

Contient le contenu du champ URL de la zone Lien.

$facebookImageUrlValue

string

Contient l’URL de l’image de l’onglet Image.

$facebookImageAltTextValue

string

Contient le contenu du champ Texte alternatif de l’onglet Image.

$facebookImageLinkValue

string

Contient le contenu du champ Lien de l’onglet Image.

$editBar

string

Insère la barre d’outils du paragraphe. C’est par exemple nécessaire lors de la réalisation de publications juxtaposées, pour intégrer la barre d’outils dans le tableau. Si cette variable n’est pas disponible, la barre d’outils est placée au-dessus de l’article.