Rendre le plugin Facebook réactif

Donc, j’utilise le nouveau plugin Facebook (Page Plugin) et j’ai du mal à le faire réagir au redimensionnement de la fenêtre.

J’ai défini l’option data-adapt-container-width = “true”, mais cela ne se déclenche qu’en cas de chargement / rechargement de page.

S’il vous plaît, voyez mon JSFiddle: http://jsfiddle.net/29zgc790/ (essayez-le dans l’export et si cela ne fonctionne pas, essayez mon lecteur: http://plnkr.co/edit/IPnjpJUXxkO4WTLFTTW0?p=preview ) où j’ai défini le commencez la largeur du plug-in à max (500px), mais je souhaite déclencher un rechargement du plug-in lorsque le conteneur (fenêtre) devient plus petit que le plug-in à ce moment précis.

Je pense à quelque chose comme:

$(window).resize(function () { //Do the reload of plugin });

J’espère que vous avez une idée d’une solution qui peut me guider de la bonne façon.

Intégrez l’iframe généré:

Obtenir la largeur du parent et la définir dans les atsortingbuts iframe et src de iframe

 $(window).resize(function() { //Do the reload of plugin var new_width = $("#facebook").parent().width(); $("#facebook").css("width", new_width); var url = $('#facebook').attr('src').split("&width="); url = url[0] + '&width=' + new_width; $('#facebook').attr('src', url); });

Donc, après avoir lu la documentation du web sdk de facebook, j’ai trouvé cette petite fonction qui recharge le iframe.

 FB.XFBML.parse();

https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse

Cela a résolu mon problème, mais @LucaGiardina a également une bonne solution, mais je pense que c’est toujours une pratique dieu d’utiliser les fonctions intégrées si elles existent.

Après quelques jours d’essai, j’ai trouvé une solution efficace! Je me suis inscrit seulement pour le partager 🙂

Copiez le code iframe du plugin de page ici: Facebook Page Plugin (allez à “Obtenir le code” puis cliquez sur “iFrame” en haut de la fenêtre qui vient de s’ouvrir.)
Collez le code dans votre code html à l’ intérieur d’un div avec la classe fb-column , puis supprimez les atsortingbuts width et src (collez la valeur de l’atsortingbut src – le lien long – ailleurs, vous en aurez besoin ultérieurement)

Ajoutez ce code à votre fichier .js principal (le crédit pour le calcul de la taille de la boîte et l’appel de la fonction va à Mugo Web

 function resizeFBPlugin() { //calculate parent box width var container_width = (Number($('.fb-column').width()) - Number($('.fb-column').css('padding-left').replace("px", ""))).toFixed(0); // set the src and replace the actual width with the calculated width. document.getElementById("fb-column").src = //paster link from iFrame here. Be sure to keep everything as it is, only replace the number after &width= with container_width // it should look something like this: 'https://www.facebook.com....&width='+container_width+'&height=......'; // NOTE: take note of the use of apostrophes and + signs //set the width of the iframe document.getElementById("fb-column").width = container_width; }; // call the function on resize and on window load $(window).on('resize', function() { setTimeout(function(){resizeFBPlugin()}, 500); }); $(window).on('load', function() { setTimeout(function(){resizeFBPlugin()}, 1500); });

C’est tout! Vous avez maintenant un plugin de page Facebook entièrement réactif (bien sûr, dans les largeurs minimum 180px et maximum 500px.

BTW, le plugin Twitter fonctionne parfaitement. Je ne sais pas pourquoi Facebook a décidé de ne pas régler ce problème … Je suppose qu’ils n’ont pas l’argent pour les bons développeurs 🙂