Integrating in the New Design with FBML or IFrames  Deep dive into Facebook platform Thomas Guenoux –  KRDS – thomas.gueno...
Bonne nouvelle ! 6 juin 2009 Facebook Developer Garage Paris
Les éléments du nouveau design <ul><li>Bookmarks </li></ul><ul><li>Application Tabs </li></ul><ul><li>Profile box </li></u...
Bookmarks 6 juin 2009 Facebook Developer Garage Paris
Application Tabs 6 juin 2009 Facebook Developer Garage Paris
Profile box 6 juin 2009 Facebook Developer Garage Paris
Application Info 6 juin 2009 Facebook Developer Garage Paris
Publisher 6 juin 2009 Facebook Developer Garage Paris
Feed forms 6 juin 2009 Facebook Developer Garage Paris
Création d’application <ul><li>Quelles sont  </li></ul><ul><li>les problématiques clés ? </li></ul>6 juin 2009 Facebook De...
2. Iframe vs FBML
<ul><li>I Think I’d Use Iframes </li></ul><ul><li>Charlie Cheever </li></ul><ul><li>Facebook Engineer </li></ul>6 juin 200...
Ne pas choisir à la légère Most things you will want to do will be easier and faster with FBML. 6 juin 2009 Facebook Devel...
Canvas page en mode  IFrame  habituel © Charlie Cheever 6 juin 2009 Facebook Developer Garage Paris
Canvas page en mode  FBML © Charlie Cheever 6 juin 2009 Facebook Developer Garage Paris
La plateforme évolue et les règles changent XFBML Facebook Chat 6 juin 2009 Facebook Developer Garage Paris
Fonctionnement du XFBML <fb:name uid=&quot;12345&quot;></fb:name> <fb:profile-pic uid=&quot;12345&quot;></fb:profile-pic> ...
Ce qui change pour le mode  IFrame “ if you use XFBML, then you usually won’t need to make an API call to Facebook from yo...
Chargement des pages suivantes 6 juin 2009 Facebook Developer Garage Paris
Une IFrame ? Comment gérer la hauteur ? Bonjour, je suis une Iframe avec un contenu de 1500 pixels de haut, pouvez-vous m’...
XFBML est-il aussi cool que le FBML ? FBML fournit des modules très pratiques et dans le “look and feel” FB C’est maintena...
Exemple d’utilisation du FBML en XFBML 6 juin 2009 Facebook Developer Garage Paris XFBML <fb:serverfbml><script type=&quot...
Ça se complique pour le mode Iframe ! <ul><li>Iframe </li></ul><ul><li>Iframes dans l’iframe </li></ul><ul><li>Redimension...
Performances <ul><li>Preload FQL pour FBML </li></ul>6 juin 2009 Facebook Developer Garage Paris
Performances <ul><li>Depuis peu : Preload FQL pour Iframe </li></ul>6 juin 2009 Facebook Developer Garage Paris
<ul><li>FBML </li></ul><ul><ul><li>L’URL change pour chaque page </li></ul></ul><ul><li>Iframe </li></ul><ul><ul><li>http:...
Authentification : qui regarde la page <ul><li>FBML </li></ul><ul><ul><li>Tout est inclus dans $_POST </li></ul></ul><ul><...
FBML <ul><li>Avantages </li></ul><ul><ul><li>Chargement homogène de la page </li></ul></ul><ul><ul><li>Tout le contenu est...
Iframe <ul><li>Avantages </li></ul><ul><ul><li>Sans rechargement du Facebook Chrome, c’est plus rapide </li></ul></ul><ul>...
Conclusion <ul><li>Sauf pour certains cas, utilisez FBML </li></ul><ul><li>Thomas Guenoux </li></ul><ul><li>KRDS </li></ul...
Thank you Feel free to contact us, we love share about facebook platform. twitter.com/krds  -  krds.fr  -  contact@krds.fr...
Upcoming SlideShare
Loading in …5
×

KRDS - Facebook Developer Garage Paris

24,808 views

Published on

Integrating in the New Design with FBML or IFrames
Deep dive into Facebook platform

Published in: Technology

KRDS - Facebook Developer Garage Paris

  1. Integrating in the New Design with FBML or IFrames Deep dive into Facebook platform Thomas Guenoux – KRDS – thomas.guenoux@krds.fr
  2. Bonne nouvelle ! 6 juin 2009 Facebook Developer Garage Paris
  3. Les éléments du nouveau design <ul><li>Bookmarks </li></ul><ul><li>Application Tabs </li></ul><ul><li>Profile box </li></ul><ul><li>Application Info section </li></ul><ul><li>Publisher </li></ul><ul><li>Feed forms </li></ul>6 juin 2009 Facebook Developer Garage Paris
  4. Bookmarks 6 juin 2009 Facebook Developer Garage Paris
  5. Application Tabs 6 juin 2009 Facebook Developer Garage Paris
  6. Profile box 6 juin 2009 Facebook Developer Garage Paris
  7. Application Info 6 juin 2009 Facebook Developer Garage Paris
  8. Publisher 6 juin 2009 Facebook Developer Garage Paris
  9. Feed forms 6 juin 2009 Facebook Developer Garage Paris
  10. Création d’application <ul><li>Quelles sont </li></ul><ul><li>les problématiques clés ? </li></ul>6 juin 2009 Facebook Developer Garage Paris
  11. 2. Iframe vs FBML
  12. <ul><li>I Think I’d Use Iframes </li></ul><ul><li>Charlie Cheever </li></ul><ul><li>Facebook Engineer </li></ul>6 juin 2009 Facebook Developer Garage Paris
  13. Ne pas choisir à la légère Most things you will want to do will be easier and faster with FBML. 6 juin 2009 Facebook Developer Garage Paris
  14. Canvas page en mode IFrame habituel © Charlie Cheever 6 juin 2009 Facebook Developer Garage Paris
  15. Canvas page en mode FBML © Charlie Cheever 6 juin 2009 Facebook Developer Garage Paris
  16. La plateforme évolue et les règles changent XFBML Facebook Chat 6 juin 2009 Facebook Developer Garage Paris
  17. Fonctionnement du XFBML <fb:name uid=&quot;12345&quot;></fb:name> <fb:profile-pic uid=&quot;12345&quot;></fb:profile-pic> <script src=&quot;http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php&quot; type=&quot;text/javascript&quot;></script> <script type=&quot;text/javascript&quot;> FB.init(FB_API_KEY,« XD_RECEIVER&quot;); </script> XFBML Javascript API Thomas Guenoux 6 juin 2009 Facebook Developer Garage Paris
  18. Ce qui change pour le mode IFrame “ if you use XFBML, then you usually won’t need to make an API call to Facebook from your server (which means (4) and (5) don’t happen)” 6 juin 2009 Facebook Developer Garage Paris
  19. Chargement des pages suivantes 6 juin 2009 Facebook Developer Garage Paris
  20. Une IFrame ? Comment gérer la hauteur ? Bonjour, je suis une Iframe avec un contenu de 1500 pixels de haut, pouvez-vous m’afficher entièrement s’il vous plaît ? Hors de question, tu n’es pas de mon domaine ! Solution : Cross Domain Communication Channel 6 juin 2009 Facebook Developer Garage Paris
  21. XFBML est-il aussi cool que le FBML ? FBML fournit des modules très pratiques et dans le “look and feel” FB C’est maintenant possible d’avoir toutes les balises FBML en Iframe. 6 juin 2009 Facebook Developer Garage Paris
  22. Exemple d’utilisation du FBML en XFBML 6 juin 2009 Facebook Developer Garage Paris XFBML <fb:serverfbml><script type=&quot;text/fbml&quot;> <fb:multi-friend-input /></script></fb:serverfbml> Création d’une IFrame dans l’IFrame de l’application, qui contient le résultat du FBML.
  23. Ça se complique pour le mode Iframe ! <ul><li>Iframe </li></ul><ul><li>Iframes dans l’iframe </li></ul><ul><li>Redimensionnement automatique de toutes les IFrames grâce au Cross Domain Communication Channel </li></ul>Mais cela fonctionne. Les systèmes s’égalisent en termes de fonctionnalité. 6 juin 2009 Facebook Developer Garage Paris
  24. Performances <ul><li>Preload FQL pour FBML </li></ul>6 juin 2009 Facebook Developer Garage Paris
  25. Performances <ul><li>Depuis peu : Preload FQL pour Iframe </li></ul>6 juin 2009 Facebook Developer Garage Paris
  26. <ul><li>FBML </li></ul><ul><ul><li>L’URL change pour chaque page </li></ul></ul><ul><li>Iframe </li></ul><ul><ul><li>http://apps.facebook.com/monappli/index.php </li></ul></ul><ul><ul><li>L’URL est fixe si l’on navigue dans l’iFrame </li></ul></ul><ul><ul><li>Bouton Retour gêné </li></ul></ul><ul><ul><li>Attribut target=‘_top’ résout le problème, mais enlève une bonne partie de l’intérêt de l’Iframe. </li></ul></ul>Pas de solution Pas de bookmark ou de partage de lien en mode IFrame 6 juin 2009 Facebook Developer Garage Paris URLs http://apps.facebook.com/monappli/index.php
  27. Authentification : qui regarde la page <ul><li>FBML </li></ul><ul><ul><li>Tout est inclus dans $_POST </li></ul></ul><ul><li>Iframe </li></ul><ul><ul><li>Les informations passées en GET </li></ul></ul><ul><ul><li>La session_key est incluse dans le HTTP_REFERER </li></ul></ul><ul><ul><li>«  This is a pretty serious security flaw in our design » </li></ul></ul><ul><ul><li>Passage manuel des query_string dans les GET des liens </li></ul></ul><ul><ul><li>Solution avec Cookies : pas toujours compatible, alertes de sécurité de certains navigateurs et fastidieux. </li></ul></ul>6 juin 2009 Facebook Developer Garage Paris Mode Iframe moins sécurisé
  28. FBML <ul><li>Avantages </li></ul><ul><ul><li>Chargement homogène de la page </li></ul></ul><ul><ul><li>Tout le contenu est dans le flot, pas d’IFrame </li></ul></ul><ul><ul><li>Utilisation simple de modules Facebook (Wall, MFI…) </li></ul></ul><ul><ul><li>On conserve les URLs </li></ul></ul><ul><ul><li>Le mécanisme d’authentification est fiable (intégré à FB) </li></ul></ul><ul><li>Inconvénients </li></ul><ul><ul><li>Le Chat a ralenti la plateforme </li></ul></ul><ul><ul><li>Le contenu transite par Facebook </li></ul></ul><ul><ul><li>Ajax lent, passe par Facebook (Eventuellement Proxy local) </li></ul></ul>6 juin 2009 Facebook Developer Garage Paris
  29. Iframe <ul><li>Avantages </li></ul><ul><ul><li>Sans rechargement du Facebook Chrome, c’est plus rapide </li></ul></ul><ul><ul><li>Utilisation de JS/HTML/CSS habituels (framework et librairies) </li></ul></ul><ul><ul><li>Ajax rapide </li></ul></ul><ul><li>Inconvénients </li></ul><ul><ul><li>Redimensionnement des IFrames non fiables à 100% </li></ul></ul><ul><ul><li>Pas d’URLs pour chaque page, pas de bouton Retour </li></ul></ul><ul><ul><li>Authentification plus complexe à mettre en œuvre </li></ul></ul><ul><ul><li>XFBML est long à charger (1-2 secondes) </li></ul></ul>6 juin 2009 Facebook Developer Garage Paris
  30. Conclusion <ul><li>Sauf pour certains cas, utilisez FBML </li></ul><ul><li>Thomas Guenoux </li></ul><ul><li>KRDS </li></ul>6 juin 2009 Facebook Developer Garage Paris
  31. Thank you Feel free to contact us, we love share about facebook platform. twitter.com/krds - krds.fr - contact@krds.fr - applications-facebook.com

×