Los usuarios móviles no pueden acceder a la pestaña de la página de Facebook

Tengo un problema que no veo para financiar la solución. Tengo una pestaña en mi página de Facebook (una de esas aplicaciones estáticas de HTML: iFrame). No hay problemas para acceder desde una PC, sin embargo, cuando bash acceder a la pestaña desde un dispositivo móvil, dice:

“La página que solicitó no se encontró. Volver a la página anterior”

¿Hay alguna forma de que pueda crear una pestaña accesible en dispositivos móviles o simplemente redirigirlos a un dominio externo?

¡Gracias!

Cómo crear una aplicación móvil en la pestaña de la página de Facebook

Para crear una aplicación de pestaña de página que tenga una versión móvil accesible (un sitio web externo al que se accede directamente, no a través de un iFrame de Facebook). Necesita agregar y configurar 3 “Plataformas” diferentes en la configuración del desarrollador de la aplicación. Estos se deben configurar de la siguiente manera:

Pestaña Página

Configure esto como lo haría normalmente.

  • Nombre de la pestaña de la página : el nombre que desea que aparezca en la pestaña de la página
  • URL de pestaña de página : la url en la que aloja la aplicación de pestaña de página (por ejemplo, http://myapp.com/page-tab )
  • URL de la pestaña de página segura : lo mismo, pero con https en el frente (por ejemplo, https://myapp.com/page-tab )

Sitio web

Aquí es donde configuras la url para tu sitio móvil

  • URL del sitio móvil : esta es la URL a la que desea redireccionar a los usuarios de dispositivos móviles (por ejemplo, http://myapp.com/mobile-version )
  • URL del sitio : se usa para Facebook Connect. Si no usa Facebook Connect, solo ingrese su url móvil aquí también.

Aplicación en Facebook

Esta será la puerta de entrada a tu aplicación. Los usuarios móviles que lleguen a esta página serán redirigidos al sitio web móvil . Puede usar javascript para redireccionar usuarios de escritorio a su aplicación de la pestaña de página de Facebook .

  • Canvas App Page : este será http://apps.facebook.com/my-app-namespace , este es el enlace que publicará en su muro de Facebook o en sus anuncios, o en cualquier otro lugar que desee vincular a la pestaña de su página
  • Url de canvas : es un enlace a una página de su aplicación que se incorporará como un iframe en la página de la aplicación de canvas. Utilizará esta página para redirigir a la pestaña de su página usando JavaScript. por ejemplo, http://myapp.com/canvas-redirect
  • URL segura de Canvas : es la misma que la anterior, pero con https en el frente (por ejemplo, ” https://myapp.com/canvas-redirect “)

Su secuencia de comandos de redireccionamiento Canvas

Desea que las personas que lleguen a su aplicación de canvas en un navegador de escritorio sean redirigidas a la aplicación de tabs de su página. Como está cargado dentro de un i-frame, la única forma de hacerlo es usar JavaScript.

Este será el contenido de su URL de Canvas ( http://myapp.com/canvas-redirect ):

 

Tenga en cuenta la “top.location” : esto redirigirá la ventana principal, no solo el iframe a la pestaña de la página. Cuando un usuario llega a la página de canvas en un navegador de escritorio, se le redirige a través de JavaScript a su aplicación de pestaña de página . Los usuarios de dispositivos móviles serán redirigidos por Facebook a la URL del sitio para dispositivos móviles que especificó anteriormente.

Prueba en modo Sandbox

Si su aplicación se encuentra en modo Sandbox, solo los administradores, desarrolladores o probadores de la aplicación podrán verla. En particular, los usuarios que no iniciaron sesión en Facebook, o que iniciaron sesión en Facebook pero que no son administradores o probadores de la aplicación, no podrán acceder a la página de canvas de la aplicación; solo verán un error 404. Para probar su redireccionamiento móvil cuando la aplicación está en modo de espacio aislado, debe asegurarse de ser un administrador, desarrollador o tester de la aplicación Y ha iniciado sesión en el sitio móvil de Facebook en el navegador web de su teléfono, es decir, Safari en iOS y Chrome en Android. No es suficiente iniciar sesión en la aplicación móvil de Facebook en su teléfono, también debe haber iniciado sesión con el navegador.

Una nota sobre los roles del usuario

Puede configurar las funciones de usuario de la aplicación haciendo clic en la pestaña “roles” en la configuración de la aplicación. Puede agregar un usuario de Facebook o un grupo de Facebook como cualquiera de los roles. (Si agrega un grupo, todos los usuarios de ese grupo tendrán el rol especificado en la aplicación). Para que un usuario tenga un rol específico en una aplicación, debe:

(Editado para reflejar la interfaz de usuario de configuración de desarrollador actualizada y la legibilidad)

Como una actualización de esto, Facebook ahora redirige automáticamente a su sitio web sin necesidad de hacks.

Para hacer esto, asegúrese de haber agregado una plataforma de sitio web a su aplicación y poner su URL móvil allí.

Me costó trabajo averiguar cómo acceder a las tabs de la página con el móvil y, gracias a Ben en un comentario anterior, encontré la manera. En primer lugar, no puede acceder a las tabs de la página con su teléfono móvil, por lo que deberá señalarlo desde la pestaña de la página en la que se encuentra. Facebook puede hacer eso por usted si está utilizando canvas, pero si accede a él con una computadora de escritorio, será redireccionado a su enlace de canvas, no a la pestaña de su página. Así es como lo solucionamos:

1) Vaya a su aplicación (desarrolladores de Facebook) en Configuración – Básico

2) Copie la URL de su pestaña de página de la sección de la pestaña de página (algo como http://yourpagetab.tudominio.com ) y pasela en la URL de su sitio móvil a la sección de Web móvil .

3) Haz lo mismo con la aplicación en la sección de Facebook , pero en lugar de apuntarla a la pestaña de tu página, deberás usar un archivo de redirección. Usemos http://yourpagetab.yourdomain.com/redirection.php?fb

Tenga en cuenta que debe usar? Fb al final de su enlace. No hace nada, pero Facebook lo quiere. ¿En realidad podría ser? ¿Algo y probablemente solo?

4) Cree ese archivo redirection.php (no agregue el? Fb) y agregue este código en él

  

Tienes que reemplazar / your_fb_page / your_page_tab con el enlace a la pestaña de tu página.

5) ¡Guárdalo!

Ahora, todo lo que tienes que hacer es usar la url de la página Canvas que Facebook te brinda (en la aplicación en Facebook ). Si las personas hacen clic en él y están en el escritorio, serán redirigidos a la pestaña de la página. Si están en un dispositivo móvil, serán redirigidos a su sitio web que aloja la pestaña de la página.

Si está utilizando la puerta de abanico (el usuario tiene que agradar su página antes de acceder a la pestaña de su página): esto no funcionará ya que el usuario del móvil se quedará atrapado en la puerta de su abanico.

La única forma de solucionarlo es desactivar la puerta del ventilador o usar Mobile Detect (puede buscarlo en Github) y deshabilitarlo solo para usuarios que están en el móvil. Es un precio pequeño a pagar si desea que la pestaña de su página funcione con los usuarios de dispositivos móviles. A los usuarios de escritorio aún les gustará su página para ver la pestaña de su página.

también puedes usar un enlace como este para evitar que facebook redirija los móviles

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

Soy uno de los desarrolladores de HTML estático. En realidad, ahora tenemos una función incorporada en la aplicación que genera enlaces cortos e inteligentes que funcionan para dispositivos móviles y computadoras de escritorio. Si haces clic en el ícono “+” en la parte superior del editor, se abrirá un enlace para compartir.

Si usas ese enlace, hacemos un poco de magia adicional para que tus tabs se ajusten mejor en pantallas pequeñas.

Editar: descartamos el formato especial porque era un error en los dispositivos con iOS.

Aquí está el código php que uso para la redirección:

 // 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 ''; die(); }