Customiser une Fan Page Facebook

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 :P ) !

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 ;)

Prev Next

20 Comments

  1. Fr@mboize
    mai 17, 2012 @ 20:46:14

    génial, mais avec le « journal » maintenant … comment qu’on fait ,
    je compte sur vous et vos précieux conseils tres bien expliqués et illustrés!;o)

    Répondre

  2. karimus
    mar 27, 2011 @ 20:27:35

    Répondre

  3. hugo
    mar 08, 2011 @ 23:54:34

    Bonjour,

    Comment avez vous fait pour changer la couleur de fond du template avec dreamweaver ?

    Cordialement,

    Hugo

    Répondre

  4. Tchupa
    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.

    Répondre

    • Papilouve
      fév 23, 2011 @ 19:02:21

      Merci Sucette, Tchupa :P
      Le 11 Mars pour être précis ;) 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 .

      Répondre

  5. Dates vacances
    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 :)

    Répondre

  6. Amaranthe
    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 !

    Répondre

  7. miu rennes
    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

    Répondre

  8. ergognome
    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 ?

    Répondre

    • Papilouve
      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 :)

      Répondre

  9. Watussi
    fév 21, 2011 @ 11:07:42

    Petit détail, l’attribut « dofollow » n’existe pas ;-)

    Répondre

    • Papilouve
      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 :)

      Répondre

      • Watussi
        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.

        Répondre

  10. 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 [...]

    Répondre

  11. Morgan
    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…

    Répondre

    • Papilouve
      fév 20, 2011 @ 22:26:25

      Pour l’instant cela ne pose pas de problème, mais merci pour l’info

      Répondre

  12. Baume du tigre
    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)

    Répondre

  13. Trouvea, services à la personne
    fév 20, 2011 @ 20:37:53

    Une belle réussite !! Merci pour le partage et cette belle explication !!!

    Répondre

Leave a Reply to Dates vacances

Cancel