Support » Plugin: AMP » AMP Error on Facebook Widget Width

  • Resolved IILLC

    (@iillc)


    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)

    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)

    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)

    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="daniel@danielbussius.com"></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)

    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)

    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)

    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.