tutorial - Configuración de la altura de las pestañas de iframe para las páginas de perfil de Facebook

static html iframe tabs 2017

Question

Como sabemos, Facebook introdujo las pestañas iframe para Pages . He desarrollado una aplicación y he agregado la pestaña de la aplicación en una página de perfil, la pestaña de la aplicación se abre en un iframe de acuerdo con la actualización "iframe Tabs for Pages". El problema es que la altura de la página no está ajustada y no puede eliminar las barras de desplazamiento para mostrar la página completa sin barras de desplazamiento. Todas las soluciones que encontré funcionan para la página de lienzo de la aplicación pero no para la página de la pestaña de la aplicación.

¿Cómo podemos hacer eso?

Answer 1

Hola chicos ... También estaba teniendo problemas con eso. He intentado una gran cantidad de soluciones y sugerencias, y nunca funcionaron para mí. Después de cambiar la biblioteca de jquery 1.6 a la 1.5.1 funcionó. Verifica si ese es tu problema.

Ahora estoy tratando de saber por qué diablos no funciona con la versión 1.6 de jquery.

Answer 2

Es bastante fácil de lograr. Debe configurar la aplicación en la pestaña Integración de Facebook como un IFRAME y el tamaño del marco como "Cambiar el tamaño automático".

Ahora, en su servidor, debe agregar el siguiente código antes de la etiqueta </BODY> :

<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
    FB.Canvas.setSize();
</script>  

Esto lo redimensionará automáticamente. También ayuda si agrega desbordamiento: oculto a la etiqueta BODY.

Answer 3

Facebook cambió recientemente algo, ahora su archivo de pestañas también necesita el método fb.init . de lo contrario, el cambio de tamaño no funcionará. así que use esto en su página de pestañas también

    <script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function() 
{
    FB.init({ appId: ''YOUR APP ID'', 
    status: true, 
    cookie: true,
    xfbml: true,
    oauth: true});

    FB.Canvas.setAutoResize();
    FB.Canvas.setAutoGrow();
}
    </script>

Answer 4

La siguiente guía me ayudó con el mismo problema:

http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/

En resumen, haz lo siguiente:

• Cambie su "Tamaño de marco de imagen" a "Cambio de tamaño automático"

• Cargar JavaScript SDK de Facebook

agregue el siguiente código justo antes de la etiqueta </body> de su página de índice:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : ''YOUR-APP-ID-HERE'',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>

• Use FB.Canvas.setSize ()

Coloque el siguiente código antes de la etiqueta </head> :

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

Eso debería hacerlo, ¡espero que ayude!

Answer 5

Para alguien como yo, que probó todo lo anterior, fue en vano, esto es lo que finalmente funcionó para mí. Tomado de esta página: https://www.facebook.com/note.php?note_id=10150149060995844

Antes de </head> :

<script type="text/javascript">

window.fbAsyncInit = function() {

FB.Canvas.setSize({ height: ''HEIGHT YOU WANT'', width: ''WIDTH YOU WANT'' });

}

// Do things that will sometimes call sizeChangeCallback()

function sizeChangeCallback() {

FB.Canvas.setSize({ height: ''HEIGHT YOU WANT'', width: ''WIDTH YOU WANT'' });

}

</script>

Entonces antes de </body> :

<script type="text/javascript">

                FB.init({
                    appId: ''XXXXXXXXXXX'', //Your facebook APP here
                    status: true, // check login status
                    cookie: true, // enable cookies to allow the server to access the session
                    xfbml: true// parse XFBML
                });

        </script> 

Answer 6

Código actualizado para todos los que tienen problemas:

1) Establezca su aplicación "Altura del lienzo" a "Fluido".

2) Copie y pegue el siguiente código antes de la etiqueta <body> de cierre.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
  // Called when FB SDK has been loaded
  window.fbAsyncInit = function () {
    // Initialize the FB javascript SDK
    FB.init({
      appId: ''[YOUR APP ID]'',
      status: true,
      cookie: true,
      xfbml: true
    });

    // Auto resize FB Canvas
    FB.Canvas.setAutoGrow();
  };

  // Load the FB SDK Asynchronously
  (function (d) {
    var js, id = ''facebook-jssdk''; if (d.getElementById(id)) { return; }
    js = d.createElement(''script''); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName(''head'')[0].appendChild(js);
  } (document));

</script>