Facebook

FBML dans une application IFRAME

Posted in Facebook on février 14th, 2010 by Stéphane – 3 Comments

Voici une façon de développer des applications IFrame Facebook. Je pars du principe que vous avez une connaissance de la manière de développer sur Facebook.

Tout d’abord créez un fichier  xd_receiver.htm à la racine de votre application.

Ajoutez ce code dans le fichier xd_receiver.htm :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.debug.js" type="text/javascript"></script>
</body>
</html>

Dans la page de vos pages n’oubliez pas d’ajouter l’espace de nom Facebook :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

Appeller l’api JS de facebook dans la balise <head> de votre document HTML :

<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

Vous pouvez insérer ensuite du code FBML dans vos pages :

<fb:serverfbml>
 <script type=”text/fbml”>
  <fb:fbml>
    <fb:request-form action="http://monapp.com/do.php"
                     method="POST"
                     invite="true"
                     type="XFBML"
                     content="content">
       <fb:multi-friend-selector showborder="false" actiontext="Invitez vos amis.">
    </fb:request-form>
  </fb:fbml>
  </script>
</fb:serverfbml>

Ce code doit être placé après les éléments FBML placés dans vos pages :

<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function()
{
  FB.Facebook.init("____API_KEY____", "xd_receiver.htm");
});
</script>

Voilà, en espérant que cela puisse aider certains