Photographie de sports, photojournalisme et médias sociaux

Il y a quelques jours dans le post au sujet des différences entre les Profils, groupes et pages Facebook j’expliquais qu’il était possible de personnaliser (dans certaines limites) une page Facebook en utilisant le FBML.

Cette page personnalisée peut servir à expliquer au visiteur pourquoi il devrait devenir fan, lui proposer un concours, la dernière campagne de pub, …
Voici quelques petits exemples de pages personnalisées pour voir ce qu’il est possible de faire et s’inspirer.

Starbucks
image

Coca Cola : un contenu interactif permettant de compter des calories (affiché dans la langue de l’utilisateur), la possibilité de trouver la marque sur d’autres sites sociaux, …image

Red Bull : une page toute en simplicité pour inciter les visiteurs à devenir fans, à noter aussi toute une série d’autres onglets personnalisés pour présenter leurs athlètes, une webtv, …
image

En chipotant un peu et en connaissant un peu d’HTML ce n’est pas très compliqué de faire quelque chose de simple (pour arriver aux exemples ci-dessus il en faut un peu plus mais il faut bien commencer quelque part); il suffit de :

  1. Activer le FBML pour la page
  2. Ajouter le contenu
  3. Tester et admirer le travail
  4. Aller un peu plus loin

Explications plus détaillées dans les lignes qui suivent





Activer le FBML pour la page

La première chose à faire est d’activer la fonctionnalité FBML pour la page que l’on souhaite pouvoir personnaliser.
Pour cela il faut rechercher “static fbml” dans le champ de recherche en haut de page et sélectionner l’application
image

Une fois sur la page, il faut ajouter l’application à votre page en cliquant sur “ajouter à ma page”
image

Si vous gérez plusieurs pages, il faudra sélectionner la page pour laquelle vous souhaitez utiliser le FBML.

image

Allez ensuite sur votre page, un nouvel onglet FBML a du faire son apparition.
Cliquez sur “Modifier : Page” sous votre logo

Cliquez ensuite sur “Applications” dans le menu à gauche, puis sur “Accéder à l’application” pour l’application FBML (normalement en bas de page)

image

Vous vous retrouvez maintenant devant un magnifique formulaire vide qui vous permet de définir le contenu de la page
image

Et c’est la qu’il faut ajouter le contenu …

Ajouter le contenu de la page

Il suffit de taper le titre de l’onglet tel que l’on veut qu’il soit affiché dans Facebook, il vaut mieux le garder relativement court, et le texte qui doit être affiché.
Ce texte a une petite particularité, cela doit être du FBML, qui est très proche de l’HTML, il faut donc utiliser des codes pour le formater et le mettre en page.
Voici un exemple rapide pour afficher un titre et une image. Les ressources de la page (feuille de style, images, …) doivent provenir d’un serveur externe à Facebook, il faut donc indiquer les url complètes commençant par http://nomdusite/

image

Le contenu qui peut / doit se retrouver dans la page est en fait ce qui se trouve entre les tags <body> et </body> d’une page html normale. Si vous avez un éditeur de site web, vous pouvez regarder le code généré et vous en inspirer pour le code FBML.
Attention, il y a des différences entre HTML et FBML et le javascript n’est que partiellement supporté et pour s’exécuter il faut que l’utilisateur clique un bouton.
Le chargement d’une animation flash est possible via le tag FBML spécifique :
<fb:swf  swfsrc=’http://www.yoursite.com/flash/flash-file.swf’ imgsrc=’http://www.yoursite.com/images/flash-image.jpg’ width=’500′ height=’408′ />

Pour les détails techniques, toutes les informations sont disponibles par la partie Facebook Developers

Certaines sociétés ont bien compris que même si une page personnalisée basique n’était pas très compliquée à faire, la rendre attractive n’est pas à la portée de tous. Il existe donc des services (payants) permettant de générer ce code FBML à votre place, c’est le cas notamment de http://www.splashtab.com/ ou http://www.faceitpages.com/
Sur base de modèles de présentation existants, vous pouvez ajouter vos textes et images et ils fournissent le code FBML à utiliser.

En étant un peu imaginatif dans ses recherches sur internet il est possible de trouver des modèles gratuits à adapter à vos besoins, voici quelques liens (en anglais désolé) :
http://www.facebookpagetemplates.com/free-facebook-templates.php
http://www.bloggermint.com/2010/08/3-free-fbml-templates-to-decorate-your-facebook-page/
http://fbml-templates.net/2010/10/7-free-facebook-page-templates/

Une fois le code tapé ou copié, n’oubliez pas d’enregistrer les modifications.

Tester et admirer le travail

Retournez maintenant sur votre page Facebook, vous devriez voir un onglet supplémentaire à coté de ceux pour le Mur, Infos, Photos, …
Le titre de mon onglet était Partenaires et ohhh miracle que vois-je … Sourire
image

Un pas plus loin

Tant qu’on est au chapitre personnalisation de la page Facebook, maintenant que vous avez créé et personnalisé ce nouvel onglet via FBML et que cela fonctionne, on peut essayer d’aller un peu plus loin.

Si vous avez créé une page page officielle ( càd celles pour les entreprises, marques, produits, …) vous pouvez configurer la page Facebook pour que l’onglet affiché par défaut soit celui qui est personnalisé et plus le mur.
!! Cette option n’est pas disponible pour les pages Communauté, uniquement pour les pages officielles (pour les entreprises, marques, produits, …).

Pour cela, il faut éditer la page en cliquant sur “Page : Editer” sous le logo, puis choisir gérer les permissions. Dans “Onglet affiché par défaut” se trouve la liste des onglets disponibles et on peut choisir celui qui sera affiché par défaut pour les personnes qui ne sont pas encore fan de la page ou qui ne sont pas connectées sur Facebook.
Une fois fan l’onglet par défaut redevient automatiquement le mur avec les publications / actualités.

image

Il est aussi possible de n’afficher un contenu que si les visiteurs de la page sont Fan.
Cela ne sert à rien de proposer à un Fan de devenir Fan, il l’est déjà. Ou vous pourriez vouloir proposer une information (avantage, réduction,…) uniquement aux Fans et pas à tout le monde.
Mais ça ce sera pour une prochaine fois …

Voici 2 exemples de pages personnalisées réalisées dans le cadre de ce post
Event-Pics : un onglet portfolio avec une galerie d’images en flash
http://www.facebook.com/eventpics?v=app_4949752878&ref=ts

VTT Rhisnes : une page partenaires toute simple avec une image pour les logos
http://www.facebook.com/vtt.rhisnes?v=app_4949752878&ref=ts

Bon amusement dans la personnalisation de votre page.

1 comment

June 4th, 2011

[…] et astuces | Relu avec intérêt un article de Frederic sur Event-pics.be au sujet de la création d’une fan page personnalisée sur […]

leave a comment