RGBA color space tag archives

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.


web2.0     Étiquettes : ,