Facebook页面插件,`adapt_container_width` 参数完全没有起到任何作用。

huangapple go评论39阅读模式
英文:

Facebook Page Plugin, adapt_container_width does ABSOLUTELY nothing

问题

我试图在一个设置为400px的div中显示页面插件(https://developers.facebook.com/docs/plugins/page-plugin),并通过adapt_container_width参数使页面插件的iframe适应这个400px的宽度。但是它不起作用。

首先,不要建议我直接将页面插件的宽度设置为400px。我只是在父元素上使用这个400px作为示例。最终,我不知道父元素将适应的屏幕尺寸。但是,即使在硬编码的固定宽度下也不起作用...

以下是代码(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>

我尝试删除宽度和高度属性,删除url中的宽度和高度参数,将其中一个设置为100%... 什么都不起作用。iframe的宽度最终要么是500px,要么是300px,如果我不设置宽度,那么我猜是默认值。它从不适应到400px。

我绝对不明白adapt_container_width=true应该做什么,或者如何使用它。

PS:此外,我使用show_posts=true而不是tabs=timeline,因为有这个其他众所周知的bug:https://developers.facebook.com/community/threads/281007613843950/。这与这个问题无关。

编辑

正如评论中建议的,我尝试直接在iframe上设置宽度。将它设置为宽度属性或通过样式属性都不起作用。唯一能够使其工作的方法是在url参数中直接设置宽度。

由于我使用Vue,我可以在页面加载时动态修改url,以便使其适应屏幕尺寸,但是...我仍然不理解adapt_container_width的意义,因为我必须在我能够访问的最深层次明确给它一个固定的宽度。

英文:

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) :

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

&lt;/div&gt;

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.

答案1

得分: 0

如果你正在使用一些允许你在运行时动态更改HTML代码的框架,比如Vue,你可以通过直接修改传递给iframe的URL参数中的宽度来使插件响应式,就像这样:

<ClientOnly>
    <iframe
        :src="`https://www.facebook.com/plugins/page.php?href=[你的页面...]&show_posts=true&width=${screen_width}&height=800&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=[你的应用程序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>

其中,“screen_width”是包含当前屏幕宽度的变量... 对我来说,它是在页面加载时计算的值:

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

然后,你可以将“adapt_container_width”设置为任何值... 所以,如果还有人对这个参数的用途有疑问,我仍然感兴趣。否则,这个问题已经“解决”。

英文:

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 :

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

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(() =&gt; {
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".

huangapple
  • 本文由 发表于 2023年2月14日 20:45:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/75448043.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定