facebook-social-plugins - page - iframe facebook

Ancho de página de respuesta Plugin de página

Question

Facebook presentó un nuevo complemento de página para reemplazar el complemento de cuadro Me gusta.

Documentación: https://developers.facebook.com/docs/plugins/page-plugin/

Estoy reemplazando el complemento Like Box con este nuevo complemento. En algunos sitios web he usado este código CSS para hacer que el complemento responda dentro de un elemento:

 .fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] {width: 100% !important;}

Sustituir esto con este código no funciona:

 .fb-page, .fb-page span, .fb-page span iframe[style] {width: 100% !important;}

El código del complemento de mi página se ve así (no proporciona un atributo de ancho de datos):

<div class="fb-page" data-href="https://www.facebook.com/MyFacebookPage" data-height="1200" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"></div>

Parece que Facebook ha agregado un elemento div con un elemento de estilo en línea dentro del DOM cargado por el iframe:

<div style="min-width: 280px; width: 340px;" id="u_0_0">
...content of the plugin...
</div>

Cuando ajuste este ancho al 100%, cada elemento se alinea en todo el ancho excepto la foto de portada.

¿Es posible darle a este nuevo plugin de página un comportamiento receptivo al igual que con el complemento de cuadro Me gusta?

Answer 1

¡No olvide el campo data-href! Para mí, los comentarios funcionaban sin él, pero no respondían. Y, por supuesto, ancho de datos = ''100%''

Answer 2

A partir de Graph API 2.3, Facebook proporciona un código similar al siguiente para el plugin de comentarios:

<div class="fb-comments"
data-href="http://absolute.url"
data-numposts="5">
</div>

Agregue un data-width="100%" para que sea semi-sensible de la siguiente manera:

<div class="fb-comments" data-href="http://absolute.url" data-numposts="5" data-width="100%"> </div> ^{Semi receptivo porque el complemento no cambia de tamaño en el cambio de tamaño de la página. El tamaño depende del tamaño de la pantalla cuando se carga el complemento.}

Answer 3

Aquí hay un cambio de tamaño dinámico de iframe include way, con algún rerendimiento retrasado en el evento de cambio de tamaño:

function _facebook() {
var parent = document.getElementById(''facebook'');
var width = (window.innerWidth > 540) ? 500 : window.innerWidth - 40;
if (parent.firstChild && parent.firstChild.width == width) { return; }
var url = ''https://www.facebook.com/plugins/page.php?href=YOUR_FACEBOOK_PAGE_URL&tabs=messages&width=''+width+''&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=YOUR_APP_ID'';
var i = document.createElement(''iframe'');
i.src = url;
i.width = width;
i.height = 500;
i.style = ''border:none;overflow:hidden'';
i.scrolling = "no";
i.frameborder = "0";
i.allowTransparency = "true";
while (parent.firstChild) { parent.removeChild(parent.firstChild); }
parent.appendChild(i);
}
_facebook();
$(window).resize(function() {
clearTimeout(window.resizedFinished);
window.resizedFinished = setTimeout(function(){
_facebook();
}, 250);
});

Answer 4

El nuevo ancho de " Plugin de página " de Facebook varía de 180px a 500px según la documentación.

• Si se configura debajo de 180px un ancho mínimo de 180px
• Si se configura por encima de 500px un ancho máximo de 500px

Con ancho adaptativo

A diferencia de like-box, este complemento impone sus límites al ajustarse a los valores límite si se configura incorrectamente.

Para pantallas pequeñas / comportamientos receptivos

• Al renderizar en pantallas más pequeñas, imponer el width descuento en el contenedor del complemento y el plugin trataría de encajar.

• El complemento se renderiza en un ancho menor (para que quepa en pantallas más pequeñas) automáticamente, si el contenedor es más delgado que el width configurado.

• Puede escalar el contenedor en el móvil y el complemento se ajustará siempre que tenga un mínimo de 180px .

Sin ancho adaptativo

• El complemento se representará en el ancho especificado, independientemente del ancho del contenedor

Answer 5

Esto no funciona demasiado bien cuando tienes el complemento colocado en una columna delgada, como una barra lateral, por ejemplo. En pantallas de tamaño mediano, estas suelen tener un ancho inferior a 280 px.

.fb-page,
.fb-page span,
.fb-page span iframe[style] {
width: 100% !important;
}

Este es el código que utilizo para evitar que el complemento se rompa fuera de un contenedor de embalaje. A diferencia de la vieja caja similar a mosaico, esta simplemente se desborda, ocultando el contenido desbordado.

Answer 6

Estoy poniendo esto aquí para aquellos que tenían el mismo problema que yo y no pude encontrar su respuesta aquí entre los comentarios o en cualquier otra página de .

Agregué el complemento de la página de Facebook con la configuración que lo ajustaría al ancho del contenedor.

data-adapt-container-width="true"

Sin embargo, uno o más elementos dentro del elemento iframe o Javascript SDK tenían un ancho de 340px, por lo que el complemento de página no se adapta al ancho del contenedor. Si bien debe tener un mínimo de 180px y un máximo de 500px.

Sin embargo, el código provisto por Facebook faltaba algo.

<div class="fb-page" data-href="https://www.facebook.com/Paras-Design-393209377418188" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"></div>

Al agregar manualmente data-width="500" el plugin de página respondió como se esperaba y se adaptó al ancho del contenedor hasta un ancho máximo de 500px.

Espero que esto ayude a cualquiera a enfrentar el mismo problema.

Answer 7

Estoy usando la solución propuesta por Robert Smith con ancho máximo en lugar de ancho:

.fb-page,
.fb-page span,
.fb-page span iframe[style] {
max-width: 100% !important;
}

Además, estoy usando la propuesta de Yugal Jindle y entonces

data-width="555"

y

data-adapt-container-width="true"

¡Ahora mi página está bien! ¡Muchas gracias!

Answer 8

He refinado a Twentyfortysix para responder un poco, solo para activar el evento después de que el cambio de tamaño haya terminado.

Además, agregué cheques para el ancho de la ventana, por lo que no activará la reinicialización en Android.

(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/en_EN/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, ''script'', ''facebook-jssdk''));
jQuery(document).ready(function($) {
var oldwidth = $(window).width();
var timeout;
var recalc = function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
var container_width = $(''#fbcontainer'').width();
$(''#fbcontainer'').html(''<div class="fb-page" '' +
''data-href="YOUR FACEBOOK PAGE URL"'' +
'' data-width="'' + container_width + ''" data-height="750" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="YOUR FACEBOOK PAGE URL"><a href="YOUR FACEBOOK PAGE URL">YOUR FACEBOOK PAGE TITLE</a></blockquote></div></div>'');
if(typeof FB !== ''undefined'') {
FB.XFBML.parse( );
}
}, 100);
};
recalc();
$(window).bind("resize", function(){
if(oldwidth !== $(window).width()) {
recalc();
oldwidth = $(window).width();
}
});
});

Answer 9

Hemos superado algunas limitaciones de la capacidad de respuesta del complemento de Facebook utilizándolo como IFRAME, pero arrancando en tiempo de renderizado con un JavaScript que dimensiona dinámicamente el marco (y los parámetros de ancho / alto en la URL de SRC) para llenar el elemento contenedor.

Si el contenedor es mayor a 500px, para evitar tener una cuneta obvia en el lado derecho, simplemente agregamos una transformación de escala con algunos cálculos simples.

El evento de carga IFRAME se dispara cuando el SRC está inicialmente vacío (cuando lo iniciamos) y luego de nuevo cuando termina de cargarse cuando configuramos el SRC, pero simplemente cortocircuitamos si el atributo SRC ya existe.

En nuestro uso, no cambiamos el ancho del feed de Facebook para el uso de escritorio, y para las ventanas de mano / tableta, esos anchos son fijos por naturaleza (sí, atrapamos el cambio de orientación) pero si desea que el suyo se ajuste continuamente si el las dimensiones de la ventana del navegador cambian, puede volver a disparar el código como un ejercicio para usted.

Esto se prueba con Chrome y Safari, en el escritorio y iOS / Android:

<script>
function setupFBframe(frame) {
if(frame.src) return; // already set up
// get parent container dimensions to use in src attrib
var container = frame.parentNode;
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;
var src = ''https://www.facebook.com/plugins/page.php'' +
''?href=https%3A%2F%2Fwww.facebook.com%2FYourFacebookAddress%2F'' +
''&tabs=timeline'' +
''&width='' + containerWidth +
''&height='' + containerHeight +
''&small_header=true'' +
''&adapt_container_width=false'' + /* doesn''t seem to matter */
''&hide_cover=true'' +
''&hide_cta=true'' +
''&show_facepile=false'' +
''&appId'';
frame.width = containerWidth;
frame.height = containerHeight;
frame.src = src;
// scale up if container > 500px wide
if(containerWidth) > 500) {
var scale = (containerWidth / 500 );
frame.style.transform = ''scale('' + scale + '')'';
}
}
</script>
<style>
#facebook_iframe {
transform-origin: 0 0;
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
}
</style>
<iframe frameborder="0" height="0" width="0" onload="var _this = this; window.setTimeout(function(){ setupFBframe(_this); },500 /* let dom settle before eval parent dimensions */ );"></iframe>

EDITAR: se olvidó del origen de la transformación, se eliminó la necesidad de ajustar a la izquierda / arriba para adaptar la escala. Gracias Io Ctaptceb

Answer 10

Para hacer que el nuevo complemento de página de Facebook responda en la carga de la página inicial, querrá eliminar el atributo de data-width y, en su lugar, agregar

data-adapt-container-width="true"

Esto hará que el complemento de la página de Facebook responda, pero solo en la página inicial , con un ancho mínimo de 180 píxeles.

Todavía estoy tratando de encontrar la forma de hacerlo realmente dinámico, a pesar de la advertencia de Facebook (publicaré una actualización si alguna vez encuentro la respuesta).

Sin cambio de tamaño dinámico

El plugin de página funciona con diseños receptivos, fluidos y estáticos. Puede usar consultas de medios u otros métodos para establecer el width del elemento principal, pero:

El complemento determinará su width en la carga de la página. No reaccionará a los cambios en el modelo de caja después de la carga de la página. Si desea ajustar el width del complemento en el cambio de tamaño de la ventana, manualmente debe reenviar el complemento.

Fuente: https://developers.facebook.com/docs/plugins/page-plugin

Puede hacer que responda dinámicamente reiniciando el widget en el tamaño del navegador, como lo sugirió Io Ctaptceb, pero al hacerlo corre el riesgo de consumir memoria muy rápidamente.

Yugal Jindle tuvo una buena respuesta, pero quería aclarar que aún no he encontrado una manera de hacer que el plugin sea verdaderamente dinámico .

Answer 11

Parece que el complemento de la página de Facebook no ha cambiado en los últimos 5-7 años :) No fue receptivo desde el principio y aún no lo es ahora, incluso el parámetro nuevo Adapt to plugin container width no funciona o no lo hago entender cómo funciona

Estoy buscando la manera más simple posible de hacer PLUGIN SIZE 100% WIDTH , y parece que no es posible. Tonterías en lo mejor. ¿Cómo los diseñadores solucionan este problema?

Encontré la mejor decisión para este momento 2017 Oct:

.fb-page, .fb-page iframe[style], .fb-page span {
width: 100% !important;
}
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}

Esto permite no anular el ancho del tamaño de la pantalla para pantallas receptivas, pero aún se ve feo, porque se ejecutó en algún momento y no se estira ... Facebook no se preocupa del diseño de complementos en absoluto. Esa es la verdad.

Answer 12

esto funciona para mí (el ancho es forzado por javascript y el plugin de FB cargado a través de javascript)

<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/en_US/sdk.js#xfbml=1&version=v2.5&appId=443271375714375";
fjs.parentNode.insertBefore(js, fjs);
}(document, ''script'', ''facebook-jssdk''));
jQuery(document).ready(function($) {
$(window).bind("load resize", function(){
setTimeout(function() {
var container_width = $(''#container'').width();
$(''#container'').html(''<div class="fb-page" '' +
''data-href="http://www.facebook.com/IniciativaAutoMat"'' +
'' data-width="'' + container_width + ''" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>'');
FB.XFBML.parse( );
}, 100);
});
});
</script>
<div id="container" style="width:100%;">
<div class="fb-page" data-href="http://www.facebook.com/IniciativaAutoMat" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>
</div>

Answer 13

para aquellos de ustedes que buscan una solución JS para tamaños inferiores a 280

aquí está mi código snippit:

facebookScale = function () {
var adjustWidth;
adjustWidth = $(''.facebook-likebox'').width() / 280;
return $(''.fb-page'').css({
''-webkit-transform'': ''scale('' + adjustWidth + '')'',
''-moz-transform'': ''scale('' + adjustWidth + '')'',
''transform'': ''scale('' + adjustWidth + '')''
});
}
$(function(){
$(''.fb-page'').on(''resize DOMSubtreeModified'', facebookScale);
$(window).on(''resize'', facebookScale);
})

editar. asegúrese de que lo siguiente esté en el CSS:

.fb-page{
transform-origin: 0 0;
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
}

Answer 14

¡Hola a todos!

Mi versión con una demostración en vivo (JavaScript nativo):

1). Código de Javascript en un archivo separado (la mejor solución):

Codepen

/* Vanilla JS */
function setupFBframe(frame) {
var container = frame.parentNode;
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;
var src =
"https://www.facebook.com/plugins/page.php" +
"?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook" +
"&tabs=timeline" +
"&width=" +
containerWidth +
"&height=" +
containerHeight +
"&small_header=false" +
"&adapt_container_width=false" +
"&hide_cover=true" +
"&hide_cta=true" +
"&show_facepile=true" +
"&appId";
frame.width = containerWidth;
frame.height = containerHeight;
frame.src = src;
}
/* begin Document Ready
############################################ */
document.addEventListener(''DOMContentLoaded'', function() {
var facebookIframe = document.querySelector(''#facebook_iframe'');
setupFBframe(facebookIframe);
/* begin Window Resize
############################################ */
// Why resizeThrottler? See more : https://developer.mozilla.org/ru/docs/Web/Events/resize
(function() {
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function resizeThrottler() {
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
}, 66);
}
}
function actualResizeHandler() {
document.querySelector(''#facebook_iframe'').removeAttribute(''src'');
setupFBframe(facebookIframe);
}
})();
/* end Window Resize
############################################ */
});
/* end Document Ready
############################################ */

@import url(''https://fonts.googleapis.com/css?family=Indie+Flower'');
body {
font-family: ''Indie Flower'', cursive;
}
.container {
max-width: 1170px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.content {
overflow: hidden;
}
.left_sidebar {
position: relative;
float: left;
width: 30%;
max-width: 300px;
}
.main_content {
position: relative;
float: left;
width: 70%;
background-color: #DDEFF7;
}
/* ------- begin Widget Facebook -------------- */
.widget--facebook--container {
padding: 10px;
border: 1px solid #000;
}
.widget-facebook {
height: 500px;
}
.widget-facebook .facebook_iframe {
border: none;
}
/* ---------- end Widget Facebook---------------- */
/* ----------------- no need -------------------- */
.block {
color: #fff;
height: 300px;
background-color: #00A7F7;
border: 1px solid #005dff;
}
.block h3 {
line-height: 300px;
text-align: center;
}

<!-- Min. responsive 180px -->
<div class="container">
<div class="content">
<div class="left_sidebar">
<aside class="block">
<h3>Content</h3>
</aside>
<!-- begin Widget Facebook
========================================= -->
<aside class="widget--facebook--container">
<div class="widget-facebook">
<iframe id="facebook_iframe" class="facebook_iframe"></iframe>
</div>
</aside>
<!-- end Widget Facebook
========================================= -->
<aside class="block">
<h3>Content</h3>
</aside>
</div>
<div class="main_content">
<h1>Responsive width Facebook Page Plugin</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
</div>
</div>
</div>

2). El código Javascript está escrito en HTML:

Codepen

@import url(''https://fonts.googleapis.com/css?family=Indie+Flower'');
body {
font-family: ''Indie Flower'', cursive;
}
.container {
max-width: 1170px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.content {
overflow: hidden;
}
.left_sidebar {
position: relative;
float: left;
width: 30%;
max-width: 300px;
}
.main_content {
position: relative;
float: left;
width: 70%;
background-color: #DDEFF7;
}
/* ------- begin Widget Facebook -------------- */
.widget--facebook--container {
padding: 10px;
border: 1px solid #000;
}
.widget-facebook {
height: 500px;
}
.widget-facebook .facebook_iframe {
border: none;
}
/* ---------- end Widget Facebook---------------- */
/* ----------------- no need -------------------- */
.block {
color: #fff;
height: 300px;
background-color: #00A7F7;
border: 1px solid #005dff;
}
.block h3 {
line-height: 300px;
text-align: center;
}

<!-- Vanilla JS -->
<!-- Min. responsive 180px -->
<div class="container">
<div class="content">
<div class="left_sidebar">
<aside class="block">
<h3>Content</h3>
</aside>
<!-- begin Widget Facebook
========================================= -->
<aside class="widget--facebook--container">
<div class="widget-facebook">
<script>
function setupFBframe(frame) {
if (frame.src) return; // already set up
var container = frame.parentNode;
console.log(frame.parentNode);
var containerWidth = container.offsetWidth;
var containerHeight = container.offsetHeight;
var src =
"https://www.facebook.com/plugins/page.php" +
"?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook" +
"&tabs=timeline" +
"&width=" +
containerWidth +
"&height=" +
containerHeight +
"&small_header=false" +
"&adapt_container_width=false" +
"&hide_cover=true" +
"&hide_cta=true" +
"&show_facepile=true" +
"&appId";
frame.width = containerWidth;
frame.height = containerHeight;
frame.src = src;
}
var facebookIframe;
/* begin Window Resize
############################################ */
// Why resizeThrottler? See more : https://developer.mozilla.org/ru/docs/Web/Events/resize
(function() {
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function resizeThrottler() {
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
}, 66);
}
}
function actualResizeHandler() {
document.querySelector(''#facebook_iframe'').removeAttribute(''src'');
setupFBframe(facebookIframe);
}
})();
/* end Window Resize
############################################ */
</script>
<iframe id="facebook_iframe" class="facebook_iframe" onload="facebookIframe = this; setupFBframe(facebookIframe)"></iframe>
</div>
</aside>
<!-- end Widget Facebook
========================================= -->
<aside class="block">
<h3>Content</h3>
</aside>
</div>
<div class="main_content">
<h1>Responsive width Facebook Page Plugin</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum earum, temporibus, maxime repudiandae obcaecati veritatis, odio dolore provident tenetur perferendis ipsam, rem esse vitae laudantium voluptatem iste aliquam optio ab.</p>
</div>
</div>
</div>

Gracias storsoc !

¡Lo mejor para todos y que tengas un buen día!