Comment intégrer un onglet d’accueil à sa page Facebook ?

10 éléments à intégrer dans des onglets FBML de votre Fan-Page Facebook

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 descommentaires à 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 simplementTigerlily 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 :

1. <form action="http://www.happybox.fr/index.asp?page=mailling" name="r69TneeArNewsValue" method="post" style="margin: 0pt; padding: 0pt;" target="_blank">
2. <input gtbfieldid="93" name="email" value="Votre email" onclick="this.value= »;" class="Module" style="width: 140px;">
3. <input type="submit" value="s’inscrire" class="Bouton">
4. </form>

Newsletter via Feedburner :

1. <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=kriisiisfeed’, ‘popupwindow’, ‘scrollbars=yes,width=520,height=520′);return true">
2. <p><input type="text" style="width:140px" value="Votre email" name="email"/></p>
3. <input type="hidden" value="kriisiisfeed" name="uri"/>
4. <input type="hidden" name="loc" value="fr_FR"/>
5. <input type="submit" value="s’inscrire" />
6. </form>

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 » :

1. <fb:fbml>
2. <fb:request-form method="POST" type="Happytime" invite="true" action="http://www.facebook.com/multi_friend_selector.php" content="Devenez fan d’Happytime sur Facebook et profitez de promotions, d’infos exclusives et de partages passionnants au sujet des loisirs !<fb:req-choice url=’http://www.facebook.com/Happytime’ label=’Accepter’ /> ">
3. <div style="padding-bottom: 10px;">
4. <fb:multi-friend-selector condensed="true" style="width:100%;" />
5. </div>
6. <fb:request-form-submit />
7. </fb:request-form>

Exemple de cadre d’invitation « par nom » :

Cadre « par icône » :

1. <div style="background-color: #D2D9E9">
2. <center>
3. <fb:request-form
4. method="post"
5. type="Kriisiis.fr"
6. invite="true"
7. content="Découvrez Kriisiis.fr, le Blog qui propose des outils, conseils et de l’actualité au sujet des réseaux sociaux !<fb:req-choice url=’http://www.facebook.com/Kriisiisfr’ ‘ label=’GO’ /> ">
8. <fb:multi-friend-selector actiontext="Faites découvrir Kriisiis.fr à vos amis" rows="3" cols="3" showborder="true";" />
9. </fb:request-form>
10. </center>
11. </div>

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 Analyticsdans 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é.

1. <fb:google-analytics uacct="UA-votrenuméro" />

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 :

1. <fb:swf swfbgcolor=“ffffff”  swfsrc=’http://www.votresite.com/flash.swf’ />

Donnée en .flv :

1. <fb:flv src=’http://www.votresite.com/video/video.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 contenushare-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 » :

1. <fb:share-button class="url" href="http://facebook.com/Kriisiisfr" />

Bouton de partage « complet » :

1. <fb:share-button>
2. <meta name="medium" content="news"/>
3. <meta name="title" content="Titredumessage"/>
4. <meta name="description" content="Descriptifrapidedumessage"/>
5. <link rel="target_url" href="Urlapartager"/>
6. </fb:share-button>

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.

1. <fb:board xid="votre xid" canpost="true" candelete="true" canmark="false" cancreatetopic="true" numtopics="5" returnurl="votre url">
2. <fb:title>Nom de votre entité ou sujet de discussion</fb:title>
3. </fb:board>

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 :

1. <fb:live-stream width="520" height="400" event_app_id="id de votre évènement">
2. </fb:live-stream>

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 baliseFBML et un peu de CSS (un grand merci à Pierre-Lou Dominjon alias @Pilou88 de Makehttp://adf.ly/7Jl0u MeReach pour son aide !).

1. <div style="height: 600px;">
2. <!– start non-fan part –>
3. <div style="margin-top:0px; position: absolute; height: 520px; top:0px;left:0px;width:100%;">
4. <img src="URL de votre première image" />
5. </div>
6. <!– end non-fan part –>
7. <fb:fbml version="1.1">
8. <fb:visible-to-connection>
9. <div style="margin-top:0px; position: absolute; height: 520px; top:0px;left:0px; background-color: #FFFFFF">
10. <img src="URL de votre seconde image" />
11. </div>
12. </fb:visible-to-connection>

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 changentautomatiquement lorsque vous modifiez votre avatar ou votre nom.

1. <fb:profile-pic uid="id du membre" size="normal" />
2. <fb:name uid="id du membre" />

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.

1. <fb:random>
2. <fb:random-option weight="2">A : Sera vu 2 fois plus régulièrement que B.</fb:random-option>
3. <fb:random-option weight="1">B : Sera vu 2 fois moins que A.</fb:random-option>
4. </fb:random>

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 ladocumentation 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 ladoc 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