Configuración de la altura de iframe Pestañas para el perfil de Facebook Páginas

Question

Como sabemos, Facebook ha introducido iframe Tabs for 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

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

Ahora, en su servidor, hay que añadir 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> 

Este autogeneradores, cambiar su tamaño. También ayuda si agrega desbordamiento: oculto a la etiqueta BODY.

Answer 2

La siguiente guía me ayudó a través del mismo problema:

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

En resumen, haga lo siguiente:

• Cambiar el "Tamaño de marco flotante" a "de tamaño automático"

• Cargar Javascript SDK de Facebook

añada el siguiente código 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> 

• Uso FB.Canvas.setSize()

Put 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 3

Hola chicos ... Estaba teniendo problemas también ... 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 4

facebook recientemente cambió 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á.a fin de utilizar esto en su página de pestaña, así

<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 5

código actualizado para que todos tengan problemas:

1) Establecer su aplicación "Altura lienzo" a "fluido".

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

<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> 

Answer 6

Para cualquier persona como yo que haya intentado 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 </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>