
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 :
-
<form action="http://www.happybox.fr/index.asp?page=mailling" name="r69TneeArNewsValue" method="post" style="margin: 0pt; padding: 0pt;" target="_blank">
-
<input gtbfieldid="93" name="email" value="Votre email" onclick="this.value= »;" class="Module" style="width: 140px;">
-
<input type="submit" value="s’inscrire" class="Bouton">
-
</form>
Newsletter via Feedburner :
-
<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">
-
<p><input type="text" style="width:140px" value="Votre email" name="email"/></p>
-
<input type="hidden" value="kriisiisfeed" name="uri"/>
-
<input type="hidden" name="loc" value="fr_FR"/>
-
<input type="submit" value="s’inscrire" />
-
</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 » :
-
<fb:fbml>
-
<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’ /> ">
-
<div style="padding-bottom: 10px;">
-
<fb:multi-friend-selector condensed="true" style="width:100%;" />
-
</div>
-
<fb:request-form-submit />
-
</fb:request-form>
Exemple de cadre d’invitation « par nom » :

Cadre « par icône » :
-
<div style="background-color: #D2D9E9">
-
<center>
-
<fb:request-form
-
method="post"
-
type="Kriisiis.fr"
-
invite="true"
-
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’ /> ">
-
<fb:multi-friend-selector actiontext="Faites découvrir Kriisiis.fr à vos amis" rows="3" cols="3" showborder="true";" />
-
</fb:request-form>
-
</center>
-
</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 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é.
-
<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 :
-
<fb:swf swfbgcolor=“ffffff” swfsrc=’http://www.votresite.com/flash.swf’ />
Donnée en .flv :
-
<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 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 » :
-
<fb:share-button class="url" href="http://facebook.com/Kriisiisfr" />
Bouton de partage « complet » :
-
<fb:share-button>
-
<meta name="medium" content="news"/>
-
<meta name="title" content="Titredumessage"/>
-
<meta name="description" content="Descriptifrapidedumessage"/>
-
<link rel="target_url" href="Urlapartager"/>
-
</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.
-
<fb:board xid="votre xid" canpost="true" candelete="true" canmark="false" cancreatetopic="true" numtopics="5" returnurl="votre url">
-
<fb:title>Nom de votre entité ou sujet de discussion</fb:title>
-
</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 :
-
<fb:live-stream width="520" height="400" event_app_id="id de votre évènement">
-
</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 balise FBML et un peu de CSS (un grand merci à Pierre-Lou Dominjon alias @Pilou88 de MakeMeReach pour son aide !).
-
<div style="height: 600px;">
-
<!– start non-fan part –>
-
<div style="margin-top:0px; position: absolute; height: 520px; top:0px;left:0px;width:100%;">
-
<img src="URL de votre première image" />
-
</div>
-
<!– end non-fan part –>
-
<fb:fbml version="1.1">
-
<fb:visible-to-connection>
-
<div style="margin-top:0px; position: absolute; height: 520px; top:0px;left:0px; background-color: #FFFFFF">
-
<img src="URL de votre seconde image" />
-
</div>
-
</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 changent automatiquement lorsque vous modifiez votre avatar ou votre nom.
-
<fb:profile-pic uid="id du membre" size="normal" />
-
<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.
-
<fb:random>
-
<fb:random-option weight="2">A : Sera vu 2 fois plus régulièrement que B.</fb:random-option>
-
<fb:random-option weight="1">B : Sera vu 2 fois moins que A.</fb:random-option>
-
</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 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]
- Les 10 fonctionnalités intégrées à la Fan-Page Facebook de Kriisiis.fr
- 20 étapes pour créer et animer une Fan-Page Facebook (Partie 1 sur 2)
- Tout sur le nouveau Diaspora : design, fonctions, et 5 invitations à gagner
- Suivez la conférence #LeWeb édition 2010 en direct sur Kriisiis.fr
- Gagnez 2 places pour l’avant-première du film The Social Network avec Sony
-
http://narominded.com Genaro
-
http://twitter.com/tregor yvain ducrocq
-
http://twitter.com/WebmarketingCOM Webmarketing & co’m
-
http://www.clairebingo.fr Claire Bingo
-
Manu B
-
Romain Boyer
-
Romain Boyer
-
http://twitter.com/matthieublanco Matthieu Blanco
-
http://www.netcrema.com/?p=50447 10 éléments à intégrer dans des onglets FBML de votre Fan-Page Facebook | « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
-
http://popurls.com/pop === popurls.com === popular today
-
http://blogasty.com/billet/389704-via-kriisiis Kriisiis sur Blogasty
-
http://popular.econsultant.com/10-elements-a-integrer-dans-des-onglets-fbml-de-votre-fan-page-facebook/ 10 éléments à intégrer dans des onglets FBML de votre Fan-Page Facebook | : Popular Links : eConsultant
-
Anonyme
-
Anonyme
-
Anonyme
-
Anonyme
-
Anonyme
-
Anonyme
-
Anonyme
-
http://narominded.com Genaro
-
http://twitter.com/tregor yvain ducrocq
-
http://twitter.com/WebmarketingCOM Webmarketing & co'm
-
http://twitter.com/WebmarketingCOM Webmarketing & co'm
-
http://www.clairebingo.fr Claire Bingo
-
Manu B
-
Romain Boyer
-
Romain Boyer
-
http://twitter.com/matthieublanco Matthieu Blanco
-
Kriisiis
-
Kriisiis
-
Kriisiis
-
Kriisiis
-
Kriisiis
-
Kriisiis
-
Kriisiis
-
Kriisiis
-
http://www.metaverse3d.com/2010/09/07/links-for-2010-09-06/ links for 2010-09-06 | Metaverse3d.com
-
http://twitter.com/norolanto Norolanto
-
Clement Picou
-
Anonyme
-
Anonyme
-
Clement Picou
-
http://twitter.com/norolanto Norolanto
-
Clement Picou
-
Kriisiis
-
Kriisiis
-
Clement Picou
-
Francois Besson
-
http://twitter.com/Juritravail Juritravail
-
Anonyme
-
Anonyme
-
Anonyme
-
Clement Picou
-
Clement Picou
-
Anonyme
-
Anonyme
-
Anonyme
-
Anonyme
-
Clement Picou
-
Francois Besson
-
http://twitter.com/Juritravail Juritravail
-
Kriisiis
-
Kriisiis
-
Kriisiis
-
Clement Picou
-
Clement Picou
-
vinblog
-
Kriisiis
-
Kriisiis
-
Kriisiis
-
Clement Picou
-
http://twitter.com/WebmarketingCOM Webmarketing & co’m
-
Anonyme
-
http://twitter.com/WebmarketingCOM Webmarketing & co'm
-
http://twitter.com/WebmarketingCOM Webmarketing & co'm
-
Kriisiis
-
Jey2106
-
http://twitter.com/Juritravail Juritravail
-
Jey2106
-
http://twitter.com/Juritravail Juritravail
-
http://prix-immobilier.info Priximmobilier
-
http://prix-immobilier.info Priximmobilier
-
http://www.emarketinglicious.fr/marketing-internet/revue-de-presse-e-marketing-semaine-n%c2%b0-36-2010 Revue de Presse E-marketing Semaine n° 36 | 2010 | Emarketinglicious.fr
-
Johann
-
http://www.lepaille.fr/september-13th-cette-semaine-sur-le-net/ September 13th : Cette semaine sur le net…
-
Johann
-
http://twitter.com/daisyrondelle Baltazar Green
-
http://twitter.com/daisyrondelle Baltazar Green
-
http://twitter.com/herbert_west1 herbertwest
-
http://twitter.com/herbert_west1 herbertwest
-
http://twitter.com/daisyrondelle Baltazar Green
-
http://twitter.com/daisyrondelle Baltazar Green
-
http://www.bistrodespronos.fr Ju
-
http://www.bistrodespronos.fr Ju
-
FAdi
-
http://www.blog-etourisme.com Mathieu Bruc
-
FAdi
-
http://www.blog-etourisme.com Mathieu Bruc
-
bruno
-
bruno
-
Elie
-
Elie
-
http://twitter.com/espacenumerique Espace Numerique 38
-
Sara
-
Sara
-
Xav
-
Xav
-
http://pulse.yahoo.com/_JT7BFS5VNY3GDO6USMEOADZLEA Mounia
-
http://pulse.yahoo.com/_JT7BFS5VNY3GDO6USMEOADZLEA Mounia
-
http://www.ukintch.fr/2010/11/veille-9-novembre/ U:Kintch » Veille 9 Novembre
-
Littlelo
-
Littlelo
-
http://blog.boiteux.net/2010/11/26/configurez-une-landing-page-sur-facebook/ Le Blog de Nicolas Boiteux » Blog Archive » Configurez une Landing Page sur Facebook
-
http://www.courrierblog.com/2010/11/27/10-elements-a-integrer-dans-des-onglets-fbml-de-votre-fan-page-facebook/ 10 éléments à intégrer dans des onglets FBML de votre Fan-Page Facebook – Courrier Blog
-
http://www.kriisiis.fr/index.php/20-etapes-pour-creer-et-animer-une-fan-page-facebook-partie-1-sur-2/ 20 étapes pour créer et animer une Fan-Page Facebook (Partie 1 sur 2) |
-
Damien
-
Steph
-
Damien
-
Steph
-
Kzaking
-
Newikwoodbird
-
Newikwoodbird
-
GsxR03100
-
Newikwoodbird
-
Newikwoodbird
-
GsxR03100
-
Création DLN
-
Création DLN
-
http://blog.loicg.net/autour-dun-cafe/la-veille-du-week-end-dixieme/ La veille du week-end (dixième) | LoïcG
-
http://www.kriisiis.fr/index.php/joyeux-noel-selection-de-plus-de-1-600-ressources-sur-kriisiis-fr-en-2010/ Joyeux Noël ! Sélection de plus de 1.600 ressources sur Kriisiis.fr en 2010 |
-
http://twitter.com/loulize Louiz Hardi
-
http://twitter.com/loulize Louiz Hardi
-
LeSecretDesEléphants
-
LeSecretDesEléphants
-
http://twitter.com/Sik0 mauduit mikael
-
http://pulse.yahoo.com/_5BZ5HFASOBTBS3PGQWGO74TAW4 shiv
-
Kiamaru
-
wololo
-
Référencement Québec
-
http://www.facebook.com/people/Jules-Lamon/100000764040596 Jules Lamon
-
http://www.facebook.com/people/Jules-Lamon/100000764040596 Jules Lamon
-
Miko
-
Math
-
F Talluto
-
Tayou
-
Toto42
-
Tal_yb@hotmail.com
-
Tivanoo
-
Adb84
-
Fbmaxed.fr
-
Cyril
-
olivier
-
Constance
-
Constance
-
http://twitter.com/ComYeun Yeun Renambatz
-
http://www.facebook.com/jessica.liabeuf Jessica Liabeuf
-
http://www.facebook.com/zribiste Le Blanc Zribistien
-
Caroline
-
Groupes inscription
-
Groupes inscription
-
http://www.facebook.com/profile.php?id=100002348808736 Li Ly
-
Hayyam3ana
-
http://twitter.com/ibuzzyou IBuzzyou
-
Cseb21
-
http://www.facebook.com/mickael.lovesarah Mickael Uytterhaegen
-
Pierre Morellet
-
chris
-
Tangsgod
-
Rfiv
-
http://pleurer2rire.wordpress.com/ pleurer 2 rire
-
http://www.facebook.com/sura.boy1 Sùrà CraZzy Péèsoss





