wake-up-neo.com

Facebook Page Plugin - Breite dynamisch rendern/ändern (Responsive/RWD)

Ich verwende das Facebook-Widget "Seiten-Plugin". Auf Facebooks Seite steht:

Wenn Sie die Breite des Plugins in der Fenstergröße anpassen möchten, müssen Sie das Plugin manuell neu rendern.

Wie kann ich die Breite dieses Plugins dynamisch ändern, ohne die Seite zu aktualisieren (z. B. mit Firefox-Ansicht - STRG + M-Verknüpfung)?.

Und ja, ich habe THIS post gelesen, aber keine dieser Lösungen gibt an, wie das Plugin neu gerendert werden kann.

8
Krzysztof Trzos

Für den JavaScript/jQuery-Ansatz möchten Sie möglicherweise das Ereignis zur Größenänderung des Fensters anhören und den Facebook Page Plugin Div-Container neu laden. Stellen Sie sicher, dass das FB-Seiten-Plugin um eine übergeordnete div-Datei gewickelt ist, damit wir ihre Größe verwenden können, wenn wir die div-Datei neu laden.

<div id="pageContainer">
    <div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="500" data-height="250" data-small-header="false" 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="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>
</div>

$( window ).resize(function() {
    var container_width = $('#pageContainer').width();    
    $('#pageContainer').html('<div class="fb-page" data-href="https://www.facebook.com/facebook" data-width="' + container_width + '" data-height="250" data-small-header="false" 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="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>');
    FB.XFBML.parse();    
});
19
jroi_web

Eine Lösung für dieses Problem ist:

(function($){
    var a = null;
    $(window).resize(function(){
        if(a != null) {
            clearTimeout(a);
        }

        a = setTimeout(function(){
            FB.XFBML.parse();
        },1000)
    })
})(jQuery)

Ja, Facebook-Seiten-Plugin (und andere Plugins) werden nur beim Laden von Seiten gerendert. Und wenn dieses Plugin ausgeblendet ist (oder das Fenster nach dem Rendern in der Größe geändert wurde), müssen Sie dem FB mitteilen, dass er seine Plugins neu rendert. Dies funktioniert perfekt mit dem Aufruf von FB.XFBML.parse () nach dem Anzeigen/Ändern der Größe.

Du kannst es so machen:

in HTML:

<div class="fb-page" data-href="{url}" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="{url}"><a href="{url}">{title}</a></blockquote></div></div>

in Javascript:

function changeFBPagePlugin(width, height, url) {

    if (!isNaN(width) && !isNaN(height)) {
        $(".fb-page").attr("data-width", width).attr("data-height", height);
    }
    if (url) {
        $(".fb-page").attr("data-href", url);
    }
    FB.XFBML.parse();
 }

Rufen Sie einfach zum erneuten Rendern auf (wenn Sie das Plugin nach dem Ausblenden anzeigen möchten)

 changeFBPagePlugin(355, 244);

oder

 changeFBPagePlugin(355, 244, "https://facebook.com/PageNameHere");

wenn du ein anderes FB-Seiten-Plugin ändern willst

6
Victor Perov

Lösung ist:

FB.XFBML.parse(); 

Ich habe meine Probleme mit allen versteckten Facebook-Plugins behoben, nachdem ich den Inhalt von "hidden" div mit dem Menü von jsfiddle oben zu einem Hauptdiv hinzugefügt habe.

Menü Anhängen von Inhalten aus versteckten divs in einem Haupt div

Ich wollte ein anderes Menü benutzen, das war es, was ich tun wollte.

Ich habe FB.XFBML.parse(); in meiner Funktion verwendet, bevor der return false; und es hat perfekt für Seiten, Kommentare, Likes funktioniert. Jedes Mal, wenn auf das Menü geklickt wird, werden jetzt alle Plugins analysiert.

Vielen Dank .

3
David Augustus

Unter Verwendung des Codes aus den obigen Antworten funktioniert der folgende Code für mich:

<div id="fb-root"></div>
<!--
  From https://developers.facebook.com/docs/plugins/page-plugin/
-->
<div id="Facebook-Widget">
  <div class="fb-page" data-href="{url}" data-tabs="timeline"
       data-small-header="false" data-adapt-container-width="true"
       data-hide-cover="false" data-show-facepile="true">
    <blockquote cite="{url}" class="fb-xfbml-parse-ignore"><a
        href="{url}">{title}</a></blockquote>
  </div>
</div>

<script type="text/javascript">

  var Example =
    {
      foFuncTimeOut: null,

      //----------------------------------------------------------------------------------------------------
      initializeRoutines: function ()
      {
        // Facebook sidebar
        // From https://developers.facebook.com/docs/plugins/page-plugin/
        (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.10";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

      },

      // -------------------------------------------------------------------------------------------------------------------
      setupFacebook: function ()
      {
        var loWidget = jQuery('#Facebook-Widget');

        if (loWidget.length == 0)
        {
          return;
        }

        Example.resizeFacebook(loWidget);
        jQuery(window).resize(function ()
        {
          Example.resizeFacebook(loWidget);
        });
      },

      // -------------------------------------------------------------------------------------------------------------------
      // From http://stackoverflow.com/questions/30083986/facebook-page-plugin-rerender-change-width-dynamically-responsive-rwd
      resizeFacebook: function (toWidget)
      {
        if (Routines.foFuncTimeOut != null)
        {
          clearTimeout(Routines.foFuncTimeOut);
        }

        Routines.foFuncTimeOut = setTimeout(function ()
        {
          // Query the block above the Facebook widget.
          var lnWidth = jQuery('#block-views-block-blog-management-blog-listing-block').width();
          if (lnWidth < 180)
          {
            lnWidth = 180;
          }
          if (lnWidth > 500)
          {
            lnWidth = 500;
          }

          var lnHeight = (jQuery(window).width() >= 768) ? 1200 : 700;

          toWidget.css('width', lnWidth + 'px');
          toWidget.css('height', lnHeight + 'px');

          var loFB = toWidget.find('.fb-page');

          loFB.css('width', lnWidth + 'px');
          loFB.css('height', lnHeight + 'px');

          // data-width & data-height only accept whole numbers.
          loFB.attr('data-width', Math.floor(lnWidth));
          loFB.attr('data-height', Math.floor(lnHeight));

          if (typeof FB !== 'undefined')
          {
            FB.XFBML.parse();
          }

        }, 1000);


      },

      //----------------------------------------------------------------------------------------------------
    };

  Example.initializeRoutines();
  Example.setupFacebook();

</script>
0
Eddie Fann