Customiser une Fan Page Facebook
20 fév 2011 19 Comments
in Divers, Sites, tuto Tags: facebook, graphisme, template, tutoriel
Il y a peu, j’ai lancé un nouveau site entièrement dédié aux Smoothies . Pour la promotion de ce blog sur les recettes de smoothie, je me suis lancée dans les Fan Page de Facebook…
Pfff, l’usine à gaz ce truc ! , enfin bon, après avoir suivi les fumeuses explications de Facebook, j’ai enfin réussi a créer la Fan Page de Smoothie , à vous d’en faire une maintenant, grâce au tuto ci-dessous :petit aperçu de ma page fan une fois terminée :
Vous vous doutez bien qu’il a fallu la personnaliser pour en arriver là ! – Pour ceux que ça intéresse, je vais donc expliquer quelles procédures j’ai suivi pour customiser la Fan Page de Smoothie !
Dans un premier temps, pour créer une Fan page, c’est on ne peut plus simple, il suffit de cliquer là : Créer une page fan, une fois la page créée et les diverses informations renseignées, passons à l’étape customisation.
Dans modifier les infos, sélectionnez applications et ajoutez à la page l’application FBML, car c’est dans cette application que nous allons ajouter le code destiné à customiser la page fan et la faire pointer comme page d’accueil pour les visiteurs. Le principe est simple, et les bons codeurs auront vite fait de prendre en main ces lignes de code, pour créer un sympathique template vraiment personnel 
Bon, on continu ?
N’étant pas vraiment ce que l’on peut appeler une bonne codeuse, j’ai fait pas mal de recherches sur internet pour trouver un support gratuit à exploiter et modifier (car ça, je sais faire, et Photoshop est un super copain 
), et j’ai trouver ça, un PSD + code et explications vraiment bien, que vous pouvez télécharger en allant sur cette page : Template FBml pour Facebook (vous pouvez d’ailleurs voir en illustration jointe, l’aspect original du template, avant que je le modifie).
Le template : j’ai ouvert le dossier images, re-créer les images dont j’avais besoin grâce à Photoshop, selon ma thématique de sur les smoothies (à vous de voir si vous avez besoin d’en modifier d’autres) :
- bg.jpg
- welcome.png
- about.png
- logo.png
- img1.jpg
Et j’ai écrasé les anciennes images, puis tout uploadé tout le fichier images dans un fichier facebook/images/ créé exprès sur un de mes sites.
Le code maintenant :
Fourni dans le dossier téléchargé sur le site, je l’ai ouvert avec mon logiciel d’édition html (bon, moi j’ai Dreamweaver, mais d’autres ont Notepad++, ou Ultra edit) , et là j’ai modifié le code avec mes petits doigts (bah ouais, je suis petite 
) !
J’ai donc remplacé toutes les adresses pour les images, par le chemin du site où je les hébergeait, puis j’ai modifié le CSS, le contenu, les textes, les liens (en pensant bien à mettre rel= »dofollow » , pour rendre ma page un peu plus SEOfriendly, – le FBml permettant d’avoir de vrai liens en dofollow ).
Une fois toutes les modifications apportées, j’ai copié tout le code dans l’encart FBml, donné un titre à ma page (bienvenue) puis enregistré le tout.
Page d’accueil
Il ne reste plus qu’à diriger les visiteurs sur cette page, et pour celà, il suffit tout simplement de retourner sur les modifications de la page, puis de sélectionner gérer les permissions, et dans le menu déroulant, choisir « le nom que vous avez donné à votre FBml » et le tour est joué
A vous désormais de faire vivre cette page. Moi j’ai ajouté la « Like Box » sur mon site de smoothie . Si vous avez apprécié ce tuto, n’hésitez pas à AIMER ma fan page et/ou laisser un commentaire
mar 27, 2011 @ 20:27:35
http://www.devquotes.com/2011/03/20/how-to-create-a-facebook-page-dynamically-translated/
Voilà une lien/tut qui peut s’avérer intéressant.
mar 08, 2011 @ 23:54:34
Bonjour,
Comment avez vous fait pour changer la couleur de fond du template avec dreamweaver ?
Cordialement,
Hugo
mar 09, 2011 @ 12:29:08
En modifiant le code couleur CSS du Bg
fév 23, 2011 @ 16:04:18
Très bon tutoriel mais il ne sera plus valable a partir du mois de Mars 2011, enfin je tiens a préciser .
Si vous suivez ce tutoriel pour créer votre page en FBML avant le 10 Mars c’est OK!
Par contre après le 10 Mars 2011 ce tutoriel ne sera plus valable pour ceux qui voudront créer leur page FBML car facebook passe au iframe.
fév 23, 2011 @ 19:02:21
Merci
Je ne le savais pas quand j’ai fait le tuto, c’est dommage, mais bon, ça me donnera l’occasion d’en faire un autre pour les iframes .
Sucette, TchupaLe 11 Mars pour être précis
fév 23, 2011 @ 03:39:51
Sympa le petit tuto, très bien expliqué ! Je ne savais justement pas qu’il était possible de personnaliser le fond de la page, merci pour cette découverte
fév 22, 2011 @ 13:45:12
J’ai reçu votre lien par un de mes fans sur Facebook. Bravo
Très bonnes explications, utiles, concrètes et drôles en plus. C’est pas du jargon mais du vécu ! J’aime BEAUCOUP !
fév 21, 2011 @ 12:17:04
Beau boulot! J’aime bien le résultat final!
Tu peux aussi te servir tes fonctionnalités du nouveau profil pour faire des trucs sympas: http://www.topito.com/top-hack-profil-facebook-photo
fév 21, 2011 @ 16:01:56
Il y a une application que fait ça d’ailleurs : magic profile
fév 21, 2011 @ 11:50:33
Sympa l’article, c’est cool de pouvoir trouver des templates déjà fait pour les pages facebook. J’espère que les templates passent aussi avec les iframes sinon il va falloir tout refaire…
Tu as des applications à conseiller à ajouter sur les pages fans ?
fév 21, 2011 @ 15:42:27
Pour les Iframes, je n’en sais rien encore, et pour les applications, à chacun de voir ce dont il a besoin
fév 21, 2011 @ 11:07:42
Petit détail, l’attribut « dofollow » n’existe pas
fév 21, 2011 @ 15:41:03
… Et pourtant, si tu ne le mets pas, ton lien est en nofollow, comment expliques-tu cela ? Après pas mal de recherches et un essai : la rel= »Dofollow », qui n’est effectivement pas un attribut au sens propre du terme, fonctionne en supprimant tout simplement le Nofollow attribué par défaut sur Facebook
fév 21, 2011 @ 18:41:45
Si tu regardes le code source généré par Facebook, tu verras que ça ne sert à rien.
Le contenu de la page s’affiche en javascript, non interprété par les bots.
Tweets that mention Customiser une Fan Page Facebook | Papilouve -- Topsy.com
fév 21, 2011 @ 02:47:27
[...] This post was mentioned on Twitter by Audrey, Audrey, luptidej, David C, fred and others. fred said: RT @Papilouve: [TUTOS]Comment customiser facilement une Fan Page Facebook http://t.co/duUqc6A #template #FBml #fanpage [...]
fév 20, 2011 @ 22:09:08
Il me semble que depuis quelques jours facebook abandonne le fbml et va autoriser les iframes pour customiser ses fanpages…
fév 20, 2011 @ 22:26:25
Pour l’instant cela ne pose pas de problème, mais merci pour l’info
fév 20, 2011 @ 21:09:57
Merci pour ce petit article sympa
Je vais faire ma page fan facebook grace a ton article
Chris (Tiger balm)
fév 20, 2011 @ 20:37:53
Une belle réussite !! Merci pour le partage et cette belle explication !!!