web-dev-qa-db-fra.com

Comment faire la largeur de la boîte de commentaire facebook à 100%? 2014

La même question http://stackoverflow.com/questions/10862256/how-to-make-facebook-comment-box-width-100 J'ai essayé toutes les réponses, mais cela ne fonctionne plus. On dirait que Facebook a un peu modifié certaines choses.

jqueryhtmlcssfacebook
14
whitesiroi

Ce est était un bug de facebook, regardez-le ici: https://developers.facebook.com/x/bugs/256568534516879/

La seule solution de contournement disponible consiste à utiliser javascript.

Édition ultérieure: Bug corrigé: Vous devez écrire: data-width="100%"

La largeur du plugin. Soit une valeur en pixels, soit 100% pour la largeur du fluide. La version mobile du plug-in de commentaires ignore le paramètre width et utilise une largeur de fluide de 100%. https://developers.facebook.com/docs/plugins/comments

32
Romeo Onisim
 $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
        $(window).on('resize', function () {
            resizeiframe();
        });

    function resizeiframe() {
        var src = $('.fb-comments iframe').attr('src').split('width='),
            width = $(".fb-comments").parent().width();

        $('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
    }

Jquery Workaround,

Source: https://developers.facebook.com/x/bugs/256568534516879/ Commenté par: Milap Bhojak

3
Dasith

En référence à https://developers.facebook.com/support/bugs/173395380238318/

Facebook commentaire plugin, ils continuent à mettre à jour de nouvelles choses, mais parfois, il en résulte un nouveau bogue.

Si simple CSS va résoudre les problèmes de largeur.

/*Fb Comments Width Fix*/
.fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe {
            max-width: 100% !important;
            width: 100% !important;
 }

Note: Assurez-vous d'utiliser! Important. Sans important, cela ne fonctionnera pas comme excepté.

Si vous avez trouvé cela utile, cliquez sur le bouton upvote.Merci

2
mukesh krishnan

facebook a changé fb-comments plug in et vous pouvez maintenant utiliser data-width = "100%"

vous n'avez besoin d'aucun style ou code js. 

    <div class="fb-comments" data-href="http://example.com" 
data-width="100%" data-numposts="5" data-colorscheme="light"></div>
1
vitralyoz

J'ai posté une solution en réponse à la même question ici: https://stackoverflow.com/a/22328835/2544386

Le problème est qu’au sein de l’iframe, Facebook peut modifier le CSS, les classes, ajouter des largeurs fixes, etc. . Mais si vous utilisez JS de façon intelligente en manipulant la balise dans votre code HTML avant son analyse par Facebook, je le crois. Cela réduit vraiment les chances d'être cassé à nouveau si Facebook change quelque chose à la fin.

1
Gav

Si vous cherchez le moyen le plus simple sans programmation. Pas de complications.

Vous le faites simplement comme toujours (avec la boîte de code de Facebook), puis ouvrez Inspecter élément dans le navigateur (cliquez avec le bouton droit de la souris sur un élément de la page et sélectionnez cette option), cliquez sur la boîte de dialogue similaire <iframe></iframe> et copiez-la dans votre code (uniquement). l'iframe!). Cela fonctionne exactement comme les autres codes.

Supprimez maintenant la largeur de l'iframe ou écrivez width:100% dessus.

Juste comme ça:

<iframe name="f15e6cf8a8" width="1000px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like_box Facebook Social Plugin" src="http://www.facebook.com/yourentirepage" style="border:none;visibility:visible;height:541px" class=""></iframe>

Ça fonctionne bien pour moi.

1
bey23

Facebook a ajouté une autre largeur de 550 pixels sur .pluginSkinLight> div

ajoutez ceci à votre css . pluginSkinLight> div {width: 100%! important;}

1
Anton Rifco Susilo

Une solution de contournement JS simple

1) Ajoutez id ("fb_chat" dans cet exemple) aux commentaires FB div: 

<div id="fb_chat" class="fb-comments" data-href="http://your_url" data-numposts="30" data-colorscheme="light"></div>

2) Utilisez ce bloc JS (remplacez "chat_body" par le conteneur parent de vos commentaires):

<script type="text/javascript"> var fb_chat = document.getElementById('fb_chat'); var container_width = document.getElementById('chat_body').clientWidth * 0.985; var attr = document.createAttribute('data-width'); attr.nodeValue = container_width.toString(); fb_chat.attributes.setNamedItem(attr); </script>

0
varsize

L'ajout de data-width="100%" fait que les commentaires ont une largeur de 100%, mais ils ne sont pas toujours aussi fluides que prévu Ils rempliront un conteneur, mais uniquement lors du chargement et ne seront pas redimensionnés lorsque la fenêtre est redimensionnée. Pour ce faire, ajoutez ceci à votre css: 

.fb_iframe_widget_fluid span, iframe.fb_ltr { width: 100% !important; }

0
drspaceman

Pour résoudre ce problème, supprimez "data-width" de <div class="fb-comments"... 

FB va automatiquement mettre 100%

ou supprimer data-mobile="auto"

0
Vitalicus