8
votes

Comment faire la largeur de la boîte de commentaire Facebook 100%?

J'utilise ce code pour mettre une boîte de commentaire Facebook sur ma page, xxx

mais je ne peux pas faire la boîte de commentaire remplir 100% de la page.

javascript html css facebook

0 commentaires

9 Réponses :

21
votes

Vous pouvez le faire en ajoutant une classe CSS dans une feuille de style de votre page HTML comme:

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

2 commentaires

toujours la même chose que j'ai utilisé ce .fb-commentaires, .fb-commentaires iframe {largeur: 100%! important;} Mais il en va de même. La largeur de div est à 100% mais la boîte de commentaire est toujours d'environ 550px

Cela ne fonctionnera pas pour </ Code> Facebook Commenter Boîte. </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Essayez d'ajouter le paramètre <code> Data-width = "{pixels}" </ code>, comme vous obtenez lorsque vous obtenez le code créé sur cette page, <a href = "https: // développeurs. Facebook.com/docs/reference/Plugins/commentes/ "rel =" nofollow "> https://developers.facebook.com/docs/reference/plugins/comments/ </a> - c'est-à-dire si vous connaissez la largeur de la page en pixels. Je ne sais pas, si cela fonctionne avec des pourcentages aussi, mais en quelque doute en quelque sorte. </ P> <p> Alors votre dernière option pourrait être d'ajouter resp. Modifiez ce paramètre dynamiquement une fois que votre page a chargé et que vous pouvez lire la largeur Actuall en pixels et que XFBML ne soit analysé qu'après (paramètres xfbml param sur false tout en chargeant le script et appelez <A href = "https: // développeurs. Facebook.com/docs/reference/javascript/fb.xfbml.parscript/ "rel =" nofollow "> fb.xfbml.parse </a> après avoir défini le paramètre de largeur de données). Bien sûr, cela ne vous aidera toujours pas, si la largeur obtient est modifiée ultérieurement par l'utilisateur redimensionnant la fenêtre du navigateur ou ... </ P> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 3<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Eh bien, je pense que j'ai réussi à résoudre, J'ai analysé la boîte de commentaire et j'ai vu que les commentaires FB contiennent une portée avec la largeur de 470px par défaut et à l'intérieur de cette plage, j'ai trouvé une iframe de la même largeur, la solution consiste donc à modifier la largeur de la portée et de l'iframe sur Fenêtre redimensionnement à l'aide de jQuery comme ceci: <pré> xxx </ pré> <p> Alors maintenant, à la fenêtre Redimensionné toute la boîte de commentaire prend la largeur du conteneur (par d'autres moyens, il est 100% largeur). </ P> </ P > </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 9<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Zeeshan Votre solution semble obsolète et on dirait que Facebook a mis à jour son plugin et qui a cassé le style. <p> Cela fonctionne probablement mieux pour moi à partir de maintenant et je pense que ce style se cassa à nouveau lorsque Facebook met à jour la voie à laquelle leurs plugins Travail. P> </p><pre>.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget iframe[style] {width: 100% !important;} </pre></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">2 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> D'autres solutions ne fonctionnaient pas pour moi, mais celle-ci l'a fait! </p> <hr> <p class="answer-comment"> Qu'est-ce que "iframe [style]" faire? Comment cela est-il différent de «iframe» dans votre dernière ligne? Merci pour cette solution. </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <pre>.fb_iframe_widget, .fb_iframe_widget > span, .fb_iframe_widget iframe { width: 100% !important; } This worked for me</pre> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> avec jQuery, vous pouvez trop écrire la largeur codée dure avant de charger la zone de commentaire Facebook. <Pré> XXX </ PRE> <P> <STRORT> P.S. Vous pouvez remplacer le «corps» avec n'importe quel autre élément que vous souhaitez que la zone de commentaire correspondre. </ strong> </ p> </ p> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 2<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> J'essaie les autres solutions et personne ne fonctionne pour moi. </ P> <p> Lecture de la documentation FB J'ai trouvé que la largeur 100% est déjà prise en charge en ajoutant la largeur de données attributée = "100%" à la balise: </ p> <p> <code> <div class = "fb-commentaires" width-width = "100%" data-href = "http://www.mintybolivia.com/" données-numposts = "10" Data-Colorscheme = "lumière"> </ div> </ code> </ p> <p> Cela fonctionne maintenant et selon la documentation en documentation en mobile, ce paramètre est défini automatiquement. </ P> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> <strong> c'est assez simple fort> Sur votre code <p> <fort> ajouter strong> la pièce de code suivante <forte> width-largeur = "100%" fortre> p> <p> p> </p><div mas. snippet js false true> <div class="code d'extraction"> <pre><div class="fb-comments" data-href="{{ post.build_absolute_uri }}"data-width="100%" data-numposts="5"></div></pre></div></div></forte></fort></p></strong></p> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <pre>setTimeout(function run() { if ($('.fb-comments span:first-child, .fb-comments span iframe').length == 0) setTimeout(run, 1000); else $('.fb-comments span:first-child, .fb-comments span iframe')[1].style.width = "100%"; }, 1000); </pre> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> </div> <div class="col-lg-3 col-md-12 col-12 col-sm-12" > <div class="related"> <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0">

Articles qui pourrait vous intéresser :


                                            
                            Impossible d'importer le module "@ angular / material"                        
                        
                                            
                            Interaction profonde avec break and catch                        
                        
                                            
                            Utilisation de node.js comment renommer tous les fichiers d'un dossier                        
                        
                                            
                            Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO



        
            
            
        

    
    
        
            © 2020 www.devfaq.fr - Licensed under  cc by-sa 3.0   with  attribution required.