web-dev-qa-db-fra.com

Largeur sensible page Facebook Plugin

Facebook a introduit un nouveau plug-in de page pour remplacer le plug-in de type Like.

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

Je remplace le plugin Like Box par ce nouveau plugin. Sur certains sites Web, j'ai utilisé ce code CSS pour rendre le plugin réactif dans un élément:

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

Remplacer ceci par ce code ne fonctionnera pas:

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

Le code du plugin My Page ressemble à ceci (ne fournissant pas d'attribut data-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>

Il semble que Facebook ait ajouté un élément div avec un élément de style intégré dans le DOM chargé par l'iframe:

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

Lorsque j'ajuste cette largeur à 100%, chaque élément est aligné sur toute la largeur, à l'exception de la photo de couverture.

Il est possible de donner à ce nouveau plugin Page un comportement réactif, comme avec le plugin Like box?

facebook-social-plugins
44
Sebastian Hagens

La nouvelle largeur de Facebook "Page Plugin" va de 180px à 500px selon la documentation.

  • Si configuré en dessous de 180px, il appliquerait une largeur minimale de 180px
  • Si configuré au-dessus de 500px, il appliquerait une largeur maximale de 500px

Avec largeur adaptative cochée, ex:

enter image description here

Contrairement à la boîte similaire, ce plug-in applique ses limites en s'en tenant aux valeurs limites si elles sont mal configurées.

Pour les petits écrans/Comportements réactifs

  • Lorsque vous effectuez un rendu sur des écrans plus petits, appliquez width sur le conteneur de plugin et le plugin essaiera de s’intégrer.

  • Le plug-in s'affiche automatiquement à une plus petite largeur (pour tenir dans des écrans plus petits), si le conteneur est plus mince que la variable width configurée.

  • Vous pouvez réduire le contenu du conteneur sur le mobile et le plug-in s’intégrera dans la mesure où le minimum de 180px lui sera attribué.

Sans largeur adaptative

enter image description here

  • Le plugin sera rendu à la largeur spécifiée, quelle que soit la largeur du conteneur.
40
Yugal Jindle

Cela ne fonctionne pas très bien lorsque le plugin est placé dans une colonne mince, comme une barre latérale par exemple. Sur les écrans de taille moyenne, leur largeur est généralement inférieure à 280 px.

.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 se casser en dehors d'un conteneur d'habillage. À la différence de la vieille boîte semblable à une mosaïque, celle-ci déborde simplement en masquant le contenu débordé.

27
Robert Smith

cela fonctionne pour moi (la largeur est forcée par javascript et le plugin FB 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>
12
2046

Pour que le nouveau plug-in de page Facebook responsive lors du chargement initial de la page, vous souhaitiez supprimer l'attribut data-width et ajouter à la place

data-adapt-container-width="true"

Cela rendra le plug-in de page Facebook réactif, mais uniquement sur la page initiale, restituera, avec une largeur minimale de 180px.

J'essaie toujours de trouver un moyen de le rendre vraiment dynamique, malgré les réserves de Facebook (je posterai une mise à jour si je trouve la réponse).

Pas de redimensionnement dynamique

Le plug-in de page fonctionne avec des dispositions réactives, fluides et statiques. Vous pouvez utiliser des requêtes multimédia ou d'autres méthodes pour définir la width du parent élément, pourtant:

Le plugin déterminera sa width au chargement de la page. Il ne réagira pas modifications apportées au modèle de boîte après le chargement de la page. Si vous voulez ajuster le width du plugin lors du redimensionnement de la fenêtre, vous devez manuellement rendre le fichier brancher.

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

Vous pouvez le rendre réactif de manière dynamique en réinitialisant le widget lors du redimensionnement du navigateur, comme suggéré par Io Ctaptceb, mais vous risqueriez ainsi de perdre de la mémoire très rapidement.

Yugal Jindle avait une bonne réponse, mais je voulais préciser que je n'ai pas encore trouvé le moyen de rendre le plugin réellement dynamique.

9
Elon Zito

Je mets ceci ici pour ceux qui ont le même problème que moi et ne trouvent pas leur réponse ici entre les commentaires ou sur une autre page de stackoverflow.

J'ai ajouté le Facebook Page Plugin avec des paramètres qui l'ajusteraient à la largeur du conteneur.

data-adapt-container-width="true"

Cependant, un ou plusieurs éléments de l’élément iframe ou Javascript SDK avaient une largeur de 340 pixels, ce qui rend le plug-in de page non adapté à la largeur du conteneur. Alors qu'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 plug-in de page a répondu comme prévu et adapté à la largeur du conteneur jusqu'à une largeur maximale de 500 pixels.

J'espère que cela aide tous ceux qui rencontrent le même problème.

4
Paul van den Dool

pour ceux qui recherchent une solution JS pour des tailles inférieures à 280

voici mon extrait de code: 

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;
}
3
Io Ctaptceb

Nous avons dépassé certaines limites de la réactivité du plug-in Facebook en l'utilisant comme IFRAME, mais nous avons démarré au rendu avec du JavaScript qui redimensionne dynamiquement le cadre (et les paramètres width/height dans l'URL SRC) pour remplir l'élément conteneur.

Si le conteneur est supérieur à 500 px, pour éviter d'avoir une gouttière évidente du côté droit, nous ajoutons simplement une transformation d'échelle avec quelques calculs simples.

L'événement IFRAME onload se déclenche lorsque SRC est initialement vide (lorsque nous l'amorçons), puis à nouveau une fois le chargement terminé lorsque nous définissons le code SRC, mais nous écourtons simplement si l'attribut SRC existe déjà.

Dans notre utilisation, nous ne modifions pas la largeur du flux Facebook pour une utilisation sur le bureau, et pour les fenêtres de poche/tablette, ces largeurs sont fixées par nature (oui, nous modifions l'orientation), mais si vous souhaitez que le vôtre s'ajuste continuellement si la Les dimensions de la fenêtre du navigateur changent, vous pouvez simplement relancer le code en tant qu’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: J'ai oublié transform-Origin, il n'est plus nécessaire d'ajuster gauche/haut pour s'adapter à l'échelle. Merci Io Ctaptceb

3
storsoc

À partir de Graph API 2.3, Facebook fournit un code similaire au suivant pour le plug-in de commentaires:

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

Ajoutez un data-width="100%" pour le rendre semi-réactif, comme suit:

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

Semi-réactif car le plugin ne se redimensionne pas lui-même lors du redimensionnement d'une page. La taille dépend de la taille de l'écran lors du chargement du plugin.

3
gldraphael

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

En outre, 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!

2
user6307854

Il semble que Facebook Page Plugin n'ait pas du tout changé au cours des 5 à 7 dernières années :) Il n'était pas réactif depuis le début et toujours pas maintenant, même le nouveau paramètre Adapt to plugin container width ne fonctionne pas ou je ne comprends pas comment cela fonctionne. .

Je cherche le moyen le plus simple de faire PLUGIN SIZE 100% WIDTH, et il semble que ce ne soit pas possible. Nonsense à son meilleur. Comment les designers résolvent-ils ce problème?

J'ai trouvé la meilleure décision pour ce temps 2017 octobre:

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

Cela permet de ne pas casser la largeur de la taille d'écran pour les écrans réactifs, mais reste quand même laid, car coupé en 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é.

1
Gediminas

J'ai raffiné Twentyfortysix répondre un peu, pour déclencher l'événement uniquement après le redimensionnement.

De plus, j’ai ajouté vérifier la largeur de la fenêtre pour ne pas déclencher la réinitialisation sous 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();
        }
        }); 
    });
0
peXd

Voici un redimensionnement dynamique de la méthode iframe include, avec un rendu différé lors d'un événement de redimensionnement:

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);
});
0
Razvan Grigore