Responsive width Facebook Page Plugin

前端 未结 17 1931
温柔的废话
温柔的废话 2020-12-02 16:28

Facebook introduced a new Page Plugin to replace the Like box plugin.

Documentation: https://developers.facebook.com/docs/plugins/page-plugin/

I\'m replacing

17条回答
  •  爱一瞬间的悲伤
    2020-12-02 17:25

    I refined Twentyfortysix answer a bit, to only trigger the event after the resize is done.

    In addition I added check for the width of the window, so it won't trigger the reinitialisation on Android.

    (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_EN/sdk.js#xfbml=1&version=v2.3";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    
        jQuery(document).ready(function($) {
            var oldwidth = $(window).width();
            var timeout;
    
            var recalc = function() {
              clearTimeout(timeout);
              timeout = setTimeout(function() {
              var container_width = $('#fbcontainer').width();    
                $('#fbcontainer').html('');
                if(typeof FB !== 'undefined') {
                    FB.XFBML.parse( );  
                }  
              }, 100);  
            };
    
            recalc();
    
          $(window).bind("resize", function(){  
            if(oldwidth !== $(window).width()) {
                recalc();
                oldwidth = $(window).width();
            }
            }); 
        });
    

提交回复
热议问题