KRDS - Facebook Developer Garage Paris

  • 23,995 views
Uploaded on

Integrating in the New Design with FBML or IFrames …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
23,995
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
140
Comments
2
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
    • Bookmarks
    • Application Tabs
    • Profile box
    • Application Info section
    • Publisher
    • Feed forms
    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
    • Quelles sont
    • les problématiques clés ?
    6 juin 2009 Facebook Developer Garage Paris
  • 11. 2. Iframe vs FBML
  • 12.
    • I Think I’d Use Iframes
    • Charlie Cheever
    • Facebook Engineer
    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 !
    • Iframe
    • Iframes dans l’iframe
    • Redimensionnement automatique de toutes les IFrames grâce au Cross Domain Communication Channel
    Mais cela fonctionne. Les systèmes s’égalisent en termes de fonctionnalité. 6 juin 2009 Facebook Developer Garage Paris
  • 24. Performances
    • Preload FQL pour FBML
    6 juin 2009 Facebook Developer Garage Paris
  • 25. Performances
    • Depuis peu : Preload FQL pour Iframe
    6 juin 2009 Facebook Developer Garage Paris
  • 26.
    • FBML
      • L’URL change pour chaque page
    • Iframe
      • http://apps.facebook.com/monappli/index.php
      • L’URL est fixe si l’on navigue dans l’iFrame
      • Bouton Retour gêné
      • Attribut target=‘_top’ résout le problème, mais enlève une bonne partie de l’intérêt de l’Iframe.
    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
    • FBML
      • Tout est inclus dans $_POST
    • Iframe
      • Les informations passées en GET
      • La session_key est incluse dans le HTTP_REFERER
      • «  This is a pretty serious security flaw in our design »
      • Passage manuel des query_string dans les GET des liens
      • Solution avec Cookies : pas toujours compatible, alertes de sécurité de certains navigateurs et fastidieux.
    6 juin 2009 Facebook Developer Garage Paris Mode Iframe moins sécurisé
  • 28. FBML
    • Avantages
      • Chargement homogène de la page
      • Tout le contenu est dans le flot, pas d’IFrame
      • Utilisation simple de modules Facebook (Wall, MFI…)
      • On conserve les URLs
      • Le mécanisme d’authentification est fiable (intégré à FB)
    • Inconvénients
      • Le Chat a ralenti la plateforme
      • Le contenu transite par Facebook
      • Ajax lent, passe par Facebook (Eventuellement Proxy local)
    6 juin 2009 Facebook Developer Garage Paris
  • 29. Iframe
    • Avantages
      • Sans rechargement du Facebook Chrome, c’est plus rapide
      • Utilisation de JS/HTML/CSS habituels (framework et librairies)
      • Ajax rapide
    • Inconvénients
      • Redimensionnement des IFrames non fiables à 100%
      • Pas d’URLs pour chaque page, pas de bouton Retour
      • Authentification plus complexe à mettre en œuvre
      • XFBML est long à charger (1-2 secondes)
    6 juin 2009 Facebook Developer Garage Paris
  • 30. Conclusion
    • Sauf pour certains cas, utilisez FBML
    • Thomas Guenoux
    • KRDS
    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