Tweet

Bonjour à toutes et à tous. Cela faisait quelques semaines que je ne vous avais pas parlé de Fan-Pages Facebook sur Kriisiis.fr, et en particulier des onglets personnalisables en FBML. Je souhaiterais aujourd’hui vous proposer quelques fonctionnalités que l’on peut intégrer facilement dans ses pages, grâce à l’application Static FBML. Si vous n’utilisez pas encore cette application, voici un petit tutoriel détaillant les différentes étapes d’installation, ou encore un autre, qui a le mérite d’être illustré et donc probablement plus clair (mais en anglais).

Concrètement, un onglet en FBML va vous permettre d’intégrer la majorité des fonctionnalités que l’on retrouve sur une page-web en HTML, si ce n’est qu’une application est requise et que Facebook propose certaines balises dans un langage leur étant propre. Dans la majeure partie des cas, ces onglets ressemblent à celui présenté ci-dessous. Une image, voire un petit bout de texte, dans un HTML enfantin, rien de plus simple :

Le code HTML en question est intégré via l’application Static FBML, et ressemble simplement à l’image ci-dessous. Ces onglets vous permettent par exemple de créer une « Landing Page », page d’atterrissage de nouveaux visiteurs encore non-entrés dans votre communauté sur Facbook, mais également d’autres onglets pour les membres, comme une page d’information, de jeux-concours, ou encore de récupération d’optin via un formulaire d’inscription à votre newsletter. Pensez seulement à ne pas surcharger vos pages de fonctionnalités !

Il est vrai que l’apparence et l’utilité des éléments de ce genre d’onglets dépendent de l’organisme représenté, de la stratégie dans laquelle il est engagé, ou encore tout simplement de votre propre volonté à vouloir ou non faire l’effort de les créer. Cependant, si vous le souhaitez, ces fonctionnalités pourront vous permettre de tirer profit de manière plus importante que la simple accentuation du taux de Like sur votre Fan-Page, ce qui n’est pas négligeable, quelle que soit la taille (potentielle) de votre entité et de votre communauté.

Je me permets donc de vous propose « 10 éléments à intégrer dans des onglets FBML de votre Fan-Page Facebook », avec à la fois une explication, un bout de code (HTML ou FBML) et un exemple illustré (dans mon activité ou sur des Fan-Pages d’autres entités). Si vous avez des questions ou des commentaires à apporter, n’oubliez pas que vous pouvez me retrouver sur Twitter sous le pseudo @Kriisiis, sur Facebook via mon profil ou la Fan-Page de Kriisiis.fr (qui vous l’aurez remarqué, propose simplement Tigerlily en Landing-Page).

1. Un encart d’inscription à une Newsletter

L’avantage de Static FBML est que vous pouvez intégrer du HTML dans un onglet très simplement. Je vous conseille donc de placer un encart d’inscription à votre newsletter, si vous en avez une. Cela vous permettra non seulement de récupérer une adresse qualifiée mais surtout de faire d’une pierre deux coups avec votre nouveau membre. Voici deux bouts de code que vous pourriez par exemple intégrer (pour une newsletter commune et une newsletter via Feedburner).

Newsletter commune :

Newsletter via Feedburner :

Exemple d’encart d’inscription à une Newsletter via Social Media Examiner :

2. Un cadre d’invitation d’amis Facebook

Il s’agit réellement de la fonctionnalité que je préfère. Un encart permet à toute personne tombant sur votre onglet FBML ou Landing-Tab d’inviter ses amis à la rejoindre, de manière très ergonomique. J’ai découvert cette fonction il y a à peine quelques jours, jusqu’à maintenant j’employais un encart qui n’affichait que les noms (à cocher) et non les icônes (à sélectionner). Je me permets donc de vous présenter les deux codes (la version « icône » fait moins de 520px de large).

Cadre « par nom » :

Exemple de cadre d’invitation « par nom » :

Cadre « par icône » :

Exemple de cadre d’invitation « par icône » :

3. Un code Google Analytics

De la même manière que pour un site internet, il vous est possible d’intégrer un code Google Analytics dans votre onglet Static FBML afin de pouvoir suivre en détail l’activité de votre page. Le tutoriel de Presse-Citron expliquait très bien la manière de faire, sachez seulement qu’aujourd’hui une seule ligne de code suffit et qu’un générateur n’est plus indispensable. Voici le code à intégrer en bas de votre onglet, avec votre propre code UA que vous aurez initialement généré.

Exemple d’intégration de code Google Analytics sur l’une de mes Fan-Pages :

4. Une donnée en flash (.swf ou .flv)

Que vous souhaitiez afficher une bannière animée, une vidéo, une animation quelle qu’elle soit, c’est possible ! Le flash est facilement intégrable dans un onglet Static FBML. Cependant, le code est légèrement différent selon la nature de la donnée à intégrer, alors choisissez ce qui vous convient le mieux. N’oubliez également pas que trop de flash ralenti énormément le chargement et que cela peut devenir dangereux car repoussant pour les nouveaux venus.

Donnée en .swf :

Donnée en .flv :

Exemple d’intégration de vidéos en Flash sur la Fan-Page de Disney :

5. Un bouton de partage auprès de ses amis

Il s’agit également d’une fonctionnalité que j’apprécie particulièrement. Facebook vous permet de placer un bouton « Partager » ou « Share » dans votre onglet, ce qui va vous permettre de proposer du contenu share-friendly tel que de l’actualité ou des bons plans. Le premier bout de code est le bouton simple, le second, un bouton vous permettant de personnaliser le message de manière relativement importante.

Bouton de partage « simple » :

Bouton de partage « complet » :

Exemple de bouton « Partager » sur la Fan-Page de Coca-Cola :

6. Un encart de discussion entre membres

Ce que l’on appelle la Discussion Board va permettre à vos membres ou futurs membres de partager autours d’un sujet bien précis : votre entité ! Ressemblant à un système de commentaires sur un blog mais à la sauce Facebook, cet encart peut s’avérer également très intéressant à intégrer, surtout si vous profitez actuellement d’un capital sympathie important sur la toile. Attention à sa taille cependant, cet encart est de taille très importante.

Installer préalablement l’application « Discussion Board » à l’adresse suivante.

Nom de votre entité ou sujet de discussion

Exemple de « Discussion Board » sur la Fan-Page de Disney :

7. Un encart de partage autours d’un évènement

De la même manière que pour la Discussion Board, il vous est possible de faire dialoguer les internautes à travers une Box dans votre Landing-Tab ou autre page en FBML mais cette fois-ci au sujet d’un événement. Cela peut s’avérer diablement pratique si vous souhaitez promouvoir un salon, un rendez-vous professionnel de taille, des formations, ou d’autres évènements liés à votre activité. Voici le code à intégrer afin de créer votre Event Board :

Exemple de « Event Board » sur la Fan-Page de Jesse Stay :

8. Une génération de nouvelle image

Lorsque vous créez une Landing-Page, il peut être intéressant de proposer une image qui sera modifiée lors de l’entrée du membre dans la communauté (suite au clic sur Like ou J’aime, méthode que j’utilise sur la Landing-Page du Groupe Happytime par exemple). Facebook vous permet de faire cela grâce à une balise FBML et un peu de CSS (un grand merci à Pierre-Lou Dominjon alias @Pilou88 de MakeMeReach pour son aide !).

Exemple de changement d’image suite à l’entrée sur la Fan-Page d’Happytime :

9. Une mise en avant de profil

Certaines entités (surtout Outre-Atlantique) remercient leurs membres les plus actifs en les mettant à l’honneur comme « membre de la semaine » dans un onglet FBML. Pour cela, elles génèrent leur avatar et leur nom à l’aide de balises FBML, ce qui vous permettra également de créer une petite description de votre profil si vous avez une Fan-Page un peu plus personnelle. L’avantage ? Les données changent automatiquement lorsque vous modifiez votre avatar ou votre nom.

Exemple de mise en avant ou de présentation d’un membre (démo) :

10. Une donnée chargée aléatoirement

Pour finir, il vous est possible de proposer un affichage aléatoire de données (images, textes) lorsqu’une personne affiche votre onglet. Cela va vous permettre de promouvoir plusieurs informations en simultanée, avec des probabilités que vous réglez vous-même, d’où une certaine liberté relativement intéressante. N’ayant (plutôt logiquement) pas trouvé d’exemple, vous trouverez sous le code une petite démo sur l’une de mes Fan-Pages.

A : Sera vu 2 fois plus régulièrement que B.
B : Sera vu 2 fois moins que A.

Exemple de donnée aléatoire à intégrer (démo) :

Vous pouvez bien entendu retrouver un très grand nombre d’informations complémentaires dans la documentation officielle de Facebook, ainsi que tous les paramètres disponibles selon les balises (ils sont très nombreux, alors permettez-moi d’insister). Vous devez vous en douter, ce qui est présenté dans cet article ne représente qu’une infime partie des personnalisations possibles, alors n’hésitez surtout pas à consulter la doc pour de plus amples information !

Si vous avez la moindre question, ou la moindre amélioration à apporter au contenu de cet article, n’hésitez pas à m’en faire part dans les commentaires de cet article. En attendant, je vous propose de me retrouver sur Facebook, en m’ajoutant à vos contacts (Christophe Ramel) ou en devenant fan de Kriisiis.fr. Vous pouvez également me retrouver sur Twitter (@Kriisiis) !

Source 1 – Source 2 – Source 3 – Source 4

[twitterbox]