Est-il possible de définir une largeur fluide pour les plugins sociaux de Facebook?
Je développe un site autour du concept de "responsive design", mais les plugins sociaux de Facebook ont une largeur statique et "cassent" la mise en page quand elle est redimensionnée.
À l’aide de requêtes multimédias, j’ai configuré les plugins pour qu’ils se cachent dans les navigateurs à basse résolution (mobile, etc.). Cependant, sur les navigateurs de bureau, lorsque la fenêtre du navigateur est redimensionnée, mais pas trop petite pour masquer les plug-ins, ils se détachent de la présentation.
Un moyen de définir une largeur fluide pour les plugins sociaux de Facebook?
La bonne réponse est une combinaison de choses que j'ai trouvées ici. La réponse de Mikel est un bon début:
Lien vers la plateforme de développeurs Facebook
Cela dit:
Nous avons poussé un correctif pour cela. A partir de maintenant, vous pouvez spécifier la largeur 100% (par exemple, data-width = "100%") pour obtenir une mise en page fluide. Les docs sont mis à jour aussi: https://developers.facebook.com/docs/plugins/comments Merci pour votre patience.
Mais ... Ceci chargera la largeur de ce qui est disponible pour le plugin au moment du chargement. Lorsque vous redimensionnez votre page, celle-ci conserve la même largeur que lorsque vous avez chargé la page. Pour résoudre ce problème - et créer une véritable version réactive du plugin social de Facebook - ajoutez ce qui suit dans votre CSS:
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
Cela provoquera le redimensionnement du plug-in par rapport à l'espace disponible lors du redimensionnement de la fenêtre.
Si vous voulez que ce code fonctionne pour le plugin de page, changez le nom de classe 'fb-comments' en 'fb-page':
.fb-page, .fb-page iframe[style], .fb-page span {
width: 100% !important;
}
(merci pour l'addition Black_Stormy!)
aucune de ces méthodes n'a fonctionné mais en utilisant cette idée, les éléments suivants ont fonctionné pour moi
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100% !important;
}
J'ai trouvé une solution en utilisant CSS. L’inspiration vient de cet article http://css-tricks.com/2708-override-inline-styles-with-css/
.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
J'ai réussi à le faire fonctionner en utilisant ce code:
.fb-like, .fb-like span, .fb-like.fb_iframe_widget span iframe {
width: 100% !important;
}
parce que dans mon fichier html, j'ai ceci:
<div class="fb-like" data-href="http://www.yourwebsite.yourdomain" data-send="true" data-show-faces="false" data-colorscheme="light" data-font="verdana"></div>
Astuce: Vous devriez changer votre css en fonction de la classe div.
Bien que ce soit une vieille question, il s’agit du premier résultat de Google pour "le commentaire du plugin facebook", il est donc toujours d'actualité.
Les solutions de contournement dans les autres réponses ne sont plus nécessaires, car FB a récemment résolu ce problème (mai 2014).
De https://developers.facebook.com/x/bugs/256568534516879/ :
Nous avons poussé un correctif pour cela. A partir de maintenant, vous pouvez spécifier la largeur 100% (par exemple, data-width = "100%") pour obtenir une mise en page fluide. Les docs sont mis à jour aussi: https://developers.facebook.com/docs/plugins/comments Merci pour votre patience.
Alors maintenant, vous pouvez simplement mettre à jour votre code HTML, par exemple.
<div class="fb-comments" data-width="100%" data-href="http://yourpageurl.com"></div>
Et n’avez besoin d’aucune solution de contournement CSS supplémentaire.
Edit: cela créera le plugin pour adapter sa largeur à l'espace disponible au chargement. Lorsque vous redimensionnez la fenêtre du navigateur, le plug-in reste à cette largeur initiale. Pour que ce soit vraiment réactif, ajoutez ceci à votre CSS:
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
Cela provoquera l'adaptation du plug-in à l'espace disponible lorsque vous redimensionnerez le navigateur.
Cela fonctionnera certainement pour ajouter .fb-comments span avec style.
.fb-comments, .fb-comments span, .fb-comments iframe[style] {width: 100% !important;}
Si vous utilisez le plugin facebook officiel de wordpress en raison de la fonction de sniffing mobile de facebook, faites-le.
La version mobile apparaîtra automatiquement quand un appareil mobile l'agent utilisateur est détecté. Vous pouvez désactiver ce comportement en définissant le paramètre paramètre mobile à false. Remarque: la version mobile ignore le paramètre de largeur, et a plutôt une largeur de fluide de 100% afin de redimensionnez bien dans les situations de commutation portrait/paysage. Tu pourrais avoir besoin de ajuster votre CSS pour votre site mobile pour en tirer parti comportement. Si vous le souhaitez, vous pouvez toujours contrôler la largeur via un élément conteneur . http://developers.facebook.com/docs/reference/plugins/comments/
Vous devrez modifier le facebook/social-plugins/fb-comments.php à la ligne 35.
<div class="fb-comments fb-social-plugin" ' . $params . ' data-mobile="false"></div>
Cela vous permettra de styler avec ce qui suit.
.fb-social-plugin {
width:98%!important;
}
.fb_iframe_widget span {
width:100%!important;
}
.fb-comments iframe[style] {width: 100% !important;}
Ce serait bien s'ils pouvaient soit corriger leur version mobile, soit définir un paramètre sur l'interface graphique de leurs plugins.
La réponse acceptée n'a pas fonctionné pour moi.
J'ai trouvé cela par Craig Bailey dans les commentaires ici:
http://www.wpresponsive.com/how-to-make-facebook-comments-responsive-wordpress
qui est parfaitement fluide (testé dans osx ff & safari, ios6).
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
On dirait que ce post n'est pas très ancien mais la réponse ne fonctionnait pas pour moi. Je devais ajouter ceci à ma feuille de style ...
#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {width: 100% !important;}
Les fichiers .fb_iframe_widget et .fb_iframe_widget [style] semblaient tous deux importants.
Pour ceux qui préfèrent utiliser le code HTML5 pour les plug-ins Facebook, comme le flux d'activité ou comme la boîte :
/******* IPHONE PORTRAIT MODE (480px or less) *******/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.fb_iframe_widget span[style], .fb_ltr[style] {
width:420px !important;
}
}
- Ne fonctionne pas avec les commentaires ou la largeur en pourcentage; respectez le code iframe si vous avez besoin de fluidité pure.
- H/T à Alan pour le lien css-astuces en haut de cette page. (:
Une remarque importante à propos de cette opération de redimensionnement: si le script de commentaire Facebook détecte que vous êtes sur un appareil mobile, le problème est résolu. Mais si vous faites en sorte que la balise <fb:comments> contienne la valeur d'attribut mobile="false", les scripts de Facebook respecteront (pour l'instant) votre code CSS.
Il suffit de mettre cela soit dans votre fichier CSS ou dans votre code HTML avec des balises de style !!!
<style>
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style]{width:100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style]{width: 100% !important;}
</style>
J'ai ce travail en utilisant ce script simple (voir le code dans le lien).
https://Gist.github.com/2111366
Vous devez apporter quelques modifications aux informations pour pouvoir utiliser votre identifiant d'application Facebook et l'URL de votre page.
Cette solution utilise jQuery. Vous devrez donc comprendre comment cela fonctionne. Une fois que vous aurez obtenu le script pour exécuter votre conception adaptative, le chargement ou le redimensionnement de la page fonctionnera.
Rejoindre les masses non informées avec ma propre solution à ce problème, à compter de septembre 2015:
Facebook fournit une option au widget fb-page appelée adapt-container-width, qui (selon le docs ,) devrait suivre la largeur du parent (jusqu'à une largeur maximale de 500px). Lors du rendu avec FB.XFBML.parse(), le widget semble rester bloqué sur une valeur étrange pour la largeur du conteneur du parent, malgré ce que vous avez défini sur le widget lui-même. Pour l'instant, cela fonctionne assez bien:
- Créer un élément en utilisant le générateur de code de FB (en haut de cette page )
- Lier un événement à la méthode
windowderesize(éventuellement utiliser_.debounceavec une limite raisonnable pour éviter de surcharger le navigateur avec les demandes intermédiaires Attendez que Facebook expose davantage l'API du widget pour que nous puissions voir ce qui se passe
<div class="fb-page" data-adapt-container-width="false" <!-- This bit's the important part --> data-href="https://www.facebook.com/yourpage" data-show-posts="true" data-small-header="true" data-width="100%" > <div class="fb-xfbml-parse-ignore"> <blockquote cite="https://www.facebook.com/yourpage"><a href="https://www.facebook.com/yourpage">Like YourPage on Facebook!</a></blockquote> </div> </div>
combiné avec le javascript suivant:
// FB Resize
$(window).bind('resize', _.debounce(function() {
if (window.FB && FB.XFBML && FB.XFBML.parse) {
var el = $('.fb-page');
var width = el.parent().width();
el.attr('data-width', width);
FB.XFBML.parse();
}
}, 1000)); // Debounce until 1000ms have passed
Je ne connais pas les commentaires, mais avec la boîte de lien, tout ce que vous avez à faire est d’utiliser l’option iframe directement de Facebook et de changer la largeur en pixels avec un pourcentage, et cela changera en fonction de la largeur du la colonne est dans.
Ceci est JQuery et pourrait faire partie de la réponse à votre question. J'utilise la version HTML5 du bouton J'aime:
<div class="fb-like" data-href="my.domain.com" data-layout="standard" data-send="false" data-width="255" data-show-faces="false" data-action="recommend" data-font="verdana"></div>
L'élément "div.main-content" est l'élément dans lequel le bouton "like" doit s'intégrer. Le redimensionnement fonctionne jusqu'à ce que la div devienne si petit que l'attribut data-layout du type div.fb doit être remplacé de "standard" par une alternative utilisant moins d'espace horizontal. Comme je suis nouveau dans ce domaine, je ne suis pas sûr que ce soit la solution la plus élégante pour rendre le bouton similaire. J'aimerais voir une réponse à cette question de quelqu'un qui est plus un expert en la matière.
$(window).resize(function() {
var computed_width = $('div.main-content').width();
$('div.fb-like iframe').attr('style', 'border: medium none; overflow: hidden; height: 24px; width: ' + computed_width + 'px');
});
Voici un exemple complet, utilisant jQuery, avec une largeur de réponse et une image de chargement . Le code CSS de Alan et Jubair est commenté dans le code.
Cela fonctionne très bien dans une vue Web Android
<html>
<head>
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<style>
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100%;/* !important; To get the control with JQuery*/
}
</style>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
channelUrl : '//domain.com/channelUrl.php',
status : true,
cookie : true,
xfbml : true
});
//Event fired when the plugin has been completely loaded
FB.Event.subscribe('xfbml.render',
function(response) {
//alert('You liked the URL: ' + response);
var w = (typeof window.innerWidth != 'undefined')?
window.innerWidth
:(typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) ?
document.documentElement.clientWidth
: document.getElementsByTagName('body')[0].clientWidth;
w *= .950; //95% for best fit on mobile screens
//RESIZE
$(".fb-comments").css("width",w);
$(".fb-comments > span").css("width",w);
//Some days ago the next line would be sufficient
$(".fb_ltr").css("width",w);
//Now the modify of the span width is necessary to do the work
$("#div_loading_gif").remove();
}
);
};
//cargando SDK Asíncronamente
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div id="div_loading_gif" style="width:100%; height:100%; text-align:center; background:url(../img/loading.gif) no-repeat center center;" >
</div>
<!--Usando jquery modificar el style de el div de clase fb_ltr
cambiar el ancho por el de la pantalla-->
<div class="fb-comments"
style="padding:0 auto;"
data-href="http://domain.com/comments.html"
data-width="100px"
data-num-posts="5"
data-mobile="false"
>
</div>
</body>
Utilisez l'élément inspect pour voir quel code est généré. Dans certains cas, comme les plugins Facebook Wordpress, ils utilisent différents "identifiants" et une fois que vous avez trouvé l'identifiant utilisé,
#fbSEOComments, #fbSEOComments iframe[style] {width: 100% !important;}
Cela ne fait pas toujours le tour im apprentissage. Bien que vous puissiez changer les couleurs et certains dimensionnement, le rendre réactif est toujours très bogué. Il ne semble pas aimer les pourcentages et ne voit pas la taille de la boîte dans laquelle il se trouve alors cela ne fonctionne pas. En faisant appel aux requêtes @média pour le redimensionner en fonction de la taille de la fenêtre du navigateur.
Ce serait bien s'il reconnaissait la largeur mais le @media semble être le seul moyen.
Facebook a apporté des modifications au balisage généré à partir du plug-in de commentaires. J'utilise la version HTML5. Cette CSS modifiée à partir de ce qui a été partagé ci-dessus a fait l'affaire.
.fb-comments, .fb_iframe_widget iframe[style], .fb_iframe_widget span[style] {width: 100% !important;}
Voici quelques requêtes qui devraient persister dans les modifications apportées au balisage en sortie, car elles utilisent une expression regex pour réécrire la largeur uniquement, laissant le reste de la balise style seule.
Vous devez spécifier le bon identifiant de conteneur ou sélecteur, en remplaçant mon exemple de: # footer-last. L'iframe est redimensionné en fonction des modifications de la largeur du conteneur, qui devra être défini comme réactif.
// Resize facebook window width
container_width = $('#footer-last').width();
$fb_iframe = $('.fb-social-like-plugin iframe');
fb_style = $fb_iframe.attr('style').replace(/width:\s*\d+px/i, 'width: ' + container_width + 'px');
$fb_iframe.attr('style', fb_style);
Voici un petit travail qui ajoute le plugin HTML5 LikeBox à Facebook dans le DOM avec une hauteur ou une largeur de réponse.
$(document).ready(function(){
var height = $(window).height();
var width = $(window).width();
var widget_height = parseInt((height)*0.9);
var widget_width = parseInt((height)*0.3);
var page_url = "http://www.facebook.com/Facebook";
$(".fb-plugin").append("<div class='fb-like-box'
data-href='"+page_url+"'
data-width='"+widget_width+"'
data-height='"+widget_height+"'
data-colorscheme='dark'
data-show-faces='true'
data-border-color='#222'
data-stream='true'
data-header='true'>
</div></div>");
});
Je viens d'essayer cela et il semble qu'il existe maintenant un <div> dans la iframe qui a une largeur fixe, ce qui signifie que vous devez maintenant supprimer la balise style avec javascript pour la rendre fluide.
EDIT: vous ne pouvez pas accéder au contenu iframe avec JS car il provient d'un autre domaine
Ça marche pour moi
/* Set inline instead of inline-block */
.fb-comments.fb_iframe_widget{
display: inline !important;
}
.fb-comments.fb_iframe_widget span,
.fb_iframe_widget iframe {
width: 100% !important;
}
Cela fonctionne pour moi:
$('.fb-comments').attr('data-width', '100%');
Voilà comment cela fonctionne: ajoutez simplement data-width = "100%" Voici un exemple:
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
Créez un div vide où vous voulez que la facebook like box (ou un autre plug-in social fonctionne universellement) avec une classe 'fb-container', puis ajoutez le jQuery suivant:
$(document).ready(function(){
$('.fb-container').replaceWith('<div class="fb-comments" data-href="https://WWW.YOURSITEHERE.COM/" data-width="' + $('PARENT DIV').width().toFixed(0) +'" data-numposts="5" data-colorscheme="light"></div>');
});
p.s. vous pouvez remplacer PARENT DIV avec n’importe quel autre élément auquel vous voulez associer la zone de commentaire et WWW.YOURSITEHERE.COM avec votre site
Voici ce que j'ai fini avec:
(function() {
window.addEventListener('load', updateWidth);
window.addEventListener('resize', debounce(function () {
updateWidth();
if (window.FB && FB.XFBML && FB.XFBML.parse) {
FB.XFBML.parse();
}
}, 1000));
function updateWidth() {
$('.fb-like, .fb-comments').each(function () {
var el = $(this);
var width = el.parent().width();
el.attr('data-width', width);
})
}
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
})();
Je l'ai obtenu en utilisant un peu de jQuery et en définissant l'attribut "data-width" lors du chargement de la page et lors du redimensionnement de la fenêtre. Le problème que j'ai rencontré avec toutes les approches CSS est que certains des commentaires et des boutons étaient cachés en dehors des marges du conteneur ou débordaient.
Voici mon 0,02 $, espérons que cela aide. En outre, définissez simplement le sélecteur #content sur ce que vous voulez que la zone de commentaire corresponde, par exemple un conteneur div ...
jQuery (document) .ready (function () {
//check for device width and reformat facebook comments
function fbCommentWidth() {
jQuery('.fb-comments').attr('data-width',jQuery('#content').width());
}
//run on resize, and reparse FB comments box
jQuery(window).on('resize',function() {
fbCommentWidth();
FB.XFBML.parse();
});
//run on document ready
fbCommentWidth();
});
Je pense que max-width est meilleur que width dans ce cas, et cela fonctionne pour moi:
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}