Les demandes d’ajouts

Nous allons commencer par faire les demandes d’ajouts.

api facebook mode bac à sable

Aussi, je vous conseille aussi de créer un deuxième compte plutôt que piquer celui de votre sœur

Nous allons donc créer une page de demande d’ajout.

Voici ce que l’on va mettre, les explications sont juste en-dessous :

<!-- demande d'ajout -->
<fb:fbml>
<fb:request-form action="index.php" method="POST" invite="true" type=" De Malade " content="Je suis sur que je te bats facilement au quizz."
<?php echo htmlentities("<fb:req-choice url=\"http://apps.facebook.com/waanser/\" label=\"J'accepte le défis\"") ?>" >
<fb:multi-friend-selector showborder="false" actiontext="Défie tes amis !">
</fb:request-form>
</fb:fbml>

Voilà ce que ça va donner :

facebook demande d'ajouts

Même si c’est long, on va y aller pas à pas :

action = « index.php »

Une fois le formulaire validé, l’application va nous rediriger vers la page index.php

method = « POST »

Tout comme les formulaires traditionnels, c’est la méthode d’envoie des données (POST ou GET)

invite = « true »

Pour indiquer que le formulaire est une invitation

type =  » De Malade « 

C’est le texte qui va s’afficher à la fin de l’entête de l’invitation

content = « Je suis sur …

Le contenu du message

<fb:req-choice

C’est pour créer un bouton

url = « http://apps.facebook.com/waanser/ »

L’url que redirige la fenêtre

label = « J’accepte le défis »

Le message sur le bouton

<fb:multi-friend-selector

La fenêtre où l’utilisateur choisit les amis à défier

Eh oui, facebook nous laisse la possibilité de tout paramétrer

Les fils d’actualités

Publier les fils d’actualités, est une des fonction phare de facebook.

Pour créer ces fils d’actualités, il faut dans un premier temps créer et enregistrer les maquettes d’évènements.

Pour enregistrer les maquettes de fils d’actualités c’est par ici.
Vous avez reconnu ? C’est la page boîte à outil que facebook propose pour les développeurs.

api facebook

Vous avez la possibilité de faire 2 types d’actualités :

• les actualités standards
• les actualités sur une ligne

Comment créer une maquette

Vous tombez sur un panneau d’administration, c’est avec ça que l’on va faire notre fameuse maquette.

Là, c’est la structure de votre maquette :

facebook template

On le devine tout seul, cette partie c’est le rendu :

rendu maquette facebook

Et enfin, c’est un exemple de données que l’on va appliquer dans la structure :

maquette facebook

exemple maquette facebook

Pour mieux comprendre, nous allons décomposer le message :

donnée : rouge
structure : vert
Julien maitrise l’histoire à 65%

Il savoir que facebook appel les données dynamiques ; un jeton.

Pour indiquer les données dynamiques, nous allons utiliser cette syntaxe : {*nom du jeton*}
La maquette va ressembler à ça :
{*actor*} maitrise {*theme*} à {*points*} %

erreur prévualsisation maquette

En fait, votre maquette est bonne ! Mais pour que la prévisualisation se passe bien, il faut lui fournir un jeu de données.

Et là Miracle ! ça fonctionne

{*author*} est un jeton par défaut que facebook met d’office pour afficher le nom de l’utilisateur.

L’actualité courte permet d’afficher des médias comme les images :

Pour afficher les images, il faut continuer dans la partie : Exemple de données de modèle

Voici la syntaxe :

{« images »:[{"src":"url de li'mage", "href":"la cible du lien"}

Voici un exemple :

{"images":[{"src":"http://media.waanser.com/2009/05/genie.png", "href":"http://apps.facebook.com/waanser/"}

Créer un lien d'action

Étape très importante, parce que c'est le lien qui va renvoyer l'utilisateur vers notre application.

api facebook lien d'action

URL de lien d’action : l’adresse de redirection du lien.

api facebook lien d'action

Vous avez plus qu’à passer à l’étape suivante, puis à cliquer sur enregistre le lot de modèles.
Facebook va alors vous donner un bundle id

Il faut bien le conserver, vous en aurez bientôt besoin.

Utilisez la maquette dans votre application

Nous allons commencer avec l’exemple le plus simple, celui où il y a qu’une seule ligne.

{« content »: {« feed »: {« template_id »:identifiant de la maquette , « template_data »: {« nom du jeton 1″: »valeur du jeton 1″, »nom du jeton 2″: »valeur du jeton 2″} } }, « method »: »feedStory » }

{« content »: {« feed »: {« template_id »:43745522324, « template_data »: {« points »: »65″, »theme »: »l’histoire »} } }, « method »: »feedStory » }

Le php propose une librairie pour manipuler le json, nous allons en bénéficier pour faire un beau feed json
facilement paramétrable.

$arr = array(
'content' => array(
'feed' => array(
'template_id' => 43745522324,'template_data' => array(
'points' => '65', 'theme' => 'l\'histoire'
)
)
),'method' => 'feedStory'
);

echo json_encode($arr);

Notification

Nous allons voir comment générer des notifications, rassurez-vous, c’est beaucoup plus simple que les fils d’actualités

Voici la syntaxe :

$oFacebook->api_client->notifications_send(DESTINATAIRE, MESSAGE, TYPE);

• app_to_user => L’expéditeur c’est l’application
• app_to_user => L’expéditeur c’est l’utilisateur enregistré r

Voici un exemple d’utilisation :

$oFacebook->api_client->notifications_send($iUid, 'some info', 'user_to_user');
$oFacebook->api_client->notifications_send($iUid, 'some info', 'app_to_user');

Le rendu :

api facebook notification

Et voilà vous avez tous les outils en main pour propager votre application.

Bonne propagation

Les statistiques avec la table Metrics

Si vous voulez vendre de la publicité dans votre site, ou tout simplement connaitre le traffic de votre gadget il essentiel de connaitre les statiques. Ces informations se trouvent dans la table Metrics.

Les statistiques se font sur une portion de temps. (ex : du 01/02/2009 au 01/03/2009).
Pour définir cette portion de temps à notre table Metrics, il faut définir 2 champs ; end_time et period .

end_time : la date de début de votre portion en timestamp
period : la durée en seconde de votre portion.

active_users : le nombre d’utilisateur unique
canvas_page_views : le nombre de page vue
unique_adds : le nombre de fois que votre application à été ajoutée.
unique_removes : le nombre de fois que votre application à été enlevée.
unique_blocks : le nombre de fois que votre application à été bloquée.
unique_unblocks : le nombre de fois que votre application à été débloquée.

C’est compliqué ? Je vais vous montrez un exemple.

$iTime = mktime(9, 0, 0, date('m')-1, date('d'), date('Y')); // il ya 1 moi en timestamp
$sQuery = 'SELECT end_time, period, active_users, canvas_page_views  FROM metrics WHERE end_time ='.$iTime.' AND period = 2592000';
$aStatInformation = $oFacebook->api_client->fql_query($sQuery);
// un affichage bête et méchant
echo'<pre>';
var_dump($aStatInformation);
echo'</pre>';

fql

Vous avez remarquez que l’on a pas récupérer ces quatre données unique_adds, unique_removes, unique_blocks, unique_unblocks.

C’est parce que facebook nous complique la tache.
En effet si on veut récupérer ces données il faut que la portion de temps soit d’un jour (et non d’un mois).
Pour récupérer ces données pour un mois on va faire un script à part :

$iDay = 1;// jour 1
$aResult = array('unique_adds' => 0,'unique_removes' => 0,'unique_blocks' => 0,'unique_unblocks' => 0);
while($iDay<31) // pour un mois
{	// on convertit notre date en time stamp
	$iTime = mktime(9, 0, 0, date('m'), date('d')-$iDay, date('Y'));
	$sQuery = 'SELECT unique_adds, unique_removes, unique_blocks, unique_unblocks  FROM metrics WHERE end_time ='.$iTime.' AND period = 86400';
	$aStatInformation = $oFacebook->api_client->fql_query($sQuery);
	if (is_array($aStatInformation)){//  on sotcke les infos
		foreach($aStatInformation[0] as $iKey => $iVal)
		{
			$aResult[$iKey]+=(int)$iVal;
		}
	}
	$iDay++;
}
// on affiche le résultat
echo'<pre>';
var_dump($aResult);
echo'</pre>';

Cibler les utilisateurs avec les tables fan et groups

Cibler les utilisateurs et un atout essentiel si vous voulez optimiser le rendement de vos pubs.
La table fan permet de savoir quel page l’utilisateur est fan.


Voici comment faire pour récupérer ces pages. (biensur on a besoin de l’id utilisateur)

//on récupère l'id de l'utilisateur
$sUser_id = $oFacebook->user;
//récupérer les id des pages
$sQuery = 'SELECT page_id, type FROM page_fan	 WHERE uid=' . $sUser_id.;
$aUserInformation = $oFacebook->api_client->fql_query($sQuery);

Les ids des pages nous parlent pas beaucoup. Mais ce n’est pas un problème, on va utiliser une autre table
pour récupérer les informations de ces pages.
La table page est une des plus grosses tables de facebook, voici ça structure.

Dans cet exemple nous allons récupérez l’essentiel (le nom, l’image représentative,le type, les informations générales et le nombre de page)

//on récupère l'id de l'utilisateur
$sUser_id = $oFacebook->user;

//on récupère les informations importantes
$sQuery = 'SELECT name, pic, type, website, general_info,  fan_count from, website page where page_id IN (SELECT page_id, type FROM page_fan	 WHERE uid=' . $sUser_id.')';  

$aUserInformation = $oFacebook->api_client->fql_query($sQuery);

Rien de particulier sur cette table, on y accède de la même manière que pour la page fan :

//on récupère l'id de l'utilisateur
$sUser_id = $oFacebook->user;

// on récupère les informations du groupe
$sQuery = 'SELECT name, pic, description, group_type, group_subtype, website from group where gid IN (SELECT gid FROM group_member WHERE uid=' . $sUser_id.')';  

$aUserInformation = $oFacebook->api_client->fql_query($sQuery);

Les permissions avec la table Permissions

Comme son nom l’indique, la table permissions va nous dire ce que notre gadget peut ou pas faire.
Dans cette table ce qui va nous intéresser, c’est de savoir si on peut leur envoyer des sms ou des mails.
ps : si on a l’autorisation, ce n’est pas une bonne raison pour faire du spam

Voici la requête :

//on récupère l'id de l'utilisateur
$sUser_id = $oFacebook->user;

// les permissions pour l'envoi de mail et de sms
$sQuery = 'SELECT email, sms FROM permissions WHERE uid=' . $sUser_id;  

$aUserInformation = $oFacebook->api_client->fql_query($sQuery);

Pour avoir la permission il faut utiliser le fbml. plus précisément la balise <fb:prompt-permission>

L’attribut perms est obligatoir puisque c’est lui qui va définir quelle autorisation à accorder. (pour nous ça sera sms et mail)

<fb:prompt-permission perms="email">Autorisez vous l'application a envoyez des mails</fb:prompt-permission>

Si l’utilisateur clique sur le lien, une fenêtre devrait apparaître :

apifacebook

Voila nous avons fait le tour des données clé de l’api facebook. A travers ces exemples on a pu voir le fonctionnement de la base de données facebook. Comme je vous l’ai déjà dit, chaque donnée a son utilité, et c’est en fonction de vos projet que vous allez devoir choisir les données à récupérer. Le choix des données est une étape très importante, parce que vous pouvez manquez une information importantes ou alourdir votre base pour rien (à l’échelle de milliers d’utilisateurs, cela peut venir vite une catastrophe).

Dans ce tutoriel, il est nécessaire d’avoir des bases en SQL.

Le FQL qu’es-ce ce que c’est ?

On pourrait dire que le FQL c’est le SQL de facebook. Mais en fait, bien qu’il ressemble au sql il n’en est rien, parce que le FQL
est interprété et traité (par l’API facebook).

Oui, pour nous, ça change rien ?

Contrairement au SQL, on ne peut pas modifier les données (UPDATE,DELETE,UPDATE).
De plus il est évident que facebook nous ne donne pas la possibilité de récupérer toute sa base de données.(il est pas fou facebook:)) Il faut forcément un identifiant (d’une personne, un groupe …) pour accéder aux informations.

Ne vous inquiéter pas si le FQL ne vous paraît pas clair, avec quelques exemples vous comprendrez tout de suite ce que je veux dire .

Notre première requête FQL

Déjà on va se connecter à notre API.

// on charge la librairie facebook
require_once 'lib-facebook/facebook.php';

// on définit la clé et le code secret
$sAppapikey = CLE;
$sAppsecret = CODE SECRET;

// on se connecte à facebook par la création d'un objet Facebook
$oFacebook = new Facebook($sAppapikey, $sAppsecret);

// on demande à l'utilisateur de se loguer
$oFacebook->require_login();

//on récupère l'id de l'utilisateur
$sUser_id = $oFacebook->user;

On va pas faire compliquer pour notre première requête FQL, on va juste récupérer les informations principales de
l’utilisateur en cours. C’est à dire son nom, prénom, date de naissance,sexe,photo.

//notre requête FQL
$sQuery = 'SELECT first_name,last_name,birthday,sex,pic_big FROM user WHERE uid=' . $sUser_id;  

// information de notre utilisateur
$aUserInformation = $oFacebook->api_client->fql_query($sQuery);

Comme vous le voyez nous avons interrogé la table user pour récupérer les informations de l’utilisateur en cours.

Par défaut le résultat retourné est sous forme de tableau.

fql

Maintenant c’est pas compliqué pour mettre tout ça en forme

// affichage des données
echo '<h1>Mes informations</h1><br/>';
echo 'nom : '.$aUserInformation[0]['last_name'].'<br/>';
echo 'prenom : '.$aUserInformation[0]['first_name'].'<br/>';
echo 'date de naissance : '.$aUserInformation[0]['birthday'].'<br/>';
echo 'sexe : '.$aUserInformation[0]['sex'].'<br/>';
echo 'photo :<br/> <img src=\''.$aUserInformation[0]['pic_big'].'\'/>';

Voila ce que ça donne :

fql

Voila nous avons fait notre première requête. On va pouvoir savoir tout sur nos utilisateurs :p.

Stocker ces informations sur une base de données:

Il est toujours intéressant de stocker les informations sur une base de données. Il est bien important d’optimiser
votre base en fonction de votre application (et non de la base facebook).
Par exemple pour le sexe plutôt que stocker male ou female, il est plus intéressant de stocker 2 id différents qui feront référence à une table.
Si vous stockez les informations de facebook pour être en toute légalité, n’oubliez pas de faire un tour à la cnil pour faire une déclaration de fichier.

La base de données Facebook

Vous pouvez avoir toute la structure de la base de données facebook sur la documentation.Hélas elle n’est qu’en anglais

Actuellement il y a 23 tables que l’ont peut interroger. Cela fait une quantité astronomique de données que l’on peut récupérer.
Il est essentiel de bien comprendre l’utilité de chaque table et surtout de savoir faire le tri entre toutes ses données.

note sur la documentation : en FQL il est nécessaire d’utiliser un critère (clause WHERE)
sur un élément marqué par une étoile « * ».

fql

Dans cette exemple, pour récupérer les information d’un utilisateur on a besoin forcément de son uid ou de son name.

Bon si vous n’êtes pas motivé pour éplucher toute la doc, très prochainement un tutoriel sur les données clés de facebook va voir le jour.

En attentant vous pouvez toujours poster un commentaire pour une remarque ou une interrogation.

Mon formulaire façon facebook

Bien sur vous pouvez toujours utiliser le HTML pour faire vos formulaires, mais le FBML nous facilite la tache.
Puisqu’en quelque balise le formulaire se génère automatiquement avec la mise en forme facebook.

<fb:editor >

C’est avec cette balise que nous allons déclarer notre formulaire.

Attribut obligatoire :

action: l’adresse ou le formulaire va rediriger l’utilisateur.

Attributs facultatifs :

width : la taille maximal d’un champ (par défaut : 425).
labelwidth : la taille maximal de la nomination du champ(par défaut : 75).

Pour ce tutoriel nous allons dire que nous voulons faire un formulaire ou l’utilisateur peut donner un avis sur les derniers films qui sont parus au cinéma. (je sais, l’exemple est bateau, mais j’arrive pas à trouver mieux )

La base de notre formulaire va donner ça :

<fb:editor action="?monavis" labelwidth="100">
</fb:editor>

Dans un premier temps, l’utilisateur va devoir entrer son pseudo.
Pour ceci, nous allons utiliser la balise <fb:editor-text >

Attributs facultatifs :

label : le libellé du champ.
name : le nom du champ.
value : la valeur par défaut du champ.
maxlength : la taille maximum du champ.

Donc pour nous ça sera :

<fb:editor action="?lasuite" labelwidth="100">
	<fb:editor-text label="pseudo" name="pseudo" value="mon pseudo"/>
</fb:editor>

en visuel :

api facebook

Maintenant nous allons rajouter une liste déroulante, composée d’une liste de film avec la balise <fb:editor-custom>.

Attributs facultatifs :

label : le libellé de la liste déroulante.
id : identifiant de la liste déroulante.

<fb:editor-custom label="film">
	<select name="state">
		<option value="1" selected>La Folie des grandeurs</option>
		<option value="2">Slumdog Millionaire</option>
		<option value="3">Seraphine</option>
		<option value="4">L'Etrange histoire de Benjamin Button</option>
		<option value="5">Nos enfants nous accuseront</option>
	</select>
</fb:editor-custom>

une petite visualisation :

api facebook

Notre utilisateur va pouvoir maintenant ajouter des commentaires aux film qu’il a sélectionné.
On va utilisé la balise <fb:editor-textarea>.

Attributs facultatifs :

label : le libellé de la textarea.
name : le nom de la textarea.
rows : la longueur en ligne de la textarea.

<fb:editor-divider/>
<fb:editor-textarea label="commentaire">
  	mes commentaires
</fb:editor-textarea>

Pour aérer votre formulaire vous pouvez utiliser la balise <fb:editor-divider/>

Notre formulaire commence à ressembler à quelque chose

api facebook

Champs automatique

L’utilisateur pourra renseigner la date ou il a vue le film. (si il a mit un commentaire c’est qu’il a dû voir le film ^^)

Pour ceci on a besoin de <fb:editor-date>.

Attribut obligatoire :

label: le libellé du champ.
value: la date par défaut (attention on doit indiquer un timestamp).

<fb:editor-date label="j'ai vu le film le " value="5419000" />

Comme vous le voyez, facebook a pris le temps de traduire les mois, mais il n’a toujours pas compris
qu’en France la date commence par les jours et non pas par les mois (oui, je râle pour pas beaucoup).

api facebook

Bon si je ne suis pas content je peux toujours utilisé la balise <fb:editor-month≶

Attributs facultatifs :

label : le libellé de la liste déroulante.
name : le nom de la liste déroulante.
value : valeur de la liste déroulante.

<fb:editor-month value="6" name="mois" label="mois"/>

Facebook nous offre aussi une liste déroulante prêt à porter pour l’heure avec la balise <fb:editor-time>.

Attributs facultatifs :

label : le libellé de la liste déroulante.
name : le nom de la liste déroulante.
value : valeur de la liste déroulante.

<fb:editor-time value="1185930724" name="time" label="a"/>

ce qui donne :

api facebook

Voila, nous avons fait le tour des champs que nous propose le FBML.
Il ne manque plus que le bouton de soumission.

Il faut savoir que les boutons doivent se situer dans la balise
<fb:editor-buttonset>

Pour le bouton de soumission ce n’est pas compliqué, il faut utiliser la balise <fb:editor-button>.

Attribut obligatoire :

value: le nom du bouton de soumission.

Attributs facultatifs :

optional: la valeur du bouton de soumission.

Le FBML à ajouter aussi un autre bouton via la balise <fb:editor-cancel>

Attributs facultatifs :

value: le nom du lien.
href: l’adresse du lien.

En code cela donne :

	<fb:editor-buttonset>
		<fb:editor-button value="Valider"/>
		<fb:editor-cancel  value="Quitter" href="http://www.facebook.com"/>
	</fb:editor-buttonset>

On voit que facebook n’a pas pensé à nous, petit français, en effet il n’a pas traduit le mot ‘or’.
Dommage, mais ce n’est pas grave, le bouton cancel peut être très facilement remplacé par un lien du type <a href

api facebook

Voici ce que devrait donner notre code au final.

<fb:editor action="?lasuite" labelwidth="100">
	<fb:editor-text label="pseudo" name="pseudo" value="mon pseudo"/>
       <fb:editor-divider/>
	<fb:editor-custom label="film">
		<select name="state">
			<option value="1" selected>La Folie des grandeurs</option>
			<option value="2">Slumdog Millionaire</option>
			<option value="3">Seraphine</option>
			<option value="4">L'Etrange histoire de Benjamin Button</option>
			<option value="5">Nos enfants nous accuseront</option>
		</select>
	</fb:editor-custom>
	<fb:editor-divider/>
	<fb:editor-textarea label="commentaire">
  	mes commentaires
	</fb:editor-textarea>
	<fb:editor-divider/>
	<fb:editor-date label="j'ai vu le film le " value="5419000" />
	<fb:editor-divider/>
	<fb:editor-time value="1185930724" name="time" label="a"/>
	<fb:editor-divider/>
	<fb:editor-buttonset>
		<fb:editor-button value="Valider"/>
		<fb:editor-cancel  value="Quitter" href="http://www.facebook.com"/>
	</fb:editor-buttonset>
</fb:editor>

Et pour donner un résultat époustouflant

api facebook

Mon petit mot pour la fin :

Comme vous l’avez remarqué, le FBML permet assez facilement d’afficher du contenu avec le style facebook.
Le code est clair et facile à reprendre. Ce qui est dommage c’est que le FBML est mal adapté pour les français.
Certaines balises font apparaitre « en dur » du texte anglais impossible à changer. Il faut juste espérer que l’api facebook corrigera ce petit défaut dans les quelques temps avenir.

Voila la partie FBML est terminée, je n’aurai pas eu le temps de voir toutes les balises que nous proposent ce langage.
Voici la liste exhaustive. Normalement vous devriez pas avoir trop de difficulté à comprendre les autres balises.
Si vous avez des interrogations sur certaines balises que j’aurai vu ou pas, n’hésitez pas à poster vos questions sur un commentaire.
Je ne suis pas toujours dernière mon ordinateur à rafraichir la page toutes les 5 secondes mais je pense pourvoir vous répondre assez rapidement

Voici la première partie, pour ceux qui ne l’ont par encore lus.

Afficher une photo

Pour afficher une photo publiée dans facebook il faut utiliser la balise <fb:photo>

<fb:photo pid= »LE PID » uid= »LE UID » />

On va prendre l’exemple de cette publication :

http://www.facebook.com/photo.php?pid=1367728&id=619393444&op=1&view=all&subj=14113848026&aid=-1&oid=14113848026

Et on veut récupérer l’image de cette gargouille, il faut donc trouver le PID et
le UID

En fait c’est très simple, ils sont juste dans l’url !

http://www.facebook.com/photo.php?pid=1367728

&id=619393444&op=1&view=all&subj=14113848026&aid=-1&oid=14113848026

Le PID est : 1367728
Le UID est : 619393444

Si on veut afficher la photo on fait :

<fb:if-can-see-photo pid="1367728" uid="619393444">
<fb:photo pid="1367728" uid="619393444" />
</fb:if-can-see-photo>

Et voilà la gargouille est affichée.

La balise <fb:if-can-see-photo > sert juste à vérifier, si l’utilisateur peut lier la photo.

Musique Maestro !

Le FBML donne aussi la possibilité d’intégrer un petit lecteur mp3 dans votre gadget.

Voilà ce que cela peut donner :

fb:mp3

Pour ceci on va utiliser la balise <fb:mp3>

<fb:mp3
	src="http://media.waanser.com/2009/01/yebano_love_arpege.mp3"
	title="Love arpege"
	album="Yebano"
	artist="Yuno"
/>

Attribut obligatoire :

src: il est obligatoire, c’est le chemin absolu du fichier mp3.

Attributs facultatifs :

title : le titre de la chanson.
artist : le nom de l’artiste.
album : le nom de l’album.
width : la largeur du lecteur (par défaut c’est 300).
height : la longueur du lecteur (par défaut c’est 29).

FLV : Les vidéos Flash sur facebook

Nous allons voir comment diffuser des vidéos flash sur notre application facebook.

api facebook video FLV

Pour afficher les vidéos nous allons utiliser la balise <fb:flv>.

Voici un exemple de code :

<fb:flv
	src='http://media.waanser.com/2009/02/691008.flv'
	width='400'
	height='300'
	title='my movie'
 	color='#FFBB00'
 	salign='r'
	img='http://media.waanser.com/2009/02/ex_flv.jpg'
 	scale='showall'
>

Attribut obligatoire :

src : il est obligatoire, c’est le chemin absolu du fichier .flv

Attributs facultatifs :

title : le titre de la vidéo.
width : la largeur du lecteur.
height : la longueur du lecteur.
scale : définit le format d’affichage de la vidéo. Il faut savoir qu’il y a trois options possibles :

1. showall : affiche le format réel de la vidéo.
2. noborder : la vidéo est découpée par rapport au format des attributs « width » et « height ».
3. exactfit : la taille de la vidéo est redimensionnée au format défini par les attributs « width » et « height ».

img : l’image de prévisualisation. Il faut que le chemin soit absolu. A noter aussi que l’image doit être en format .jpg
align : l’alignement de la vidéo, ci-dessous les quatre options possibles

1. l : gauche
2. r : droit
3. t : milieu
4. b : centré

color : couleur de fond de la vidéo.

Le FBML

Le langage FBML (Facebook Markup Langage) est interprété par le moteur Facebook. Tout comme le moteur PHP, celui-ci va récupérer le code source, faire du traitement et enfin renvoyé le résultat en HTML. Vous n’êtes pas obligé d’utiliser le FBML pour développer votre application Facebook, mais il est largement conseillé puisqu’il va nous faciliter grandement la vie.

Bon fini de chipoter, let’s go!

afficher les informations de nos amis

Pour plus de simplicité, j’ai fait appel à un fichier php qui se connecte à Facebook automatiquement.
Je l’ai appelé connexion.php

<?php
// on charge la librairie facebook
require_once 'lib-facebook/facebook.php';
// on défini la clé et le code secret
$sAppapikey = 'VOTRE CLE';
$sAppsecret = 'VOTRE CODE SECRET';
// on se connecte à facebook par la creation d'un objet Facebook
$oFacebook = new Facebook($sAppapikey, $sAppsecret);
// on demande à l'utilisateur de se loguer
$sUser_id = $oFacebook->require_login();
?>

facebook

<fb:header>Mes amis</fb:header>

Comme base, nous allons afficher une liste de 5 de nos amis.
Et petit à petit nous allons afficher toute sorte d’information sur eux .

<?php
// on se connecte à  facebook
require_once 'connexion.php';
?>
<fb:header>Mes amis</fb:header>
<br/><br/>
<?php
//on récupére les 5 premiers amis de l'utilisateurs
$aFriends = $oFacebook->api_client->friends_get();
$aFriends = array_slice($aFriends, 0, 5);
// on affiche leurs informations à partir de leur identifiant
foreach ($aFriends as $iKey => $sFriend) {
	echo '<h1> Ami '.($iKey+1).'</h1><br/>';
  	echo '<div>';
  	echo 'Identifiant : '.$sFriend;
  	echo '</div>';
  	echo '<br/><br/>';
}
?>

facebook

Je l’admets, on a rien du tout comme information, mais on va vite remédier à ça, avec tout ce que le FBML va nous offrir ^^.

Nous allons afficher les photos de nos amis en utilisant la balise fb:mediaheader:

Dans notre boucle il suffit d’entrer :

  	echo '<div>';
  	echo 'Identifiant : '.$sFriend.'<br/>';
  	echo '<fb:mediaheader uid="'.$sFriend.'"/>';
  	echo '</div>';

Déjà ça rend un peu mieux :

facebook FBML

Qui est mon ami ?

On va maintenant demander à Facebook si la liste de contacts sont bien nos amis.

<fb:if-is-friends-with-viewer uid= »IDENTIFIANT UTILISATEUR »>
c’est mon ami
<fb:else>
ce n’est pas mon ami
</fb:else>
</fb:if-is-friends-with-viewer>

foreach ($aFriends as $iKey => $sFriend) {
	echo '<h1>';
	echo '<fb:if-is-friends-with-viewer uid="'.$sFriend.'">';
  	echo 'Ami ';
  	echo '<fb:else>Inconnu </fb:else>';
  	echo'</fb:if-is-friends-with-viewer>';
	echo ($iKey+1).'</h1><br/>';
  	echo '<div>';
  	echo 'Identifiant : '.$sFriend.'<br/>';
  	echo '<fb:mediaheader uid="'.$sFriend.'"/>';
  	echo '</div>';
  	echo '<br/><br/>';
}

$aFriends[]=15632748619; // jacques chirac
$aFriends[]=1619545751; // le père noel
$aFriends[]=1605863542; // charles le singe

Voila, vous savez maintenant les bases du FBML, dans la prochaine partie nous verrons la liste
beaucoup plus complète des balises FBML.

La seconde partie est en ligne, elle traite la partie média du FBML.

Pour passer dans le monde des développeurs facebook, il faut suivre ce lien et accepter la demande d’ajout d’application.

Voilà, nous sommes dans l’espace développeur de facebook.
C’est ici que l’on va configurer notre application.

Rapide et efficace

L’api facebook est très complet. Pour maîtriser tous ces composants, cela vous demandera beaucoup de temps.
Pour ne pas se perdre dans tout ce méandre, je vous propose de sauter les étapes de configurations facultatives pour faire tourner une application très rapidement.

C’est parti.

Cliquez sur le bouton « Créer une application »

1.jpg

Ensuite, on saisit le nom de notre application et on accepte.

Avant de continuer, on va créer la page où notre application, et facebook va se connecter.

Dans votre dossier www on va créer un dossier monAppliFacebook, avec un fichier index.php qui sera notre page d’accueil.

Le code source sera très simple :

echo 'Api facebook bonjour !';

On va vérifier que notre application tourne chez nous.

Pas de Fatal erreur ? Super! on peut passer à la suite.

Configuration de notre application

De retour sur notre panneau d’administration facebook , on va modifier nos paramètres de l’application.

Dans l’onglet cavenas

On va dans le cadre URLs obligatoires

Ici, on va saisir URL du canevas. C’est l’url que devra taper l’utilisateur pour arriver sur votre application.
A vous de choisir l’url de votre application. (Eh oui, il faut un peu d’imagination).

URL de rappel de la page principale. C’est l’url où se trouve votre application, pour nous ça sera :
http://localhost/monAppliFacebook/

On enregistre nos modifications et on va sur l’url de votre application (pour moi c’est http://apps.facebook.com/application_roul/)

Et là, ça marche !

Maintenant que facebook est bien connecté à notre code source, on va télécharger la librairie

On décompresse le dossier, dans le dossier src on récupère le fichier facebook.php (qui est la librairie).
On met le fichier sur notre dossier monAppliFacebook.

Nous avons besoins de 2 choses:

• Récupérer les 2 clés d’identifications.
• Configurer le chemin de connexion.

Récupérer les 2 clés d’identifications.

Pour notre application facebook, on va avoir besoin d’une clé publique et d’une clé secrète.
Pour les trouver, il faut aller dans le panneau d’administration de notre application sur l’onglet Général

Les informations sont ici.

Configurer le chemin de connexion.

Rendez vous dans l’onglet connexion

Le chemin de connexion est le chemin où l’utilisateur sera redirigé après la connexion.

Les configurations sont finies, passons aux codes

Un exemple concret d’utilisation

Voici le code source. (Les explication sont dans les commentaires)

<?php
/**
 * @author roul
 * @desc Exemple simple d'utilisation de l'api facebook
 * @link www.waanser.com
 * @since mai 2010
 */

// on charge la librairie facebook
require_once './facebook.php';

// clé publique
define('CLE_PUBLIQUE', 'Votre clé publique');
//clé secrète
define('CLE_SECRETE', ''Votre clé privée');

// on créé une intance de facebook
$oFacebook = new Facebook(array(
  'appId'  => CLE_PUBLIQUE,
  'secret' => CLE_SECRETE,
  'cookie' => true,
));

// on récupère les identifiants du visiteur
$session = $oFacebook->getSession();

// on récupère les informations du visiteur
 try {
    $aVisiteur = $oFacebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
  }

?>
<!DOCTYPE html>
<!--  on va utilisser du fbml ( le html de facebook) -->
<html xmlns='http://www.w3.org/1999/xhtml'
      xmlns:fb='http://www.facebook.com/2008/fbml'>
  <body>

  <!--  si le client a accepté l'application -->
    <?php if ($session) { ?>
     Bienvenue  <?= $aVisiteur['name'] ?> !
    <?php } else { ?> <!--  sinon on propose à l'utilisateur de se connecter à l'application -->
     Pour se connecter c'est ici :
      <fb:login-button></fb:login-button>
    <?php } ?>

    <div id='fb-root'></div>
    <!--  on charge la librairie javascript de facebook pour la connexion -->
    <script src='http://connect.facebook.net/en_US/all.js'></script>
     <!--  fonction qui envoie les informations à facebook connect -->
    <script>
      FB.init({appId: '<?= CLE_PUBLIQUE ?>', status: true,
               cookie: true, xfbml: true});
      FB.Event.subscribe('auth.login', function(response) {
        window.location.reload();
      });
    </script>
  </body
</html>

Maintenant, on retourne sur notre application facebook .

Voici ce que cela donne :

Quand on clique sur le bouton:

On clique sur allow et facebook vous reconnais.

Bravo \o/ vous avez fait votre première application.

La mise à jour des autres tutoriels devraient se faire d’ici quelques jours.