Pregunta:

Fecha: 14-12-2015 18:53:26 (En Español)

Page Plugin de Facebook al 100% del contenedor[Resuelta]

Page Plugin que ocupe el 100% del contenedor
Buenas comunidad, hay alguna forma de que el Page Plugin de facebook ocupe el 100% del cotenedor. Por que estoy armando un pequeño sitio web con bootstrap y vieron que bootstrap tiene un sistema de grilla de 12 columna que a medida que el ancho del navagador disminuye las columnas por medio de media query cambian su ancho.

Bueno el tema es que yo quiero poner la caja de Page Plugin en un contenedor y que ocupe el 100% de ese contenedor.
Por lo que vi en la documentación de facebook el ancho se maneja por medio del atributo data-width y su tamaño es fijo en px.

Asi que por medio de jquery trate de cambiar el valor de dicho atributo para truchear de algun forma su ancho a medida que la pantalla del navegador vaya disminuyendo o agrandado.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Facebook</title>
   <style>
      #contenedor {
         width: 260px;
      }
   </style>
   <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
   <script>
   $( window ).resize(function() {
            //obtengo el ancho del navegador.
           var ancho = $(window).width();

         //hago las comprobaciones correspodientes
         if(ancho < 1200 && ancho > 992)
         {
            $('#facebook').attr('data-width', '210');

         }
         else if(ancho < 992) {
            $('#facebook').attr('data-width', '218');
         }
         else {
            $('#facebook').attr('data-width', '260');
         }
      });
   </script>
</head>
<body>
   <div id="contenedor">
      <div id="fb-root"></div>
         <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.5&appId=666314503393917";
            fjs.parentNode.insertBefore(js, fjs);
         }
            (document, 'script', 'facebook-jssdk'));
      </script>
         <div id="facebook" class="fb-page" data-width="500" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="true">
            <div class="fb-xfbml-parse-ignore">
               <blockquote cite="https://www.facebook.com/facebook">
                  <a href="https://www.facebook.com/facebook">Facebook</a>
               </blockquote>
            </div>
         </div>
   </div>
</body>
</html>

El tema es que cuando inspecciono el elemento veo que cambia el valor del atributo pero no hace nada, despues lei de nuevo la documentación de facebook y dice algo como que para cambiar el ancho de la caja de facebook habría que procesar de nuevo el plugins.

Espero que me puedan orientar un poco.

Desde ya muchas gracias como siempre Etiquetas: CSS - CSS3 - CSS3 @media - Facebook - HTML - HTML5 - JQuery - PHP - Pregunta Votos: 2 - Respuestas: 5 - Vistas: 9 Compartir en: Google Facebook Twitter LinkedIn Link

Respuestas:

1

Fernando Mosquera Karma: 10200

Fecha: 15-12-2015 09:09:01 Te recomiendo que veas las etiquetas html y css despues de ejecutado el plugin, esto lo puedes hacer con los inspectores de elementos (naturalmente en los navegadores Ctrl+F12) o con un plugin para tu navegador (como el caso del Firebug).

Con los ispectores de elementos podrás modificar en vivo el width e identificar que estilos deberás aplicar / superponer.

Saludos, Votos: 1 - Link respuesta
0

Gonzalo Herrera Karma: 618

Fecha: 15-12-2015 09:46:33 Hola Fernando eso es lo que estoy haciendo pero no se comporta como yo espero.

Vi tambien en la documentación de facebook que tiene el atributo data-adapt-container-width que se adapta al ancho de nuestro contenedor , hasta ahi bien pero despues cuando la pantalla del navegador el ancho es menor a 1200px se rompe el diseño por que el ancho del contenedor ocupa ahora 210px y el de la caja de facebook no se ajusta al nuevo ancho del contenedor.

Espero a ver expresado de la mejor manera.

¡Saludos! Votos: 0 - Link respuesta

Gonzalo Herrera Karma: 618

Fecha: 22-12-2015 02:51:54 Buenos días comunidad, disculpen si revivo el tema. Todavia sigo sin poder resolver este problemita con el atributo data-adapt-container-width se adapta al 100 % del contenedor, pero cuando el contenedor cambiar de tamaña ahi se rompe. Lo pude solucionar con jquery que recargue la pagina cuando este en un determinado ancho para que se vuelva ajustar al contenedor de nuevo y lo hace bien.
Pero el tema es que cada vez que ajusto el ancho de la pantalla entre un rango de ancho > 922 && ancho < 1200 se recarga de nuevo la pagina en si no lo veo como una solución optima

Dejo mi ejempo

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Facebook</title>
   <style>
      #contenedor {
         width: 350px;
      }
      /*--modifico el ancho del contedor dependiendo del ancho del navegador--*/
      @media (max-width: 1199px) and (min-width: 992px) {
         #contenedor {
            width: 200px;
         }
      }
   </style>
   <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
   <script>
   $( window ).resize(function() {
         //obtengo el ancho del navegador.
         var ancho = $(window).width();

            if(ancho < 1200 && ancho > 992)
            {
               //recargo todo el sitio
               window.setTimeout('location.reload()')
            }
            else {
               window.setTimeout('location.reload()')
            }
      });
   </script>
</head>
<body>
   <div id="contenedor">
      <div id="fb-root"></div>
         <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.5&appId=666314503393917";
            fjs.parentNode.insertBefore(js, fjs);
         }
            (document, 'script', 'facebook-jssdk'));
      </script>
         <div class="fb-page" data-width="500" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
            <div class="fb-xfbml-parse-ignore">
               <blockquote cite="https://www.facebook.com/facebook">
                  <a href="https://www.facebook.com/facebook">Facebook</a>
               </blockquote>
            </div>
         </div>
   </div>
</body>
</html>

¡Saludos! Votos: 1 - Link respuesta

1

Gonzalo Herrera Karma: 618

Fecha: 05-01-2016 05:27:41 Buenas tardes gente, encontre una posible solución de este foro Responsive width Facebook Page Plugin, lo que hace es que a medida que se achique la medida del navegador recargo el contenedor para que tome el nuevo ancho.

¡Saludos! Votos: 1 - Link respuesta

Fernando Mosquera Karma: 10200

Fecha: 10-07-2017 06:26:15 Hola Gonzalo, muy buena la última solución, aquí comparto una adaptación al estilo "plugin" para que pueda ser incluido facilmente, tan solo configurando las 3 variables (app_id, url_fan_page y nombre_fan_page)

Hay que tener presente que el máximo width permitido por el plugin de páginas de Facebook es de 500px;

Por otro lado, el ejemplo requiere de JQuery, observar que es incluido desde los CDN de Google. Si en tu código ya tienes disponible JQuery (porque lo has incluido antes) debes quitar la línea de inclusión desde Google (para evitar que se incluya 2 veces, lógicamente).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ejemplo Plugin de páginas Facebook Responsive</title>
    </head>
    <body>
        <h1>Ejemplo Plugin de páginas Facebook Responsive</h1>
        <div class="wallfb" style="width: 100%">
            <!-- aquí es donde se muestra el plugin, es necesario incluir este div donde se quiera mostrar-->
        </div>
        <p>Texto ejemplo, texto ejemplo, texto ejemplo, texto ejemplo...</p>
        <p>Texto ejemplo, texto ejemplo, texto ejemplo, texto ejemplo...</p>

        <!-- inicio de código que de debe colar antes de cerrar la etiqueta body-->
        <!-- si antes ya se incluyo jquery, la siguiente línea debe ser quitada-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <div id="fb-root"></div>
        <script type="text/javascript">
            //inicio configuración
            var app_id = 'TU_APP_ID';
            var url_fan_page = 'URL_COMPLETA_DE_LA_FAN_PAGE';
            var nombre_fan_page = 'NOMBRE_DE_LA_FAN_PAGE';
            //fin configuración

            //de aquí en adelante código de la implementación, no es necesario tocarlo.
            (function (d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id))
                    return;
                js = d.createElement(s);
                js.id = id;
                js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.9&appId=" + app_id;
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));

            $(document).ready(function () {
                $(window).bind("load resize", function () {
                    setTimeout(function () {
                        var container_width = $('.wallfb').width();
                        $('.wallfb').html('<div class="fb-page" data-href="' + url_fan_page + '" data-width="' + container_width + '" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true"><blockquote cite="' + url_fan_page + '" class="fb-xfbml-parse-ignore"><a href="' + url_fan_page + '">' + nombre_fan_page + '</a></blockquote></div>');
                        FB.XFBML.parse( );
                    }, 100);
                });
            });
        </script>
    </body>
</html>

Lee los comentarios del código, esta todo explicado (si tienes alguna consulta no dudes en dejarla como nuevo comentario).

Saludos a todos y buen código! Votos: 0 - Link respuesta

Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión

frjcbbae garagebible.com

Pregunta:

Page Plugin de Facebook al 100% del contenedor[Resuelta]

Respuestas:

secciones

La comunidad

Mi Cuenta