Création d'une page de fan Facebook

La redaction
09-06-2010 14:33 par nobock
fbml or die, textarea rikiki et mise à jours foireuse :)

Après quelques heures de développement acharné, j'ai enfin crée ma page de fan facebook. Personnellement je ne suis pas un très grand utilisateur de facebook, surtout à cause des paramètres de confidentialité. Mais vu que ce site est publique, autant ajouter une page sur Facebook non ? Cette page réagie comme un mini site, ou j'ai essayé le plus possible de conserver le design original du site. Bien sur je me suis heurté à pas mal de problèmes car c'est très restreint, surtout au niveau du javascript.


Voulez vous aussi une page de fan ?


image liste introuvable Contactez moi pour un devis, et je vous ferais une page de fan facebook sur mesure.

Pour les plus bidouilleurs, je vais vous expliquez brièvement la marche à suivre pour obtenir un tel résultat. Quand j'aurai le temps, je publierai un vrai tutoriel, ainsi que des sources.

Matériels / Compétences requises :

image liste introuvable Un bloc note
image liste introuvable Connaissance en HTML + CSS + Javascript
image liste introuvable Maitriser un logiciel de retouche d'image
image liste introuvable Disposez d'un espace de stockage pour les fichiers ( recommandé )
image liste introuvable Avoir 4 ou 5 heures devant sois
image liste introuvable Avoir plein de cheveux pour ce les arracher
image liste introuvable Posséder un compte facebook et connaitre les rudiments
image liste introuvable Un navigateur au standard, avec une console de debug ( ex : firefox + firebug )

Avant de commencer dans la partie vraiment technique, je vais déjà lister la plupart des bugs qui peuvent survenir lors de la tentative de création d'une page facebook. Les bug sont très nombreux, et beaucoup d'autre chose pourront encore vous gêner, car le tout n'est vraiment pas user friendly.

image liste introuvable Les textarea pour entrer le code sont minuscule. Utilisez donc un plugin du style stylish sur firefox
image liste introuvable Si vous utilisez des fichier externe en css, donnez leur un nom différent à chaque fois que vous les modifiez. Je préconise donc d'écrire d'abord le texte en brut dans le textarea, et une fois que tout est bon, uploader votre fichier css. Travaillez en local, cela vous permettra d'avoir d'avantage de souplesse.

Dans le vif du sujet


Pour la bannière, il faut utiliser un code fbml qui va détecté si votre visiteur est un fan ou non. Si il est fan, rien ne s'affiche, et si il n'est pas fan, ça s'affiche. Pour le système de navigation par onglet, c'est du css3 bord rond qui est utilisé, et du javascript facebook pour le système de masque. On charge tout dans un div, qui possède 4 autre div. Chaque div est masqué, et ensuite affiché quand on clique sur le bouton.

Pour ce qui est du style, j'ai utiliser les même feuille de style que le site pour le contenu, et j'ai adapté le conteneur, pour facebook. Travailler dans un environnement qui utilise les même taille est un plus pour éviter de perdre du temps à s'adapter. Au niveau des url, utilisez des url absolue sinon vous aurez des problème. Certaines balise ne passe pas, comme par exemple la position, pour soucis de sécurité. Le reste est du bon vieux html.

Pour importer mes donnée, j'utilise firebug, et je copie le contenu html de ma page web, comme cette news par exemple. Je colle ensuite ce code au bon endroit dans l'éditeur de fbml, et automatiquement mes données sont formatées correctement. Si vous utilisez des objets de mise en page ( bbcode ), n'oubliez pas de le mettre dans la feuille de style.

Pour d'autre informations, visitez le wiki des développeur facebook : http://wiki.developers.facebook.com

image liste introuvable Visiter la page de fan : http://www.facebook.com/pages/Nobockfr
RETOUR