facebookresponsivefacebook-social-plugins

Facebook Page Plugin, adapt_container_width does ABSOLUTELY nothing


I'm trying to display the page plugin (https://developers.facebook.com/docs/plugins/page-plugin) inside a div that I set to 400px, and have the page plugin iframe adapt to this 400px width thanks to the adapt_container_width param. It doesn't work.

So, first things first, don't suggest that I set the page plugin's width to 400px directly. I'm just using this 400px on the parent as an example. Ultimately I won't know the screen size to which the parent will adapt. But I mean, if it doesn't even work with a hard-coded fixed width...

Here is the code (Vue) :

<div style="width: 400px">
            <iframe
                src="https://www.facebook.com/plugins/page.php?href=[...my page]&show_posts=true&width=500&height=800&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=[...the app id]"
                width="500" height="800" 
                style="border:none;overflow:hidden" 
                scrolling="no" 
                frameborder="0"
                allowfullscreen="true"
                allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

</div>

I've tried removing the width and height attributes, removing the width and height params in the url, setting it to 100% on one or the other... Nothing works. The iframe ends up being either 500px in width, or 300px if I don't set a width, which I guess is the default value. It never adapts to 400px.

I absolutely don't understand what that adapt_container_width=true is supposed to do or how to use it.

PS: Also, I'm using show_posts=true instead of tabs=timeline because of this other well known bug : https://developers.facebook.com/community/threads/281007613843950/. It is inconsequential to this problem.

EDIT

As suggested by a comment, I tried setting the width directly on the iframe. Setting it on the width attribute or by a style attribute doesn't work either. The only way I could MAKE IT WORK is by setting the width directly in the url parameters.

Thanks to the fact that I'm using Vue, I can modify the url dynamically on page load, so I can make it adapt to the screen size, but... I still don't understand the point of that adapt_container_width then, as I have to explicitly give it a fixed width at the deepest level I have access to.


Solution

  • If you're using some framework that allows you to dynamically change the HTML code at runtime like Vue, you can make the plugin responsive by modifying the width directly in the url parameters given to the iframe, with something like this :

            <ClientOnly>
                <iframe
                    :src="`https://www.facebook.com/plugins/page.php?href=[your page...]&show_posts=true&width=${screen_width}&height=800&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=[your app id...]`"
                    :width="screen_width" height="800" style="border:none;overflow:hidden" scrolling="no"
                    frameborder="0" allowfullscreen="true"
                    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
                </iframe>
            </ClientOnly>
    

    Where "screen_width" is a variable that contains the current screen width... For me it's a computed value on page load :

    const screen_width = computed(() => {
    return window.innerWidth
    })
    

    You can then set the adapt_container_width to whatever... So, if anyone still has some input on what the hell this param is for, I'm still interested. Otherwise, this is "solved".