krds - facebook developer garage paris
DESCRIPTION
Integrating in the New Design with FBML or IFrames Deep dive into Facebook platformTRANSCRIPT
Integrating in the New Design with FBML or IFrames Deep dive into Facebook platform
Thomas Guenoux – KRDS – [email protected]
/ 34
Bonne nouvelle !
12 avril 2023 2Facebook Developer Garage Paris
/ 34
Les éléments du nouveau design
Bookmarks
Application Tabs
Profile box
Application Info section
Publisher
Feed forms
12 avril 2023 3Facebook Developer Garage Paris
/ 34
Bookmarks
12 avril 2023 4Facebook Developer Garage Paris
/ 34
Application Tabs
12 avril 2023 5Facebook Developer Garage Paris
/ 34
Profile box
12 avril 2023 6Facebook Developer Garage Paris
/ 34
Application Info
12 avril 2023 7Facebook Developer Garage Paris
/ 34
Publisher
12 avril 2023 8Facebook Developer Garage Paris
/ 34
Feed forms
12 avril 2023 9Facebook Developer Garage Paris
/ 34
Création d’application
Quelles sont les problématiques clés ?
12 avril 2023 Facebook Developer Garage Paris 10
2. Iframe vs FBML
/ 34
I Think I’d Use Iframes
Charlie CheeverFacebook Engineer
12 avril 2023 12Facebook Developer Garage Paris
/ 34
Ne pas choisir à la légère
Most things you will want to do will be easier and faster with FBML.
12 avril 2023 13Facebook Developer Garage Paris
/ 34
Canvas page en mode IFrame habituel
© Charlie Cheever
12 avril 2023 14Facebook Developer Garage Paris
/ 34
Canvas page en mode FBML
© Charlie Cheever
12 avril 2023 15Facebook Developer Garage Paris
/ 34
La plateforme évolue et les règles changent
XFBMLFacebook Chat
12 avril 2023 16Facebook Developer Garage Paris
/ 34
Fonctionnement du XFBML
<fb:name uid="12345"></fb:name><fb:profile-pic uid="12345"></fb:profile-pic>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/Featu
reLoader.js.php" type="text/javascript"></script><script type="text/javascript">
FB.init(FB_API_KEY,« XD_RECEIVER"); </script>
XFBML
JavascriptAPI
Thomas Guenoux
12 avril 2023 17Facebook Developer Garage Paris
/ 34
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)”
“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)”
12 avril 2023 18Facebook Developer Garage Paris
/ 34
Chargement des pages suivantes
12 avril 2023 19Facebook Developer Garage Paris
/ 34
Bonjour, je suis une Iframe avec un contenu de 1500 pixels de haut, pouvez-vous m’afficher entièrement s’il vous plaît ?
Une IFrame ? Comment gérer la hauteur ?
Hors de question, tu n’es
pas de mon domaine !
Solution :Cross Domain Communication
Channel
Solution :Cross Domain Communication
Channel
12 avril 2023 20Facebook Developer Garage Paris
/ 34
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.
12 avril 2023 21Facebook Developer Garage Paris
/ 34
Exemple d’utilisation du FBML en XFBML
12 avril 2023 Facebook Developer Garage Paris 22
XFBML <fb:serverfbml><script type="text/fbml"><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.
/ 34
Ç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é.
12 avril 2023 23Facebook Developer Garage Paris
/ 34
Performances
Preload FQL pour FBML
12 avril 2023 24Facebook Developer Garage Paris
/ 34
Performances
Depuis peu : Preload FQL pour Iframe
12 avril 2023 25Facebook Developer Garage Paris
/ 34
• 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 solutionPas de bookmark ou de partage de lien
en mode IFrame
Pas de solutionPas de bookmark ou de partage de lien
en mode IFrame
12 avril 2023 26Facebook Developer Garage Paris
URLs http://apps.facebook.com/monappli/index.php
/ 34
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.
12 avril 2023 27Facebook Developer Garage Paris
Mode Iframe moins sécuriséMode Iframe moins sécurisé
/ 34
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)
12 avril 2023 28Facebook Developer Garage Paris
/ 34
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)
12 avril 2023 29Facebook Developer Garage Paris
/ 34
Conclusion
Sauf pour certains cas, utilisez FBML
Thomas GuenouxKRDS
12 avril 2023 30Facebook Developer Garage Paris
Thank youFeel free to contact us, we love share about facebook platform.twitter.com/krds - krds.fr - [email protected] - applications-facebook.com