发表新帖
发表新帖

Responsive width Facebook Page Plugin

前端 未结
关注
17 1880
温柔的废话
温柔的废话 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:30

    It seems that Facebook Page Plugin doesn't change at all in past  5-7 years :) It wasn't responsive from the begining and still not now, even new param Adapt to plugin container width doesn't work or I don't understand how it works.

    I'm searching for the most posible simple way to do PLUGIN SIZE 100% WIDTH, and it seems it is not posible. Nonsense at it's best. How designers solve this problem?

    I found the best decision for this time 2017 Oct:

    .fb-page, .fb-page iframe[style], .fb-page span {
    width: 100% !important;
}
.fb-comments, .fb-comments iframe[style], .fb-comments span {
   width: 100% !important;
}

    This lets do not broke screen size width for responsive screens, but still looks ugly, because cuted in some time and doesn't stretch... Facebook doesn't care about plugins design at all. That's the truth.

    0 讨论(0)
  • 无人共我
    2020-12-02 17:30

    After struggling for some time, I think I found out quite simple solution.

    Inspired by Robin Wilson I made this simple JS function (the original resizes both width and height, mine is just for the width):

     function changeFBPagePlugin() {
    var container_width = Number($('.fb-container').width()).toFixed(0);
    if (!isNaN(container_width)) {
        $(".fb-page").attr("data-width", container_width);
    }
    if (typeof FB !== 'undefined') {
        FB.XFBML.parse();
    }
};

    It checks for the current width of the wrapping div and then puts the value inside fb-page div. The magic is done with FB.XFBML object, that is a part of Facebook SDK, which becomes available when you initialize the fb-page itself via window.fbAsyncInit

    I bind my function to html body's onLoad and onResize:

    <body onload="changeFBPagePlugin()" onresize="changeFBPagePlugin()">

    On the page I have my fb-page plugin wrapped in another div that is used as reference:

    <div class="fb-container"> 
    <div class="fb-page" ...stuff you need for FB page plugin... </div>
</div>

    Finally the simple CSS for the wrapper to assure it stretches over the available space:

    .fb-container {
    width: 95%;
    margin: 0px auto;
}

    Putting all this together the results seem quite satisfying. Hopefuly this will help someone, although the question was posted quite a long time ago.

    0 讨论(0)
  • 我寻月下人不归
    2020-12-02 17:31

    This doesn't work too well when you have the plugin placed in a thin column, like a sidebar for example. On medium sized screens these typically run smaller than 280px in width.

    .fb-page, 
.fb-page span, 
.fb-page span iframe[style] { 
    width: 100% !important; 
}

    This is the code I use to stop the plugin breaking outside of a wrapping container. Unlike the old like box which would tile, this one just overflows, hiding the overflowed content.

    0 讨论(0)
  • 孤城傲影
    2020-12-02 17:32

    To make the new Facebook Page Plugin responsive on initial page load, you'll want to remove the data-width attribute and instead add

    data-adapt-container-width="true"

    This will make the Facebook Page Plugin responsive, but only on the initial page render, with a minimum width of 180px.

    I'm still trying to figure out how to make it truly dynamically responsive, in spite of Facebook's caveat (I'll post an update if I ever find the answer).

    No Dynamic Resizing

    The Page plugin works with responsive, fluid and static layouts. You can use media queries or other methods to set the width of the parent element, yet:

    The plugin will determine its width on page load. It will not react changes to the box model after page load. If you want to adjust the plugin's width on window resize, you manually need to rerender the plugin.

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

    You could make it dynamically responsive by reinitializing the widget on browser resize, as Io Ctaptceb suggested, but by doing that you run the risk of eating up memory very quickly.

    Yugal Jindle had a good answer, but I wanted to clarify that I have yet to find a way to make the plugin truly dynamically responsive.

    0 讨论(0)
  • 面向向阳花
    2020-12-02 17:32

    We have overcome some limitations of the responsiveness of the Facebook plugin by using it as an IFRAME, but bootstrapping at render time with some JavaScript that dynamically sizes the frame (and width/height parameters in the SRC URL) to fill the container element.

    If the container is greater than 500px, to avoid having an obvious gutter on the right hand side, we simply add a scale transform with some simple math.

    The IFRAME onload event fires when SRC is initially empty (when we bootstrap it) and then again after it finishes loading when we set the SRC, but we simply short-out if SRC attribute already exists.

    In our usage, we don't change the width of the Facebook feed for desktop usage, and for handheld/tablet viewports, those widths are fixed by nature (yes, we trap orientation change) but if you want yours to continually adjust if the browser window dimensions change, you could just re-fire the code as an exercise for yourself.

    This is tested in with Chrome and Safari, on desktop and iOS/Android:

    <script>
    function setupFBframe(frame) {

        if(frame.src) return; // already set up

        // get parent container dimensions to use in src attrib
        var container = frame.parentNode;

        var containerWidth = container.offsetWidth;
        var containerHeight = container.offsetHeight;

        var src = 'https://www.facebook.com/plugins/page.php' +
                '?href=https%3A%2F%2Fwww.facebook.com%2FYourFacebookAddress%2F' +
                '&tabs=timeline' +
                '&width=' + containerWidth +
                '&height=' + containerHeight +
                '&small_header=true' +
                '&adapt_container_width=false' + /* doesn't seem to matter */
                '&hide_cover=true' +
                '&hide_cta=true' +
                '&show_facepile=false' +
                '&appId';

        frame.width = containerWidth;
        frame.height = containerHeight;
        frame.src = src;

        // scale up if container > 500px wide
        if(containerWidth) > 500) {
            var scale = (containerWidth / 500 );
            frame.style.transform = 'scale(' + scale + ')';
        }
    }
</script>
<style>
    #facebook_iframe {
        transform-origin: 0 0;
        -webkit-transform-origin: 0px 0px;
        -moz-transform-origin: 0px 0px;
    }
</style>
<iframe frameborder="0" height="0" width="0" onload="var _this = this; window.setTimeout(function(){ setupFBframe(_this); },500 /* let dom settle before eval parent dimensions */ );"></iframe>

    EDIT: Forgot about transform-origin, removed need for adjusting left/top to accommodate scale. Thanks Io Ctaptceb

    0 讨论(0)
 看不清?
提交回复
热议问题