Modificar las dimensiones de una pestaña de Facebook

Modificar las dimensiones de una pestaña de Facebook

Muchas veces, cuando implementamos pestañas para Facebook, aparecen barras de scroll si superamos las dimensiones predeterminadas de 810px de ancho por 846px de alto. No podemos cambiar el ancho de las pestañas de Facebook, pero el alto es virtualmente infinito como en cualquier página web.

Podemos modificar el alto de la pestaña fácilmente siguiendo estos pasos:

1.- Crea una aplicación en Facebook y añádela como pestaña a alguna de tus páginas de fans. En este artículo explico como crear paso a paso una pestaña de Facebook.

2.- En el código de la aplicación, deberás insertar esta función para iniciar una sesión y crear un objeto FB. Al ser un javascript, es recomendable agregarlo justo antes de la etiqueta . Es necesario que la aplicación que hayamos creado utilice el SDK de Facebook, que no es más que un conjunto de archivos que deberás descargar desde aquí para incorporar las funciones necesarias para que nuestra APP interactue con Facebook. Ten en cuenta que deberás cambiar el id de aplicación en esta función.

// Incluir sdk de Facebook

require ‘facebook/facebook.php’;

print ‘<div id=»fb-root»></div>

<script src=»https://connect.facebook.net/en_US/all.js»></script>

<script>

FB.init({

appId : ‘xxxxxxxxxxxxxxx’,

status : true, // check login

cookie : true, // habilitar cookies

xfbml : true// parse XFBML

});

</script>’;

3.- Agrega estas dos funciones javascript a tu código. Son las responsables de modificar el alto de la pestaña una vez se haya creado el objeto FB mediante la función anterior. En esta caso redimensionamos la pestaña para tener 1350px de alto, pero puedes cambiar este valor por cualquier otro.

 

//Evento de inicio asincrono de sesión

print ‘<script type=»text/javascript»>

window.fbAsyncInit = function() {

FB.Canvas.setSize({ height: ‘1350’, width: ‘810’ });

}

// Modificar la función sizeChangeCallback() 

function sizeChangeCallback() {

FB.Canvas.setSize({ height: ‘1350’, width: ‘810’ });

}

</script>’;

Con estas líneas de código podrás eliminar esas antiestéticas barras de scroll de tus pestañas de Facebook y conseguir una integración completa de tu APP en el entorno de la red social.

¿No paras en todo el día y aún así no llegas a todo?

Curso de productividad personal
Guía para trabajar de forma más inteligente
Consigue totalmente GRATIS estas 10 lecciones directamente aplicables a tu trabajo para aprovechar mejor tu tiempo y dejar de agobiarte por tener demasiado que hacer.

Deja un comentario ¡Tu opinión me interesa!

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ya casi somos 5.000 trabajadores inteligentes. ¿Te unes a nosotros?