Responsive width page Facebook Plugin
Facebook a introduit un nouveau Plugin de Page pour remplacer le plugin Like box.
Documentation:https://developers.facebook.com/docs/plugins/page-plugin/
je remplace le plugin Like Box avec ce nouveau plugin. Sur certains sites Web, j'ai utilisé ce code CSS pour rendre le plugin responsive à l'intérieur d'un élément:
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] {width: 100% !important;}
remplacer ce code par ce code ne fonctionne pas:
.fb-page, .fb-page span, .fb-page span iframe[style] {width: 100% !important;}
mon code de plugin de page ressemble à ceci (ne pas fournir un attribut width):
<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>
on dirait que Facebook a ajouté un élément div avec un élément de style inline dans le DOM chargé par l'iframe:
<div style="min-width: 280px; width: 340px;" id="u_0_0">
...content of the plugin...
</div>
quand j'ajuste cette largeur à 100%, chaque élément est aligné à la pleine largeur sauf la photo de couverture.
il est possible de donner à ce nouveau plugin Page un comportement responsive tout comme avec le plugin Like box?
14 réponses
Facebook est nouveau"La Page Du Plugin " la largeur varie de 180px
500px
selon la documentation.
- si configuré ci-dessous
180px
mettre une largeur minimale de180px
- Si configuré ci-dessus
500px
mettre une largeur maximale de500px
Largeur Adaptative
contrairement à like-box ce plugin renforce ses limites en s'en tenant à les valeurs limites si mal configurées.
Pour les petits écrans / Sensible des comportements
lors du rendu sur des écrans plus petits, appliquez
width
sur le Plugin container et le plugin essayeraient de s'intégrer.le plugin rend à une plus petite largeur (pour s'insérer dans des écrans plus petits) automatiquement, si le conteneur est plus mince que le
width
.vous pouvez dimensionner dans le conteneur sur mobile et le plugin s'adaptera aussi longtemps qu'il obtient le minimum de
180px
insérer.
Sans Largeur Adaptative
- le plugin affichera la largeur spécifiée, quelle que soit la largeur du conteneur
cela ne fonctionne pas très bien quand vous avez le plugin placé dans une colonne mince, comme une barre latérale par exemple. Sur les écrans de taille moyenne, ceux-ci fonctionnent généralement en moins de 280px de largeur.
.fb-page,
.fb-page span,
.fb-page span iframe[style] {
width: 100% !important;
}
C'est le code que j'utilise pour empêcher le plugin de casser à l'extérieur d'un conteneur d'emballage. Contrairement à la vieille boîte comme qui tuerait, celui-ci déborde juste, cachant le contenu débordé.
cela fonctionne pour moi (la largeur est forcé par javascript et FB plugin chargé via 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>
Pour la Page Facebook Plugin responsive au chargement de la page initiale, vous voudrez supprimer le data-width
attribut et à la place Ajouter
data-adapt-container-width="true"
Cela rendra le Facebook de la Page Plugin réactif, mais uniquement sur la première page de rendu, avec une largeur minimale de 180px.
j'essaie toujours de trouver comment le rendre vraiment dynamiquement réactif, malgré la mise en garde de Facebook (je posterai une mise à jour si jamais je trouve le réponse.)
Pas De Redimensionnement Dynamique
le plugin Page fonctionne avec des mises en page sensibles, fluides et statiques. Vous peut utiliser des requêtes médias ou d'autres méthodes pour définir le
width
de la société mère élément, encore:le plugin va déterminer son
width
au chargement de la page. Il ne réagira pas des modifications au modèle de boîte après le chargement de la page. Si vous voulez ajuster le pluginwidth
sur la fenêtre redimensionner, vous devez manuellement plugin.
Source:https://developers.facebook.com/docs/plugins/page-plugin
vous pouvez le rendre dynamiquement réactif en réinitialisant le widget sur le navigateur redimensionner, comme Io Ctaptceb suggéré, mais en faisant cela vous courez le risque de manger la mémoire très rapidement.
Yugal Jindle avait une bonne réponse, mais je voulais clarifier cela je dois encore trouver un moyen de rendre le plugin vraiment dynamiquement responsive.
je mets ceci ici pour ceux qui ont eu le même problème que moi et n'ont pas pu trouver leur réponse ici entre les commentaires ou sur toute autre page stackoverflow.
j'ai ajouté Page Facebook Plugin avec des paramètres de l'ajuster à la largeur du conteneur.
data-adapt-container-width="true"
cependant, un ou plusieurs éléments dans l'élément iframe ou Javascript SDK ont été donnés la largeur de 340px ce qui fait que le Plugin de Page ne s'adapte pas à la largeur du conteneur. Et il devrait avoir un minimum de 180px et un maximum de 500px.
le code fourni par Facebook manquait cependant quelque chose.
<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>
En ajoutant manuellement data-width="500"
le Plugin Page a répondu comme prévu et adapté à la largeur du conteneur à une largeur maximale de 500px.
j'espère que cela aidera n'importe qui venant à travers le même problème.
voici mon code 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);
})
modifier. assurez-vous que ce qui suit est dans le css:
.fb-page{
transform-origin: 0 0;
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
}
Comme de l'API Graphique 2.3 Facebook fournit un code semblable au suivant pour le module de commentaires:
<div class="fb-comments"
data-href="http://absolute.url"
data-numposts="5">
</div>
Ajouter un data-width="100%"
pour le rendre semi-sensibles comme suit:
<div class="fb-comments"
data-href="http://absolute.url"
data-numposts="5"
data-width="100%">
</div>
Semi-responsive car, le plugin ne se redimensionne pas sur page redimensionner. La taille dépend de la taille de l'écran lorsque le plugin charge.
nous avons surmonté certaines limites de la réactivité du plugin Facebook en l'utilisant comme une IFRAME, mais bootstrapping au rendu avec du JavaScript qui dimensionne dynamiquement le cadre (et les paramètres Largeur/Hauteur dans L'URL SRC) pour remplir l'élément conteneur.
si le conteneur est plus grand que 500px, pour éviter d'avoir une gouttière évidente sur le côté droit, nous ajoutons simplement une échelle transformer avec quelques mathématiques simples.
l'événement iframe onload se déclenche lorsque SRC est d'abord vide (lorsque nous l'amorçons), puis de nouveau après qu'il ait terminé le chargement lorsque nous avons défini le SRC, mais nous ne pouvons tout simplement pas l'utiliser si L'attribut SRC existe déjà.
dans notre usage, Nous ne changeons pas la largeur du flux Facebook pour l'usage des postes de travail, et pour les viewports portables/tablettes, ces largeurs sont fixées par nature (Oui, nous piégeons le changement d'orientation) mais si vous voulez que le vôtre s'ajuste en permanence si les dimensions de la fenêtre du navigateur changent, vous pouvez juste relancer le code comme un exercice pour vous-même.
ceci est testé avec Chrome et Safari, sur le bureau et 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>
EDIT: oubli de transform-origin, suppression du besoin d'ajuster left / top pour accommoder l'échelle. Merci Io Ctaptceb
j'utilise la solution proposée par Robert Smith avec max-width au lieu de width:
.fb-page,
.fb-page span,
.fb-page span iframe[style] {
max-width: 100% !important;
}
aussi, j'utilise la proposition de Yugal Jindle et donc j'ai
data-width="555"
et
data-adapt-container-width="true"
maintenant ma page est ok! Merci beaucoup!
il semble que le Plugin Facebook Page ne change pas du tout dans les 5-7 dernières années :) il n'a pas été responsive dès le début et toujours pas maintenant, même Nouveau param Adapt to plugin container width
ne fonctionne pas ou je ne comprends pas comment il fonctionne.
je suis à la recherche de la façon la plus simple possible de faire PLUGIN SIZE 100% WIDTH
, et il semble qu'il n'est pas possible. Non-sens à son meilleur. Comment les designers résolvent ce problème?
j'ai trouvé la meilleure décision pour cette fois 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;
}
ceci ne permet pas la largeur de la taille de l'écran cassé pour les écrans réactifs, mais semble toujours laid, parce que mis en sourdine dans un certain temps et ne s'étire pas... Facebook ne se soucie pas du tout de la conception des plugins. C'est la vérité.
j'ai raffiné Twentyfortysix répondre un peu, pour déclencher l'événement seulement après la redimensionnement est fait.
En outre, j'ai ajouté vérifier la largeur de la fenêtre, afin de ne pas déclencher la réinitialisation sur 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();
}
});
});
voici un redimensionnement dynamique d'iframe include way, avec un certain délai de redirection sur redimensionnement événement:
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);
});
N'oubliez pas le champ data-href! Pour moi, les commentaires fonctionnaient sans elle, mais ne répondaient pas. Et bien sûr data-width='100%'
Salut tout le monde!
Ma version avec une démonstration en direct(JavaScript natif):
1). code Javascript dans un fichier séparé (la meilleure solution):
/* 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). le code Javascript est écrit en HTML:
@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>
Merci storsoc!
bonne journée à tous et bonne journée!