Loading...
web2.0

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 :


Home
Tab2
Tab3
About








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 :

    

(FLV video)

    

(Image)


    

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.


7 comments
  1. Sophie

    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

  2. rapra climst

    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

  3. Timothy Stephen

    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

  4. Ana

    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 commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *