2010-07-10 8 views
1

Nous avons actuellement une application de toile Facebook basée sur iframe dans les travaux. La partie canvas fonctionne bien et ne touche pas du tout l'API Facebook, car nous n'avons pas vraiment besoin des permissions des utilisateurs pour accéder à leur graphe social; les données que nous utilisons proviennent entièrement de l'extérieur de Facebook.Comment laisser les utilisateurs ajouter notre application en tant qu'onglet sur leur profil?

Ce que nous aimerions faire, c'est permettre aux utilisateurs d'ajouter une version FBML de notre application à leur profil sous forme d'onglet. Cependant, il n'est pas clair comment nous sommes censés faire pour activer cette fonctionnalité en utilisant les API Facebook actuelles. La page de toile et les paramètres de rappel sont configurés et fonctionnent correctement, et nous avons actuellement un nom d'onglet et une URL configurés dans nos paramètres d'application (et en tapant l'URL de l'onglet directement chargera notre page de test minimale), mais il n'y a pas manière évidente d'offrir aux utilisateurs la possibilité d'ajouter cet onglet à leurs profils.

Notre idée initiale était que nous aurions besoin d'ajouter notre propre bouton « Ajouter un profil Tab » dans XFBML comme mentionné à http://wiki.developers.facebook.com/index.php/Fb:add-profile-tab

Mais même si nous réduisons l'iframe à quelque chose d'aussi barebones que

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
</head> 
<body> 
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US" type="text/javascript"></script> 

<fb:add-profile-tab></fb:add-profile-tab> 

<script type="text/javascript"> 
    FB.init("<our secret key>", "xd_receiver.htm"); 
</script> 
</body> 
</html> 

l'élément xfbml ne parvient pas à rendre. Safari et Chrome listent l'erreur suivante dans la console: "Tentative JavaScript pour accéder à l'image avec l'URL [notre URL d'application sur facebook] à partir de l'image avec l'URL [URL de notre iframe] Les domaines, protocoles et ports doivent correspondre.

Nous avons l'URL de connexion pointant sur notre application dans l'onglet Connexion de la page des paramètres de l'application. Le fichier xd_receiver.htm est situé dans le même répertoire que la page iframe et son contenu sont

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<body> 
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script> 
</body> 
</html> 

qui semble être ce que tous les documents pertinents recommande. Le navigateur le charge définitivement tel qu'il a été vérifié via les volets de débogage appropriés (inspecteur web, firebug, etc.). Donc, la question est, est-ce la bonne façon d'ajouter la fonctionnalité «ajouter à l'onglet Profil» à notre application? Si oui, comment pouvons-nous résoudre l'erreur inter-domaine? Sinon, que devrions-nous faire à la place? La documentation actuelle semble se concentrer fortement sur les API Graph et Authentication, qui ne mentionnent pas vraiment les onglets de profil.

Répondre

0

Il est avéré que <fb:add-profile-tab> simplement ne rend pas sans que l'utilisateur ayant d'abord permis à l'application de se connecter à eux par quelque chose comme <fb:login-button>

2

Dans vos paramètres d'application, vérifiez qu'ils sont définis:

  • Toile>
    • Canvas URL de la page
    • Toile URL Callback
  • Profils>
    • Tab Nom
    • URL Tab

La demande Tab ira à {Canvas URL Callback}/{URL Tab}. Alors quelque chose comme ceci devrait fonctionner: http://apps.facebook.com/fbrelll/xfbml/fb:add-profile-tab

Cela utilise le SDK JS mis à jour.Je ne peux pas publier plus de liens, mais le site du développeur et le référentiel github contiennent des informations utiles sur le SDK.

+0

Nous avons certainement tous ces paramètres remplis, et nous essayons d'utiliser cette étiquette. Le bouton ne restitue jamais, et la console signale simplement ceci: "tentative non sécurisée de JavaScript pour accéder à l'image avec URL [notre URL d'application sur facebook] depuis l'image avec URL [adresse URL de notre iframe], les domaines, protocoles et ports doivent correspondre. Erreur. – mbarnett

+0

Cette erreur est un faux-fuyant - WebKit est paranoïaque, et enregistrera cette "erreur" pour les cas d'utilisation légitimes où un bloc catch devrait être consommé. Vous remarquerez cette erreur même avec mon exemple où tout fonctionne comme prévu. Serait utile de voir un cas de repro en direct pour votre problème pour voir ce qui se passe. – daaku