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

Application Tabs

Profile box

Application Info section

Publisher

Feed forms

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

Quelles sont

les problématiques clés ?

2. Iframe vs FBML

I Think I’d Use Iframes Charlie Cheever Facebook Engineer 6 juin 2009 Facebook Developer Garage Paris

I Think I’d Use Iframes

Charlie Cheever

Facebook Engineer

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

Iframe

Iframes dans l’iframe

Redimensionnement automatique de toutes les IFrames grâce au Cross Domain Communication Channel

Performances Preload FQL pour FBML 6 juin 2009 Facebook Developer Garage Paris

Preload FQL pour FBML

Performances Depuis peu : Preload FQL pour Iframe 6 juin 2009 Facebook Developer Garage Paris

Depuis peu : Preload FQL pour Iframe

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

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.

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

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.

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

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)

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

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)

Conclusion Sauf pour certains cas, utilisez FBML Thomas Guenoux KRDS 6 juin 2009 Facebook Developer Garage Paris

Sauf pour certains cas, utilisez FBML

Thomas Guenoux

KRDS

Thank you Feel free to contact us, we love share about facebook platform. twitter.com/krds - krds.fr - contact@krds.fr - applications-facebook.com