Le FBML et les formulaires
Dans ce tutoriel nous allons voir comment faire des formulaires tout beaux tout propres avec le FBML.
Mon formulaire façon facebook
Bien sur vous pouvez toujours utiliser le HTML pour faire vos formulaires, mais le FBML nous facilite la tache.
Puisqu’en quelque balise le formulaire se génère automatiquement avec la mise en forme facebook.
<fb:editor >
C’est avec cette balise que nous allons déclarer notre formulaire.
Attribut obligatoire :
action: l’adresse ou le formulaire va rediriger l’utilisateur.
Attributs facultatifs :
width : la taille maximal d’un champ (par défaut : 425).
labelwidth : la taille maximal de la nomination du champ(par défaut : 75).
Pour ce tutoriel nous allons dire que nous voulons faire un formulaire ou l’utilisateur peut donner un avis sur les derniers films qui sont parus au cinéma. (je sais, l’exemple est bateau, mais j’arrive pas à trouver mieux 
)
La base de notre formulaire va donner ça :
<fb:editor action="?monavis" labelwidth="100"> </fb:editor>
Dans un premier temps, l’utilisateur va devoir entrer son pseudo.
Pour ceci, nous allons utiliser la balise <fb:editor-text >
Attributs facultatifs :
label : le libellé du champ.
name : le nom du champ.
value : la valeur par défaut du champ.
maxlength : la taille maximum du champ.
Donc pour nous ça sera :
<fb:editor action="?lasuite" labelwidth="100"> <fb:editor-text label="pseudo" name="pseudo" value="mon pseudo"/> </fb:editor>
en visuel :
api facebook
Maintenant nous allons rajouter une liste déroulante, composée d’une liste de film avec la balise <fb:editor-custom>.
Attributs facultatifs :
label : le libellé de la liste déroulante.
id : identifiant de la liste déroulante.
<fb:editor-custom label="film"> <select name="state"> <option value="1" selected>La Folie des grandeurs</option> <option value="2">Slumdog Millionaire</option> <option value="3">Seraphine</option> <option value="4">L'Etrange histoire de Benjamin Button</option> <option value="5">Nos enfants nous accuseront</option> </select> </fb:editor-custom>
une petite visualisation :
api facebook
Notre utilisateur va pouvoir maintenant ajouter des commentaires aux film qu’il a sélectionné.
On va utilisé la balise <fb:editor-textarea>.
Attributs facultatifs :
label : le libellé de la textarea.
name : le nom de la textarea.
rows : la longueur en ligne de la textarea.
<fb:editor-divider/> <fb:editor-textarea label="commentaire"> mes commentaires </fb:editor-textarea>
Pour aérer votre formulaire vous pouvez utiliser la balise <fb:editor-divider/>
Notre formulaire commence à ressembler à quelque chose
api facebook
Champs automatique
L’utilisateur pourra renseigner la date ou il a vue le film. (si il a mit un commentaire c’est qu’il a dû voir le film ^^)
Pour ceci on a besoin de <fb:editor-date>.
Attribut obligatoire :
label: le libellé du champ.
value: la date par défaut (attention on doit indiquer un timestamp).
<fb:editor-date label="j'ai vu le film le " value="5419000" />
Comme vous le voyez, facebook a pris le temps de traduire les mois, mais il n’a toujours pas compris
qu’en France la date commence par les jours et non pas par les mois (oui, je râle pour pas beaucoup).
api facebook
Bon si je ne suis pas content je peux toujours utilisé la balise <fb:editor-month≶
Attributs facultatifs :
label : le libellé de la liste déroulante.
name : le nom de la liste déroulante.
value : valeur de la liste déroulante.
<fb:editor-month value="6" name="mois" label="mois"/>
Facebook nous offre aussi une liste déroulante prêt à porter pour l’heure avec la balise <fb:editor-time>.
Attributs facultatifs :
label : le libellé de la liste déroulante.
name : le nom de la liste déroulante.
value : valeur de la liste déroulante.
<fb:editor-time value="1185930724" name="time" label="a"/>
ce qui donne :
api facebook
Voila, nous avons fait le tour des champs que nous propose le FBML.
Il ne manque plus que le bouton de soumission.
Il faut savoir que les boutons doivent se situer dans la balise
<fb:editor-buttonset>
Pour le bouton de soumission ce n’est pas compliqué, il faut utiliser la balise <fb:editor-button>.
Attribut obligatoire :
value: le nom du bouton de soumission.
Attributs facultatifs :
optional: la valeur du bouton de soumission.
Le FBML à ajouter aussi un autre bouton via la balise <fb:editor-cancel>
Attributs facultatifs :
value: le nom du lien.
href: l’adresse du lien.
En code cela donne :
<fb:editor-buttonset> <fb:editor-button value="Valider"/> <fb:editor-cancel value="Quitter" href="http://www.facebook.com"/> </fb:editor-buttonset>
On voit que facebook n’a pas pensé à nous, petit français, en effet il n’a pas traduit le mot ‘or’.
Dommage, mais ce n’est pas grave, le bouton cancel peut être très facilement remplacé par un lien du type <a href
api facebook
Voici ce que devrait donner notre code au final.
<fb:editor action="?lasuite" labelwidth="100">
<fb:editor-text label="pseudo" name="pseudo" value="mon pseudo"/>
<fb:editor-divider/>
<fb:editor-custom label="film">
<select name="state">
<option value="1" selected>La Folie des grandeurs</option>
<option value="2">Slumdog Millionaire</option>
<option value="3">Seraphine</option>
<option value="4">L'Etrange histoire de Benjamin Button</option>
<option value="5">Nos enfants nous accuseront</option>
</select>
</fb:editor-custom>
<fb:editor-divider/>
<fb:editor-textarea label="commentaire">
mes commentaires
</fb:editor-textarea>
<fb:editor-divider/>
<fb:editor-date label="j'ai vu le film le " value="5419000" />
<fb:editor-divider/>
<fb:editor-time value="1185930724" name="time" label="a"/>
<fb:editor-divider/>
<fb:editor-buttonset>
<fb:editor-button value="Valider"/>
<fb:editor-cancel value="Quitter" href="http://www.facebook.com"/>
</fb:editor-buttonset>
</fb:editor>
Et pour donner un résultat époustouflant 
api facebook
Mon petit mot pour la fin :
Comme vous l’avez remarqué, le FBML permet assez facilement d’afficher du contenu avec le style facebook.
Le code est clair et facile à reprendre. Ce qui est dommage c’est que le FBML est mal adapté pour les français.
Certaines balises font apparaitre « en dur » du texte anglais impossible à changer. Il faut juste espérer que l’api facebook corrigera ce petit défaut dans les quelques temps avenir.
Voila la partie FBML est terminée, je n’aurai pas eu le temps de voir toutes les balises que nous proposent ce langage.
Voici la liste exhaustive. Normalement vous devriez pas avoir trop de difficulté à comprendre les autres balises.
Si vous avez des interrogations sur certaines balises que j’aurai vu ou pas, n’hésitez pas à poster vos questions sur un commentaire.
Je ne suis pas toujours dernière mon ordinateur à rafraichir la page toutes les 5 secondes mais je pense pourvoir vous répondre assez rapidement
Note de l'article
(4 votes, moyenne: 3,50 max : 5)
Loading ...
mars 11th, 2009 at 2 h 41 min
Juste un grand bravo suivie d’un merci pour vos articles tres utils ,
je vais essayer de faire ma 1er API facebook c’est pas gagner, j’essaye d’integrer directement a mon CMS, je vais voir comment faire pour faire du HTML .
mars 25th, 2009 at 15 h 01 min
je confirme
octobre 20th, 2009 at 8 h 50 min
Comment récupère-t-on les information?
Je ne vois pas à quel endroit cela se passe dans le script.
Merci.
octobre 21st, 2009 at 16 h 21 min
Tout est récupérable en $_POST['nom du champ'] comme en PHP !
décembre 11th, 2009 at 11 h 02 min
Merci pour ce code mais je ne comprends pas comment récupérer les réponses?
janvier 11th, 2010 at 16 h 54 min
Idem, je ne comprends pas comment récupérer les infos.
Et je ne suis pas expert en PHP…
Merci par avance
janvier 12th, 2010 at 10 h 32 min
Salut,
comme le dit si bien farabel.
« Tout est récupérable en $_POST['nom du champ'] comme en PHP ! »
dans la première balise
une fois que vous aurez cliquer sur « Valider » le formulaire va vous renvoyer dans la page défini dans la propriété action (dans l’exemple j’ai mis « lasuite »).
Mais pour toi, tu choisis ta page, si tu veux tu peux mettre nouvelle_page.php
et dans cette nouvelle_page.php tu récupère les infos à travers la variables globales $_POST
Si tu veux afficher cette variable il faut juste que t’utilise la commande var_dump de cette manière var_dump($_POST);
et la miracle tu envoie toutes les données que t’as envoyé, il n’y a plus qu’à les récupérer.
avril 17th, 2010 at 19 h 05 min
je me met FBML c’est plus simple qu’il y semble, en 1 jour avec mes connaissances html/php/mysql j’ai reussit a faire un script de petites annonces avec visualisation des posteurs … j’ai utilise ton tuto pour faire mon formulaire de postage … MERCI
avril 17th, 2010 at 19 h 07 min
PS/ Aussi ton site est cool plein d’infos web2 et en français
avril 18th, 2010 at 8 h 27 min
Bonjour !
je cherche à avoir le petit module pour que les gens laissent des commentaires comme celui que l’on trouve sous les statuts ou sous les photos. Je voudrais l’insérer dans le milieu de ma page FBML. Est-ce possible ? Et comment ?
Car l’option que tu propose plus haut est bien pratique, mais le souci est qu’il faut manuellement ajouter les commentaires sur la page.
A l’aide svp !!
avril 21st, 2010 at 19 h 09 min
Bonsoir Roul,
Tutoriel simple, clair et limpide. Ilpermet d etre immediatement operationnel. merci infiniment.
a tres bientot.
rh
mai 23rd, 2010 at 15 h 21 min
Quel est le tag pour demander un transfert de fichier?
juin 9th, 2010 at 18 h 56 min
Tu pense qu’il serait possible que tu nous mette en ligne un .zip avec le php complet pour pouvoir faire fonctionnez le formulaire ?
octobre 24th, 2010 at 18 h 17 min
Avec ce tutoriel (merci d’ailleurs il est parfait) serait il possible de publier dans un formulaire sous Google Docs ?
Merci
décembre 1st, 2010 at 14 h 32 min
Super tuto merci beaucoup, juste une petite question : Sur le problème de l’intégration des accents français dans une page fbml, il y aurait une solution actuellement ?