Comme promis à la fin de mon article qui vous expliquait « comment créer un nouvel onglet Facebook sur votre Page Fan » que je vous invite à lire si vous l’avez raté . Je vais passer à l’étape suivante et vous indiquerai comment cacher et afficher du contenu spécial, ou encore, comment créer des pages réservées seulement aux fans…

Voici les points que nous développerons ici:
1) Pourquoi cacher du contenu aux « non fans » et pourquoi créer des pages réservées aux fans?
2) Qu’est-ce que sont les fonctions signed_request et $data ?
3) Créer la condition de visibilité pour cacher le contenu aux non fans et l’afficher aux fans.

1) Pourquoi créer des pages avec du contenu réservé aux fans?

Le concept est simple: "tu deviens Fan de ma page et tu auras accès à du contenu en avant première, du contenu exclusif, des offres spéciales ou encore des codes de réduction"… Quelque soit l’argument, le but ici est de convaincre l’utilisateur de cliquer sur pour obtenir plus de fans…

2) Qu’est-ce que sont les fonctions signed_request et $data ??

Nous avons vu précédemment comment inclure une page HTML ou PHP dans un nouvel onglet IFRAME de votre Page Fan. Lorsque Facebook charge votre page, il communique des données codées via POST une variable appelée signed_request. Elle est utilisée pour partager des informations entre Facebook et des applications (comme les onglets de votre Page Fan par exemple).

Essayons de comprendre et de décoder cette variable afin d’obtenir un objet JSON avec toutes les données dont nous avons besoin. (Pour ceux qui ne savent pas, le JSON ou « JavaScript Object Notation » est un format de données qui permet l’échange entre le navigateur et le serveur. Le rendu est semblable à un tableau associatif en JavaScript.)

Voici la fonction que Facebook nous met à disposition pour décoder les données:

Décoder les données devient plus simple:

Pour que cela soit clair pour tout le monde, essayons de récapituler sous forme de tableau ce que génère la fontion $data:

Comme vous pouvez le voir dans les commentaires en jaune ci-dessus, le fait que l’utilisateur soit fan n’est pas la seule information que l’on récupère… Nous pourrons créer des conditions de visibilité selon:

• l’Onglet sur lequel se trouve la personne
• le statut de l’utilisateur (administrateur ou simple visiteur,
• la langue utilisée sur Facebook

3) Créer la condition de visibilité pour afficher un contenu aux non fans et un autre aux fans.

Dans cet exemple, nous allons créé un onglet « Menu du Jour » sur la page Fan du restaurant d’un golf de la région parisienne que je vous recommande si vous aimez manger, vous détendre et jouer au golf Bref, sur cet onglet, les fans et seulement les fans pourront voir ce qu’il y a dans le menu du jour.

Les personnes qui attériront sur l’onglet verront l’image du menu floutée alors que les fans visualiseront directement le menu mis à jour quotidiennement que j’afficherai grâce à un iframe.

Voici comment écrire votre condition:

Passons à la pratique:
Vous pouvez voir l’onglet de l’exemple ici et voici le code de ma page en php:

Voici le résultat obtenu dans ce cas là:

J’espère avoir été assez clair pour ce tutoriel Facebook plus technique que marketing mais utile si vous utilisez ce canal!

Voici les thèmes que je traiterai:
1) Les Styles CSS
2) Les Paragraphes et les Liens
3) Les TABLES
4) Les IMAGES
5) Tester, tester et tester!

Si vous venez de lire un tuto sur l’HTML5 et le CSS3, oubliez tout et reprenez vos livres d’HTML3 de 1997… Comme je le disais il y a exactement un an jour pour jour, l’email c’est old school!

Prêts pour la séquence Nostalgie? Proust avait sa madeleine, nous on a nos tables et nos styles inline… D’ailleurs créer des e-mails propres et compatibles sur tous les clients de messagerie, c’est un peu comme préparer un bon petit plat traditionnel, n’est-ce pas Mercotte :

• des ingrédients peu nombreux, simples et authentiques
• un peu d’HTML et de CSS à l’ancienne
• goûter, goûter et goûter avant de servir.

Après la recette du SEO, c’était la recette de l’email! Mais passons aux choses pénibles sérieuses et laissons le tablier et les gourmandises aux experts…

1) Les Styles CSS

Tout d’abord, je vous conseille de jeter un coup d’œil au formidable tableau récapitulatif (de Campaign Monitor) des styles supportés par chaque client de messagerie:

Certains clients de messagerie ignorent l’<head> et les feuilles de styles externes (Gmail par exemple) donc:

• Ne pas utiliser de styles dans la partie <head>, quelques webmails la coupent. Commencer donc à coder après le tag <body>.
• Utiliser des CSS INLINE (des outils tels que Premailer existent pour vous aider à traduire vos styles externes en styles inline.)
• Ne pas utiliser de CSS « shorthand » mais favoriser les styles « longhand » (voir exemple ci-dessous).

2) Les Paragraphes et les Liens

Le tag <p> est supporté par tous les clients de messagerie donc vous pouvez l’utiliser mais personnellement je préfère écrire le code le plus neutre possible… C’est pourquoi je vous conseille d’utiliser des <span> et non des <p>. Si vous souhaitez une précision optimale, gérez la hauteur de ligne dans votre <td>:

Pour que vos liens se visualisent bien sur tous les clients de messagerie vous allez devoir écrire une première fois vos styles dans le tag <a>, puis une deuxième fois dans un tag <span> à l’interieur du tag <a>::

<a href="http://www.tonsite.fr/" style="color:#cccccc"><span style="color:#cccccc">blabla stylé </span></a>

3) Les TABLES

Des clients tels que Gmail, Outlook 00/07, Lotus ne supportent pas les float, les margin, les padding… Je vous déconseille d’utiliser des <div> mais plutôt des <table>… et surtout de suivre ces conseils utiles:

• Créer une <table> « conteneur » de 100% de largeur
• Définir la couleur de fond dans le <td> avec « bgcolor » et non style= »background-color »…
• Définir la Largeur dans chaque <td> (et non dans la <table>)
• Ne pas utiliser le padding pour chaque <td> mais cellpadding pour chaque <table>
• Utiliser plusieurs <td> et éviter d’utiliser padding/margin pour créer des espaces aux extrémités de votre <td>.
• Ne pas spécifier l’unité en PX dans le <td> (width= »95″)
• Il est préférable d’imbriquer vos Tables jusqu’à 5 niveaux maximum.
• Colspan est supporté par de nombreux clients de messagerie, mais malheureusement Rowspan ne l’est pas. Si par exemple, vous souhaitez insérer une image de 250px de hauteur et à sa droite une image ou une marge de 50px au dessus d’un texte de 200px de haut, vous pouvez créer une <table> dans votre second <td> avec 2 <tr> dont une image ou un spacer de 50px dans votre premier <tr><td>.

Exemple de structure:

4) Les IMAGES

Par défaut, les images sont bloquées, il est donc essentiel d’essayer d’avoir une répartition texte/image équilibrée et essayez toujours de placer le « call to action » en version textuelle dans les premiers 250/350px de la hauteur.

• Éviter les images « spacer » servant uniquement à créer des espaces.
• Insérer les dimensions exactes des images.
• Ne pas oublier de renseigner l’attribut ALT.
• Éviter les images gif/png transparentes.
• Éviter les background-image, outlook07 et lotus notes ne les supportent pas…
• Ne pas utiliser les float mais utiliser l’alignement… align= »right »…
• Ne pas oublier de préciser DISPLAY:BLOCK; pour ne pas avoir des traits de séparation blancs sur gmail et hotmail comme sur l’image ci-dessus…

Exemple:

5) Tester, tester et tester!

Pour être sûre que votre email se visualise correctement sur tous les clients de poste, il n’y a qu’une seule solution: TESTER!

Si vous avez la possibilité de connaître les clients de messagerie utilisés par vos utilisateurs, optimisez votre e-mail sur les clients utilisés, si en revanche vous n’en avez pas la moindre idée, adaptez vous à votre cible…
Si votre cible est B2C, contrôlez bien vos e-mails sur les différents webmails (gmail, hotmail, orange…), si votre cible est B2B, vérifiez les différents software (Outlook, Thunderbird, Eudora, Lotus Notes, AOL), et pour finir n’oubliez pas les clients mobiles (Blackberry, Android, iPhone…).
Si vous n’avez pas d’ « email tester » comme Litmus ou EmailonAcid vous permettant de réaliser ces tests automatiquement, patience et courage!