web-dev-qa-db-fra.com

Les utilisateurs mobiles ne peuvent pas accéder à l'onglet de la page Facebook

J'ai un problème que je ne vois pas pour financer la solution… .. J'ai un onglet sur ma page Facebook (un de ces HTML statiques: applications iFrame). Il n’ya aucun problème pour y accéder depuis un PC, cependant, lorsque je tente d’accéder à l’onglet depuis un appareil mobile, il indique: 

"La page que vous avez demandée n'a pas été trouvée . Retour à la page précédente"

Existe-t-il un moyen de créer un onglet accessible sur les appareils mobiles ou simplement de le rediriger vers un domaine externe?

Merci!

facebookiframetabsfbml
22
r553

Comment créer une application mobile accessible via un onglet de page Facebook

Afin de créer une application Page Tab qui possède une version mobile accessible (un site Web externe auquel on accède directement et non via Facebook iFrame). Vous devez ajouter et configurer 3 "plates-formes" différentes dans les paramètres du développeur d'applications. Ceux-ci devraient être configurés comme suit:

Onglet de page

Configurez-le comme vous le feriez normalement. 

  • Nom de l'onglet de page: le nom que vous souhaitez voir apparaître sur l'onglet de la page} _
  • URL de l'onglet de page: l'URL où vous hébergez l'application de l'onglet de page} _ (par exemple http://myapp.com/page-tab )
  • URL de l'onglet de page sécurisée: la même chose mais avec https devant (par exemple https://myapp.com/page-tab )

Site Internet

C'est ici que vous configurez l'URL pour votre site mobile

  • URL du site mobile: Il s'agit de l'URL vers laquelle les utilisateurs mobiles doivent être redirigés (par exemple, http://myapp.com/mobile-version )
  • URL du site: Ceci est utilisé pour Facebook Connect. Si vous n'utilisez pas Facebook Connect, indiquez simplement l'URL de votre mobile ici.

App sur Facebook

Cela va être la passerelle vers votre application. Les utilisateurs mobiles qui arrivent sur cette page seront redirigés vers le site Web mobile. Vous pouvez utiliser javascript pour rediriger les utilisateurs de desktop vers votre App sur l'onglet de page Facebook.

  • Page d'application Canvas: ce sera http://apps.facebook.com/my-app-namespace , il s'agit du lien que vous posterez sur votre mur facebook ou dans vos annonces, ou n'importe où ailleurs, vous souhaitez créer un lien vers l'onglet de votre page
  • URL Canvas: il s'agit d'un lien vers une page de votre application qui sera incorporée sous forme d'iframe sur la page de l'application canvas. Vous utiliserez cette page pour rediriger vers votre onglet en utilisant JavaScript. Par exemple http://myapp.com/canvas-redirect
  • URL sécurisée de la toile: identique à la précédente, mais avec https devant (par exemple, " https://myapp.com/canvas-redirect ")

Votre script de redirection de toile

Vous souhaitez que les personnes arrivant sur votre application canvas avec un navigateur Web soient redirigées vers votre application à onglet de page. Comme il est chargé dans un i-frame, le seul moyen de le faire est d'utiliser JavaScript.

Ce sera le contenu de votre URL Canvas ( http://myapp.com/canvas-redirect above): 

<script>top.location="http://facebook.com/page_tab_url/app_1234"</script>

Notez le "top.location" - cela redirigera la fenêtre parente, pas seulement l'iframe vers l'onglet de la page. Lorsqu'un utilisateur arrive sur la page de dessin dans un navigateur de bureau, il est redirigé via JavaScript vers votre application Page Tab. Les utilisateurs Mobile seront redirigés par Facebook vers l'URL Mobile Site indiquée ci-dessus.

Test en mode bac à sable

Si votre application est en mode Sandbox, seuls les administrateurs, les développeurs ou les testeurs de l'application pourront la voir. En particulier, les utilisateurs qui ne sont pas connectés à Facebook ou qui sont connectés à Facebook mais ne sont ni administrateurs ni testeurs de l'application, ne pourront pas accéder à la page de canevas de l'application. Ils verront simplement une erreur 404. Afin de tester votre redirection pour mobile lorsque l'application est en mode bac à sable, vous devez vous assurer que vous êtes administrateur, développeur ou testeur de l'application ET que vous êtes connecté au site mobile de Facebook sur le navigateur Web de votre téléphone - ie Safari sur iOS et Chrome sur Android. Il ne suffit que pas d’être connecté à l’application Facebook Mobile App sur votre téléphone. Vous devez également être connecté à l’aide du navigateur. 

Une note sur les rôles d'utilisateur

Vous pouvez configurer les rôles d'utilisateur de l'application en cliquant sur l'onglet "rôles" dans les paramètres de l'application. Vous pouvez ajouter un utilisateur Facebook ou un groupe Facebook en tant que rôle. (Si vous ajoutez un groupe, tous les utilisateurs de ce groupe auront le rôle spécifié dans l'application). Pour qu'un utilisateur ait un rôle spécifique dans une application, il doit:

(Edité pour refléter la mise à jour de l'interface utilisateur des paramètres de développement et la lisibilité)}

58
Ben

En guise de mise à jour, Facebook redirige maintenant automatiquement vers votre site Web sans avoir besoin de piratage.

Pour ce faire, assurez-vous que vous avez ajouté une plate-forme de site Web à votre application et y insérez l'URL de votre mobile.

3
Andrew Mallonee

J'ai eu du mal à comprendre comment accéder aux onglets des pages avec le mobile et, grâce à Ben dans un commentaire précédent, j'ai trouvé un moyen. Tout d'abord, vous ne pouvez pas accéder aux onglets de page avec votre téléphone portable, vous devrez donc l'indiquer à l'endroit où votre onglet de page prend sa source. Facebook peut le faire pour vous si vous utilisez une toile, mais si vous y accédez avec un ordinateur de bureau, vous serez redirigé vers votre lien de toile, pas vers l'onglet de votre page. Voici comment nous le résolvons:

-

1) Allez dans votre application (développeurs Facebook) sous Paramètres - Basique

2) Copiez votre URL de l’onglet de page de la section de l’onglet de page (quelque chose comme http://yourpagetab.votredomaine.com ), et collez-le dans votre URL du site mobile dans le Section Web mobile .

3) Faites de même avec la section App sur Facebook , mais au lieu de la pointer dans l'onglet de votre page, vous devrez utiliser un fichier de redirection. Utilisons http://yourpagetab.yourdomain.com/redirection.php?fb

Notez que vous devez utiliser? Fb à la fin de votre lien. Cela ne fait rien, mais Facebook le veut. En fait, cela pourrait être? N'importe quoi et probablement seulement?

4) Créez ce fichier redirection.php (n’ajoutez pas le? Fb) et ajoutez-y ce code

<script>top.location="http://facebook.com/your_fb_page/your_page_tab"</script>

Vous devez remplacer/votre_fb_page/votre_page_tab par le lien vers votre onglet de page.

5) Enregistrez-le!

-

Maintenant, tout ce que vous avez à faire est d’utiliser l’URL de la page de canevas que Facebook vous fournit (sous App sur Facebook ). Si des personnes cliquent dessus et sont sur le bureau, elles seront redirigées dans l'onglet de la page. S'ils sont sur mobile, ils seront redirigés vers votre site web hébergeant l'onglet de la page.

Si vous utilisez la passerelle de ventilateur (l'utilisateur doit aimer votre page avant d'accéder à votre onglet de page): cela ne fonctionnera pas, car l'utilisateur du mobile restera bloqué sur la porte de votre ventilateur.

La seule solution consiste à désactiver la porte du ventilateur ou à utiliser Mobile Detect (vous pouvez le rechercher sur Github) et à ne le désactiver que pour les utilisateurs se trouvant sur mobile. C'est un petit prix à payer si vous voulez que votre onglet de page fonctionne avec les utilisateurs mobiles. Les utilisateurs de bureau devront toujours aimer votre page pour voir votre onglet de page.

1
Jason Lemay

vous pouvez également utiliser un lien comme celui-ci pour arrêter Facebook de rediriger les mobiles

https://www.facebook.com/MyAppName/?sk=app_11111-APP-ID-11111&ref=ts

0
Alex Halo

Voici le code php que j'utilise pour la redirection:

// Mobile_Detect
require 'Mobile_Detect.php';

$detect = new Mobile_Detect;

if (strpos('https://' . $_SERVER['HTTP_REFERER'] . $_SERVER['REQUEST_URI'], 'facebook.com') !== false && $detect->isMobile()) {
    echo '<html><head><script type="text/javascript">window.top.location.href = "https://yourappurl.com";</script></head><body></body></html>';
    die();
}
0
ghuroo

Je suis l'un des développeurs de HTML statique. Nous avons en fait une fonctionnalité intégrée à l'application qui génère maintenant des liens intelligents et raccourcis qui fonctionnent pour les ordinateurs de bureau et mobiles. Si vous cliquez sur l'icône "+" en haut de l'éditeur, un lien pouvant être partagé apparaît.

Si vous utilisez ce lien, nous faisons un peu plus de magie pour que vos onglets tiennent mieux sur de petits écrans.

Edit: nous avons abandonné le formatage spécial, car il était glitchy sur les appareils iOS.

0
jpadvo