AMP Error on Facebook Widget Width

Resolved IILLC
(@iillc)

5 years, 9 months ago

I have been trying to get a new AMP error fixed that has popped up. It is in a section of code that generates a Facebook social area. I went to the theme developers and they stated that their theme was using AMP complient px for width but the AMP page is using % which is throwing the error. (I believe) They asked me to see if you knew about this issue and if there was a fix. Here is what I got back from the Theme devs.

“I further check and it seems that on the normal version of the page, the
width of the Facebook comment is the width which is complying to the AMP but
when you check the AMP version of the page it will set the width to 100%
https://cl.ly/c560a1e5fcef

Since we have isolated this issue and might be coming from the AMP plugin,
the next course of action would be contacting the AMP plugin developer so
they can have a look with the issue as well.”

See how the regular page has px but the amp converted one has % for width?

Thanks for your help!

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author Weston Ruter
(@westonruter)

5 years, 9 months ago
Hello. Can you share the URL of the AMP page that has the problem?

Percentage-based units are not allowed by AMP. I see the AMP version is using a 100% width and a fixed 400px height. In AMP, the way to do this is to use the fixed-height layout. In other words:
```
<amp-facebook-comments height=400
    layout="fixed-height"
    data-numposts="5"
    data-href="http://www.example.com/">
</amp-facebook-comments>
```
Is the AMP version being converted from the non-AMP version?
Thread Starter IILLC
(@iillc)

5 years, 8 months ago

Thanks for the response.

The page is:
https://danielbussius.com/7-simple-steps-to-increase-social-engagement/?amp

The normal page has a pixel count instead of percentage but the AMP page has %. I do not believe they are separately designed pages, we are just using the AMP plugin to produce the AMP page.

Plugin Author Weston Ruter
(@westonruter)

5 years, 8 months ago

Something seems wrong with your Facebook comments widget. It has an empty data-href attribute:

<div class="tve-fb-comments" data-colorscheme="light" data-numposts="20" data-order-by="social" data-width="100%" data-href="" data-fb-moderator-ids="[email protected]"></div>

Did you try generating it via https://developers.facebook.com/docs/plugins/comments/ ?

I’d expect something like this:

<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="100%" data-numposts="5"></div>

That being said, there is actually a bug in the AMP plugin related to a 100% width, but there’s also a problem with your widget.

Plugin Author Weston Ruter
(@westonruter)

5 years, 8 months ago

Assuming the issue your widget code is fixed, here is a pull request to fix the width=100% issue: https://github.com/ampproject/amp-wp/pull/2776

See the amp.zip attached to the PR for testing.

Thread Starter IILLC
(@iillc)

5 years, 8 months ago

Thanks for the response about the widget. I will go back to the Theme developers on that one.

Thanks a ton for the AMP fix. I will test it now.

Thread Starter IILLC
(@iillc)

5 years, 8 months ago

This fix has worked. Thank you so much for your help!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘AMP Error on Facebook Widget Width’ is closed to new replies.

Tags