• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
KRDS - Facebook Developer Garage Paris
 

KRDS - Facebook Developer Garage Paris

on

  • 9,490 views

Integrating in the New Design with FBML or IFrames

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

Statistics

Views

Total Views
9,490
Views on SlideShare
9,000
Embed Views
490

Actions

Likes
6
Downloads
140
Comments
2

8 Embeds 490

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
http://www.potku.net 1
http://www.krds.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

KRDS - Facebook Developer Garage Paris KRDS - Facebook Developer Garage Paris Presentation Transcript

  • Integrating in the New Design with FBML or IFrames Deep dive into Facebook platform Thomas Guenoux – KRDS – thomas.guenoux@krds.fr
  • Bonne nouvelle ! 6 juin 2009 Facebook Developer Garage Paris
  • Les éléments du nouveau design
    • Bookmarks
    • Application Tabs
    • Profile box
    • Application Info section
    • Publisher
    • Feed forms
    6 juin 2009 Facebook Developer Garage Paris
  • 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
    • Quelles sont
    • les problématiques clés ?
    6 juin 2009 Facebook Developer Garage Paris
  • 2. Iframe vs FBML
    • I Think I’d Use Iframes
    • Charlie Cheever
    • Facebook Engineer
    6 juin 2009 Facebook Developer Garage Paris
  • 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
  • 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> <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
  • 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
  • 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’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
  • 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
  • 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.
  • Ç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
  • Performances
    • Preload FQL pour FBML
    6 juin 2009 Facebook Developer Garage Paris
  • 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
  • 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é
  • 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
  • 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
  • Conclusion
    • Sauf pour certains cas, utilisez FBML
    • Thomas Guenoux
    • KRDS
    6 juin 2009 Facebook Developer Garage Paris
  • Thank you Feel free to contact us, we love share about facebook platform. twitter.com/krds - krds.fr - contact@krds.fr - applications-facebook.com