Comment faire une Fan Page FaceBook






FaceBook propose une application Static FBML qui permet d’insérer du code FBML dans un onglet (tab) de votre fan Page.
Comme je préfére les onglets, qui me paraissent plus visibles, que le menu de la nouvelle version des fans pages, voici comment retrouver des onglets dans une page « bienvenue » (Home).
Cette page d’accueil sera composé de plusieurs onglets qui permetrront de naviguer dans cette page.

1- Tout d’abord il faut ajouter l’application static FBML à votre page go to the Static FBML application;
2- Ajouter l’application à votre page
3- Editer la Page et dans l’application Static FBML cliquer sur Edit (Accéder à l’application)
4- Donner un titre à votre onglet et insérer le code FBML
5- Régler votre page pour indiquer la page d’accueil

Comment insérer des onglets (tabs) en FBML. Un exemple de codes avec 4 onglets de navigation :

<!-- navigation elements -->
<a class="large blue awesome" href="#">Home</a>
<a class="large blue awesome" href="#">Tab2</a>
<a class="large blue awesome" href="#">Tab3</a>
<a class="large blue awesome" href="#">About</a>
 
<!-- Content to display when user clicks on the Home tab -->
<div id="nav1">
Homepage text</div>
<!-- Content to display when user clicks on the Specials tab -->
<div id="nav2" style="display: none;">
Tab2 text</div>
<!-- Content to display when user clicks on the Locations tab -->
<div id="nav3" style="display: none;">
Tab3 text</div>
<!-- Content to display when user clicks on the About tab -->
<div id="nav4" style="display: none;">
About text</div>

Pour avoir de beaux boutons, on va reprendre l’article précédent sur les boutons en CSS3 et RGBA
Pour cela on insérera le style suivant :

.awesome, .awesome:visited {
	background: #222 url(images/alert-overlay.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}
 
	.awesome:hover							{ background-color: #111; color: #fff; }
	.awesome:active							{ top: 1px; }
	.small.awesome, .small.awesome:visited 			{ font-size: 11px; padding: ; }
	.awesome, .awesome:visited,
	.medium.awesome, .medium.awesome:visited 		{ font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
	.large.awesome, .large.awesome:visited 			{ font-size: 14px; padding: 8px 14px 9px; }
 
	.green.awesome, .green.awesome:visited		{ background-color: #91bd09; }
	.green.awesome:hover						{ background-color: #749a02; }
	.blue.awesome, .blue.awesome:visited		{ background-color: #2daebf; }
	.blue.awesome:hover							{ background-color: #007d9a; }
	.red.awesome, .red.awesome:visited			{ background-color: #e33100; }
	.red.awesome:hover							{ background-color: #872300; }
	.magenta.awesome, .magenta.awesome:visited		{ background-color: #a9014b; }
	.magenta.awesome:hover							{ background-color: #630030; }
	.orange.awesome, .orange.awesome:visited		{ background-color: #ff5c00; }
	.orange.awesome:hover							{ background-color: #d45500; }
	.yellow.awesome, .yellow.awesome:visited		{ background-color: #ffb515; }
	.yellow.awesome:hover							{ background-color: #fc9200; }

Pour insérer du Flash ou une video au format flv :

    <fb:swf swfbgcolor=”ffffff”  swfsrc="http://www.votresite.com/flash.swf" width="380" height="250" />
 
(FLV video)
 
    <fb:flv src="http://www.votresite.com/video-gallery/video.flv" />
 
(Image)
 
 
    <img src=”http://www.yoursite.com/image.jpg” />

Voici donc ma page FaceBook avec un onglet Blog qui est la lecture du flux RSS de ce blog et un onglet mirphone qui utilise le lecteur podcast, radios, webtv, vidéos YouTube de mirPod.

L’API de faceBook étant trés buggé cette page ne fonctionne bien que pour FireFox. Bientôt faceBook va changer son API et nous promet de simplifier la mise en oeuvre des pages de fans.






Tags: ,

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • RSS

Si vous avez apprécié cet article, s’il vous plait, prenez le temps de laisser un commentaire
ou de souscrire au flux afin de recevoir les futurs articles directement dans votre lecteur de flux.

7 Réponses pour “Comment faire une Fan Page FaceBook”

  1. […] This post was mentioned on Twitter by Facebook Actu Chaude and Medias Sociaux, Jerome Bruyant. Jerome Bruyant said: Blog de Jordi Mir : » Comment faire une Fan Page FaceBook http://bit.ly/hZdMKC […]

  2. Sophie dit :

    Bonjour,
    J’essaie d’ajouter une image à un onglet en FBML et je ne sais pas où stocker l’image. Que dois-je mettre dans « src » ?
    Mon, image est enregistrée dans un album photo de ma page mais je ne sais pas comment y accéder.
    Merci pour votre aide
    Sophie

  3. Jordi dit :

    mettre le chemin complet vers votre site. Faites clic droit sur votre image et vous aurez l’adresse

  4. rapra climst dit :

    Bonjour!

    Je voudrais faire une menu comme cette page et j’ai réussi mais comment faire le lien pour ouvrir le menu comme cette page? de code javascript ou php dans le FBML

  5. Jordi dit :

    Vous pouvez regarder la doc en référence clicktoshow … Mais maintenant il vaut mieux passer en iframe :
    http://www.jordimir.com/2011/02/15/votre-fan-page-facebook-iframe/

  6. Hi there .. Great post .. It is interesting and informative .. great job 🙂 I’d like to see more interesting content like this .. 🙂

    You can also visit this interesting site:
    Fan Page and Fan Page Guide

  7. Ana dit :

    Bonjour,
    J’ai utilisé une nouvelle application pour crée ma page Facebook.
    C’est un constructeur qui permet de créer une boutique en ligne avec différents modes de paiement (Paypal, Transférence bancaire, etc…) pour une Fanpage Facebook.
    J’ai été très surprise de voir la simplicité de la plate-forme, et en plus, il existe une Version Free disponible!
    http://fr.build4fans.com/

Laisser un Message