Vous êtes-vous déjà demandé comment certaines pages Facebook affichent du contenu ou des offres spécifiques uniquement aux fans ? Si c’est le cas, ne cherche pas plus loin.
(Mise à jour importante: Facebook ne prend plus en charge FBML. Veuillez vous référer aux articles sur Facebook iFrame.) L’une des balises FBML les plus populaires est fb : visible à la connexion. Favori des marketeurs, ce tag FBML permet à une page Facebook de montrer un contenu différent aux fans et aux non-fans. Lorsqu’un non-fan clique sur le bouton J’aime – alto ! – le contenu non-fan disparaît et le contenu réservé aux fans le remplace. En tant que méthode pour motiver un visiteur à devenir fan de votre page, cela peut être très efficace.
Cette balise FBML est souvent – et à tort – qualifiée de “hack” ; cependant, il a été créé par Facebook pour faire exactement ce qu’il fait : “pour afficher le contenu à l’intérieur de la balise sur le profil d’un utilisateur ou d’une page Facebook uniquement si le spectateur est un ami de cet utilisateur ou est un fan de cette page Facebook.”
Exemples de marques utilisant du contenu réservé aux fans
Il existe de nombreuses façons de inciter vos visiteurs à aimer votre page. Voici quelques exemples de marques sur Facebook :
Levi’s promet « un accès instantané à du contenu exclusif ».
1-800 Flowers offre un code de réduction de 20% sur votre prochaine commande.
Teesey Tees reste mystérieux : “Voyez quel est le marché.”
DIGISTORE propose des “codes de réduction, des promotions non annoncées, des cadeaux mensuels gratuits”.
Vous obtenez l’image. “Nous avons un excellent contenu ici, MAIS D’ABORD, vous devez nous aimer!”
Bien sûr, vous devriez assurez-vous que votre “teaser” pour les non-fans est suffisamment convaincant pour qu’ils aiment votre page. De nombreuses pages exigent qu’un visiteur devienne un fan avant d’afficher certains contenus, mais ce n’est pas le cas transmettre la valeur du contenu. Teesey Tees, ci-dessus, est très proche de cela.
Vous trouverez ci-dessous des instructions sur la façon d’ajouter du contenu réservé aux fans sur votre page.
Ajouter l’application FBML statique à votre page
Tout d’abord, vous devrez ajouter l’application Static FBML à votre page. Voici un tutoriel.
REMARQUE: Le FBML statique ne peut être ajouté qu’à une page Facebook (c’est-à-dire, page d’entreprise, page d’entreprise, page de marque). Il ne peut pas être ajouté à un profil personnel.
Qu’est-ce que le FBML ?
FBML est le langage de balisage propriétaire de Facebook qui permet au contenu de votre onglet d’interagir avec l’API Facebook (“Application Programming Interface”). Il est aussi facile à utiliser que HTML.
La plupart des balises FBML, y compris celles que j’utilise dans cet article, ont une balise d’ouverture et une balise fermante. Le contenu de chaque balise – HTML, CSS et/ou plus FBML – est placé entre ces balises d’ouverture et de fermeture.
Créer votre contenu réservé aux fans sur votre onglet personnalisé
Une fois que vous avez ajouté l’application Static FBML, l’implémentation de cette balise FBML est assez simple. La seule partie quelque peu délicate consiste à se débarrasser de l’espace blanc créé par le contenu réservé aux fans, même s’il n’est pas encore visible.
Facebook utilise le «visibilité:masquée” stylé à masquer le contenu du fan jusqu’à ce que l’utilisateur aime la page. Cependant, cette règle de style reste réserve l’espace pour le contenu ; ce n’est tout simplement pas Afficher le contenu. Par conséquent, le contenu non fan est poussé vers le bas de la page ! Cependant, cela est facilement résolu avec un peu de “positionnement absolu” CSS. J’intègre cette approche dans les exemples suivants.
Le code de la boîte FBML :
`__abENT__lt;code__abENT__gt;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;lt;div id=__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;quot;wrapper__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;quot;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;gt;`
FANS-ONLY CONTENT GOES HERE
__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;lt;div id=__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;quot;non-fans__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;quot;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;gt;NON-FANS CONTENT GOES HERE__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;lt;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#8260;div__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;gt;
__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;lt;__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;#8260;div__abENT__#95;__abENT__#95;abENT__abENT__#95;__abENT__#95;gt;__abENT__lt;__abENT__#8260;code__abENT__gt;
Comme indiqué ci-dessus, tout le contenu de l’onglet sera contenu dans le DIV “wrapper”.
Tout le contenu réservé aux fans et non fan est placé entre l’ouverture
Le contenu réservé aux fans vient en premier, suivi du contenu non fan qui suit immédiatement l’ouverture
Le contenu non fan est contenu dans le
Mots clés. Les styles CSS sont appliqués à l’ID “non-fans” via la feuille de style.
Immédiatement après le contenu non fan se trouve la fermeture balise, suivie de la fermeture balise et, enfin, la
tag pour fermer le DIV “wrapper”.
Voici la boîte FBML statique avec le code ci-dessus, et le lien vers une feuille de style externe :
Voici le CSS pour la feuille de style externe (avec exemple d’URL) :
`__abENT__lt;code__abENT__gt;#wrapper {`
width:520px;
margin:0 auto; border:0; padding:0;
position:relative;
}
#non-fans {
width:520px;
position:absolute; top:0; left:0;
}__abENT__lt;__abENT__#8260;code__abENT__gt;
Votre feuille de style externe doit avoir seulement les règles de style CSS. N’incluez pas le
Mots clés!
Si vous ne pouvez pas utiliser une feuille de style externe
Si vous ne disposez pas d’un serveur sur lequel vous pouvez télécharger une feuille de style distincte, vous pouvez “inline” les styles à l’intérieur des balises HTML. Bien que ce ne soit pas l’idéal, c’est une option si vous ne pouvez pas créer une feuille de style séparée, l’héberger sur un serveur et la lier avec le
Voici l’exemple ci-dessus, avec les styles pour le
Test et dépannage
Tester et dépanner cette balise FBML particulière est un peu délicat, car lorsque vous êtes connecté en tant qu’utilisateur administrateur de la page, vous verrez à la fois le contenu réservé aux fans et non fan lors de l’affichage de l’onglet.
- Créez un compte utilisateur pour tester : Le moyen le plus efficace de tester est de créer un compte Facebook pour tester uniquement, ou d’utiliser le compte d’un ami ou d’un collègue. (La création d’un nouveau profil personnel à des fins de test peut enfreindre les conditions d’utilisation de Facebook – Voir #4, Inscription et sécurité du compte – même si cela est fait avec de bonnes intentions.) Vous pouvez être connecté à Facebook en tant qu’utilisateur unique (le compte administrateur) dans un navigateur et connecté en tant que compte de test dans un autre navigateur (j’utilise Firefox et Safari). Ensuite, vous n’avez pas besoin de vous connecter et de vous déconnecter de Facebook en tant qu’administrateur, puis en tant que testeur, etc.
Lors du test, vous devrez basculer entre Aimer et Ne plus aimer une page. Pour Contrairement à une page, cliquez sur l’onglet Mur. Près du bas de la colonne de gauche du mur, vous verrez “Je n’aime pas”:
Cliquez dessus pour ne pas aimer la page, et vous pouvez cliquer sur le bouton J’aime pour aimer à nouveau la page. Répétez si nécessaire.
- Utilisez une feuille de style externe, PAS des styles en ligne : Plus les navigateurs afficheront correctement votre page si vous avez aligné le CSS avec le