Same issue: Reduced height facebook post plugin (iframe)

BTW: I‘m running Complianz Version 4.9.1 on WordPress 5.5.3

Hi @dutchmanjack,

There were some different issues in the thread you mentioned,

Regarding the height of the iFrame, it seems to be loaded fully.

https://snipboard.io/HaZpjJ.jpg

If you mean something different, let me know,

regards Aert

Hoi Aert,

Thanks for your reply. I meant the height of the iFrame. The Problem occurs on Tablets and Smartphones (in my case: iPad and Samsung S10).
Everything seems fine on windows desktop computer…

Best Regards/groetjes (en blijf gezond)
Jack

Hi @dutchmanjack,

Can you explain how these iFrames are added, maybe an example?

It seems Complianz takes the height/weight from the iFrame, which is 808/500, which is fine from 500px and above but does not adjust the height on mobile devices.

Let me know,

groet Aert

Hi @aahulsebos,

I generate the code for the iFrame on the Facebook for Developers site:

https://developers.facebook.com/docs/plugins/embedded-posts/?prefill_href=https%3A%2F%2Fwww.facebook.com%2FFeuerwehrWesterbeck%2Fposts%2F2772798046317295&__cft__%5B0%5D=AZUocQZkf8cHpVL5jbM2yot2Qy2vlklrX3sNHm-KHyG1SyzAvzxR6zjqdI-qmGm9ma5Kq7-6t_IM-FONK5mXRCmc67lYKe0jZEGCgG0-TbhLCuiAOFZb-1T-7cqZV-SsC4iZpNk-0ijkhVJTS0Du-eo0&__tn__=p%2CP-R#

Then I start a new post in WordPress and add this code as an HTML-Code Block (Gutenberg editor)… that‘s it.

It worked fine for a while, but suddenly the height of the iFrame is reduced to the height of the placeholder. Turning the placeholder of also solves the problem, but I need the placeholder for the case our users did not except cookies…

Groetjes
Jack

Hi @dutchmanjack,

Could you try instead of; data-width=”500″ -> data-width=””, so it will be fluid from the start?

You can find in the HTML code block you have added,

groet Aert

Hey @aahulsebos,

Since the Problem is not the width, I also tried changing the height. Result: the height of the iframe is always set to the height of the placeholder…

Groetjes,
Jack

Hi @dutchmanjack,

I added the following on https://s-qdfr772twp2cl.eu1.wpsandbox.org/;

<div class="fb-post" data-href="https://www.facebook.com/FeuerwehrWesterbeck/posts/2772798046317295" data-width="" data-show-text="true"><blockquote cite="https://www.facebook.com/FeuerwehrWesterbeck/posts/2772798046317295" class="fb-xfbml-parse-ignore"></div>

Is there a difference in code? Otherwise, maybe try switching to a standard WP theme and see if we need to look at the theme,

regards Aert

Hi @aahulsebos,

that’s okay as a workaround. I load the script in the footer and after adding the div instead of an iframe the posts are shown completely.

However the problem is, that I have to edit about 150 posts and I would like to prevent this… I could also deactivate the placeholder in the complianz settings, but that’s not the real solution either, because visitors don’t see the text which is shown on blocked content.

I tried the twenty-twenty theme instead of hitmag. This also works, although I had to increase the height of the iframe to show the full content on mobile displays. You can see the result here: https://s-qtm6dn4k8t2cl.eu1.wpsandbox.org/test/

Switching back to hitmag shows the height problem again. So it seems to be caused by the combination of complianz and hitmag.

Any idea to solve it?

Groetjes en alvast bedankt!
Jack

Hoi @dutchmanjack,

I’ll install the theme and have a look around,

regards Aert

Hi @dutchmanjack,

https://really-simple-sandbox.com/hitmag/sample-page/ (script in footer)

The theme seems fine. Mobile as well, https://snipboard.io/FfTUB3.jpg

Could you post the iFrame you’re using, as I am using the Div from the Facebook dev console, I will see what I can do.

Hoi @aahulsebos

Thanks for trying. The div works fine for me too, but in this case I have to change all of the older posts. I create newer post using the Javascript code.

BTW: you can also create the iframe on the tab next to the Javascript/sdk tab where you copy the div-code from. But here is an example:

<iframe src=”https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FFeuerwehrWesterbeck%2Fposts%2F2772798046317295&width=500&show_text=true&height=571&appId&#8221; width=”500″ height=”571″ style=”border:none;overflow:hidden” scrolling=”no” frameborder=”0″ allowfullscreen=”true” allow=”autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share”></iframe>

Groetjes en bedankt
Jack

Hoi @dutchmanjack,

I now have an iFrame at https://really-simple-sandbox.com/hitmag/sample-page/. On mobile, it doesn’t fully load with or without Complianz. https://ff-westerbeck.de/category/einsaetze/einsaetze-2021?cmplz_safe_mode=1

On another theme, the iFrame has another height on mobile. The point will be the iFrame will not be as responsive as long as the height and width are defined, and the template will handle iFrames at their own account.

I don’t have an idea for now, other than editing the posts.

groet Aert

Hi @aahulsebos,

thanks for testing. The width is not really a problem for me. It’s the height that matters. Posts are being cut of at the height of the placeholder on mobile/tablet. Using hitmag theme, this only happens if complianz and placeholder is activated . So there must be an issue here somewhere.

But thanks anyway for your time investigating this…

Groetjes,
Jack

Hoi @dutchmanjack,

Je kan ons ook even via de website bereiken dan kunnen we er iets dieper induiken. Dan zet ik het hier op resolved.

groet Aert