KRDS - Facebook Developer Garage Paris

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

1 comments

Comments 1 - 1 of 1 previous next Post a comment

  • + EYP Christophe Harrer 11 months ago
    Very nice presentation, it is not a trivial subject and yet your elegant design makes it understandable!

    There may be too many bullet points at the end of the presentation yet ( from slide 25 onward)...
Post a comment
Embed Video
Edit your comment Cancel

4 Favorites

KRDS - Facebook Developer Garage Paris - Presentation 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
    • I Think I’d Use Iframes
    • Charlie Cheever
    • Facebook Engineer
    6 juin 2009 Facebook Developer Garage Paris
  12. 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
  13. Canvas page en mode IFrame habituel © Charlie Cheever 6 juin 2009 Facebook Developer Garage Paris
  14. Canvas page en mode FBML © Charlie Cheever 6 juin 2009 Facebook Developer Garage Paris
  15. La plateforme évolue et les règles changent XFBML Facebook Chat 6 juin 2009 Facebook Developer Garage Paris
  16. 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
  17. 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
  18. Chargement des pages suivantes 6 juin 2009 Facebook Developer Garage Paris
  19. 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
  20. 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
  21. 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.
  22. Ç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
  23. Performances
    • Preload FQL pour FBML
    6 juin 2009 Facebook Developer Garage Paris
  24. Performances
    • Depuis peu : Preload FQL pour Iframe
    6 juin 2009 Facebook Developer Garage Paris
    • 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
  25. 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é
  26. 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
  27. 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
  28. Conclusion
    • Sauf pour certains cas, utilisez FBML
    • Thomas Guenoux
    • KRDS
    6 juin 2009 Facebook Developer Garage Paris
  29. Thank you Feel free to contact us, we love share about facebook platform. twitter.com/krds - krds.fr - contact@krds.fr - applications-facebook.com

+ krdskrds, 11 months ago

custom

3231 views, 4 favs, 5 embeds more stats

Integrating in the New Design with FBML or IFrames more

More info about this document

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Go to text version

  • Total Views 3231
    • 2915 on SlideShare
    • 316 from embeds
  • Comments 1
  • Favorites 4
  • Downloads 69
Most viewed embeds
  • 300 views on http://www.applications-facebook.com
  • 8 views on http://staging.visualcv.com
  • 6 views on http://www.krds.fr
  • 1 views on http://www.potku.net
  • 1 views on http://www.krds.com

more

All embeds
  • 300 views on http://www.applications-facebook.com
  • 8 views on http://staging.visualcv.com
  • 6 views on http://www.krds.fr
  • 1 views on http://www.potku.net
  • 1 views on http://www.krds.com

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories