KRDS - Facebook Developer Garage Paris
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

KRDS - Facebook Developer Garage Paris

  • 9,610 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
9,610
On Slideshare
9,119
From Embeds
491
Number of Embeds
8

Actions

Shares
Downloads
140
Comments
2
Likes
6

Embeds 491

http://www.applications-facebook.com 449
http://www.slideshare.net 14
http://www.linkedin.com 10
http://staging.visualcv.com 8
http://www.krds.fr 6
https://www.linkedin.com 2
http://www.potku.net 1
http://www.krds.com 1

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