FBML techniques de propagation virales

FBML techniques de propagation virales

sommaire :

  1. Les demandes d'ajouts

  2. Les fils d'actualités

  3. Utilisez la maquette dans votre application

  4. Notification

 

La force d’une application facebook est le fait qu’elle peut toucher un grand nombre d’utilisateur très rapidement à un cout nul. Pour cela il faut savoir utiliser les techniques de propagation. Nous allons voir cela dans cet article.

Les demandes d’ajouts

Nous allons commencer par faire les demandes d’ajouts.

Si vous ne l’avez déjà pas fait, pour pouvoir tester les notifications il est essentiel de rendre public votre application.
Il faut donc que vous retourner dans les paramètres de votre application.
Il faudra ensuite se rendre dans l’onglet Paramètres avancées, pour désactiver le mode bac à sable. (il devrait plutôt s’appeler mode développeur, non ? :) )

api facebook mode bac à sable

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 :

demande d'ajouts

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.

Étape très difficile ^^
La première étape sera de sélectionner l’application qui va utiliser la maquette.

api facebook

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

facebook template

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

rendu maquette facebook

rendu maquette facebook

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

maquette facebook

maquette facebook

Perdu ? :)
Il faut savoir que la maquette est constituée d’une structure (qui ne changera jamais) et de données dynamique.
On veut que notre file d’actualité ressemble à ça :

exemple 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*} %

Si vous appuyez sur le bouton mettre l’aperçu à jour, vous aurez une belle erreur (Feed Story Preview Error)

erreur prévualsisation maquette

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. :)

Pour donner cet exemple, il suffit de se reporter dans la zone de texte : Exemple de données de modèle
et mettre : {”points”:”65″,”theme”:”l’histoire”}

Et là Miracle ! ça fonctionne :)

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

Attention, vous devez passer (bouton ignorer) la prochaine étape (Créer un modèle d’actualité courte), sinon facebook va enregistrer cette dernière maquette.

Si vous voulez faire une actualité courte, c’est par ici:

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

api facebook lien d'action

Cette partie n’est pas compliquée, vous avez deux champs ;
Texte de lien d’action : le texte du lien.

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

api facebook lien d'action

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 idfacebook10

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.

Nous allons donc créer un fichier php qui fera appel a notre maquette.
Facebook impose d’utiliser le format JSON pour appeler la maquette et par la même occasion envoyer les données paramétrables.

{”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” }

Pour nous, ça va donner :

{”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);

DESTINATAIRE : le destinataire de la notification
MESSAGE : ça c’est le message à afficher
TYPE : ça c’est le type de message, il y a 2 types possibles :

  • 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

api facebook notification

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

Bonne propagation :)

Note de l'article




1 Star2 Stars3 Stars4 Stars5 Stars (9 votes, moyenne: 3,67 max : 5)
Loading ... Loading ...

  1. Ma2t Says:
    août 31st, 2009 at 18 h 45 min

    Petite faute à corriger :
    * app_to_user => L’expéditeur c’est l’application
    * user_to_user => L’expéditeur c’est l’utilisateur enregistré

    Bonne continuation ;)

  2. Taymiri Says:
    septembre 18th, 2009 at 18 h 59 min

    Bonjour’
    Comment fais ton pour pouvoir mettre un article de l’application dans son profil :

    Comme par exemple ça : http://rapidechange.com/d/135585/mr3lVS67/Sans%20titre.jpg

    Je n’ai pas vu sur le site, ou j’ai du sauter des étapes =/

  3. Frogi Says:
    septembre 23rd, 2009 at 18 h 06 min

    Après avoir traduit l’utilisation de la maquette en JSON avec la fonction json_encode() comment envoie t’ont la requete json à facebook ?

    La seule chose que fait le echo json_encode($arr); est d’afficher à l’ecran la traduction en json du code php du dessus.

  4. yannosh Says:
    septembre 25th, 2009 at 14 h 35 min

    Bonjour , meme quand je rajoute : {”points”:”65″,”theme”:”l’histoire”} dans les données exemple, j’ai toujour la meme erreur que quand on l’as pas mis…

    Il ne manque rien ?
    J’ai pourtant fait que des copier coller …

    Merci !

  5. yannosh Says:
    septembre 25th, 2009 at 15 h 33 min

    heu c bon, en fait ct les ” du copier coller qui allai pas …

  6. Taymiri Says:
    octobre 9th, 2009 at 20 h 38 min

    Bonjour,
    J’ai un problème ><
    je mets
    {*actor*} sait que {*personne*} personne l’aime. ;

    et en dessous je mets :
    {”images”:[{"src":"http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg", "href":"http://www.facebook.com"}, {"src": "http://pad.thedigitalmovement.com/_blaise/2007-06-13-roger-waters.jpg", "href":"http://www.facebook.com"}]}
    {”personne”:”10″}

    Qui peut m’aider ? j’ai toujours le même message d’erreur =S
    et j’ai mis bien rectifié comme yannosh avec des ”
    =S =S

  7. Taymiri Says:
    octobre 9th, 2009 at 20 h 40 min

    Ah ok c’est bon =)
    fallais que je vire
    tout sa :
    {”images”:[{"src":"http://pad.thedigitalmovement.com/_blaise/2007-06-15-dgen-breakfast.jpg", "href":"http://www.facebook.com"}, {"src": "http://pad.thedigitalmovement.com/_blaise/2007-06-13-roger-waters.jpg", "href":"http://www.facebook.com"}]}

  8. Taymiri Says:
    octobre 11th, 2009 at 10 h 19 min

    Slut’
    Dans “Utilisez la maquette dans votre application”
    Ou est la fin ? Comment on fais pour que le fichier .JSON soit intégré a la page ?

    Je ne connais pas du tout le JSON =/

  9. farabel Says:
    octobre 29th, 2009 at 10 h 58 min

    Hello !

    Moi aussi, j’ai pas trop capté comment l’utiliser.. je pense que la librairie JSON pour PHP n’est compatible qu’avec PHP5..

    Sinon, ben je viens de voir aujourd’hui que le lien pour créer notre modèle de fil d’actualité a changé, notamment une information vient d’apparaître.. Comme quoi en gros (je suis pas bilingue) Facebook n’acceptera plus cette méthode pour créer notre fil et qu’il faudrait utiliser stream attachments (sur ce lien : http://wiki.developers.facebook.com/index.php/Attachment_%28Streams%29 ). Je ne l’ai pas encore testé mais ça à l’air plus simple..

  10. roul Says:
    décembre 7th, 2009 at 14 h 25 min

    Salut,

    merci pour votre participation.
    Pour la partie du JSON, l’api facebook prends ce format pour définir les maquettes. Le truc, c’est que créer une maquette json depuis rien est assez compliqué, on peut facilement s’emméler les pinceaux …
    c’est pour ça que j’ai proposé de passer par php qui génère un format json tout beau tout propre et pret à être utiliser !

    C’est vrai que cette partie n’est pas assez clairement expliquer, je vais retraiter ce point dans les jours qui vont venir :)

  11. maverick Says:
    décembre 8th, 2009 at 12 h 18 min

    Bonjour,

    C’est très bien tes tutos. J’aimerais te demander si tu pourras eclaircir les différents démarches pour créer un système d’inscription et identificatoin (register / login) avec FACEBOOK API CONNECT.

    Aucun site n’est clair à ce sujet, j’ai vu ce tuto (PAKT : http://www.pakt.com/pakt/?id=ce00f49ed79e17aa&t=How_to_add_Facebook_Connect_to_your_...) mais dans “display.php” il faudrait tout refaire pour que le script soit léger.

    Souhaitant te revoir sur un tuto facebook connect php (login/register).

    Cordialement,

  12. roul Says:
    janvier 8th, 2010 at 14 h 26 min

    Merci maverick, pour ta contribution.

    Je n’ai jamais eu l’occasion de l’utiliser, mais c’est vrai que ça peut être intéressant, je vais voir à ça plus de près.

Donner votre avis :