Support » Plugin: Jetpack by WordPress.com » sharing buttons don’t display properly on amp page

  • Resolved joneiseman

    (@joneiseman)


    When I use the official button for Twitter, it doesn’t display correctly on the AMP version of the page (single post page). I’m using the Twenty Seventeen theme and the only plugins that are active are “AMP”, “Jetpack”, and “All In One WP Security”. Disabling the Security plugin doesn’t make any difference. AMP is “The Official AMP Plugin for WordPress” I see the same thing if I use the “Accelerated Mobile Pages” plugin instead of the “AMP” plugin.

    Here’s what it looks like: https://www.dropbox.com/s/rzm62caukh20og7/twitter.png?dl=0

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support lizkarkoski

    (@lizkarkoski)

    Good morning –

    Thanks for the screen shot. I think we can rule out a theme issue since you’re using a default WordPress theme. That’s good news. What I’d like to try next is to rule out a plugin conflict. Looks like you started that process.

    Try disabling all of your plugins, including Jetpack. Add back AMP and see if it works correctly with no other plugins installed. Then, if it works, add back the other two one at a time to see which one is causing the issue.

    If I disable AMP and Jetpack then of course I can’t reproduce the problem (since there’s no AMP page). If I then enable AMP, I can’t reproduce the problem because there are no social sharing icons. If I then enable Jetpack, I can see the problem.

    Plugin Contributor James Huff

    (@macmanx)

    Volunteer Moderator

    I took another look at the screenshot, and yeah this is very odd. We don’t offer any square-style buttons. The closest are our Icon-Only option, but those are round: https://jetpackme.files.wordpress.com/2019/06/sharing-buttons.png

    But, I can’t deny, the code on your site is for our buttons.

    So, you’ve got a lot going on here, round buttons turning square, and then I guess a second set of buttons that are just list items?

    It’s making my brain hurt too. 😀

    Oh, and more brain hurting, on the non-AMP page, I only see the Twitter button, no Facebook button.

    Are you running any caching plugins in addition to AMP? I’m curious to see what changes when you flush everything.

    No, I’m not running any caching plugins. The round buttons come from Jetpack. However, I’m using the “official” Facebook and Twitter buttons (which are rectangular). The round buttons no longer display the Facebook share count (which is why I switched to use the “official” buttons). Sometimes there’s a delay in retrieving the share count from Facebook and this is why the Facebook button doesn’t always appear (refreshing the page will usually result in the button appearing again), but this is a different problem. I’m more interested in understanding why the list is appearing underneath the buttons. I was able to work around this problem on the live site by adding the following css rules:

    .share-twitter-button, .share-end {
        display: none;
    }

    This is definitely coming from the sharedaddy module of Jetpack. I see the list uses the class twitter-share-button.

    In the file wp-content/plugins/jetpack/modules/sharedaddy/sharing-source.php on line 750
    In the function get_display:

    return sprintf(
                    '<a href="https://twitter.com/share" class="twitter-share-button" data-url="%1$s" data-text="%2$s" %3$s %4$s>Tweet</a>',
                    esc_url( $share_url ),
                    esc_attr( $post_title ),
                    $via,
                    $related
                );
    • This reply was modified 5 months, 1 week ago by  joneiseman.
    • This reply was modified 5 months, 1 week ago by  joneiseman.
    Plugin Contributor James Huff

    (@macmanx)

    Volunteer Moderator

    However, I’m using the “official” Facebook and Twitter buttons (which are rectangular).

    Yeah, so that’s the weird thing there. The official buttons look like this: https://cld.wthms.co/JXbHqD

    Whereas yours look like this: https://cld.wthms.co/BeGsLk

    But, you’re right, I’m doing some more digging and it seems like the AMP plugins impose their own style, probably a method of cutting down on resources.

    Overall, we don’t have control over that, since we’re not doing it.

    I’m more interested in understanding why the list is appearing underneath the buttons.

    That is a great question. Does the list appear under a different theme, like Twenty Nineteen? You can use the Health Check plugin’s Troubleshooting Mode to check that without affecting normal visitors: https://wordpress.org/plugins/health-check/

    Yes, I see this problem with the Twenty Nineteen theme (on my site).

    I tried creating a brand new WordPress installation and used the Twenty Nineteen theme and installed the AMP and Jetpack plugins and I see a similar problem (it puts a list underneath the sharing buttons on the AMP page for a single post). I see a bullet list with just one item (a blank line):
    https://www.dropbox.com/s/gm8ju1vg0pjmvcf/FreshInstall.png?dl=0

    • This reply was modified 5 months, 1 week ago by  joneiseman.
    Plugin Contributor James Huff

    (@macmanx)

    Volunteer Moderator

    Well … one blank line is an improvement I suppose? [fake laugh hiding real pain]

    Would you please get in touch with us via https://jetpack.com/contact-support/?rel=support so we can take a closer look on this?

    Sorry for the trouble!

    If I activate three buttons on the new site (Print, Facebook, and Twitter) then I see identical behavior to my website. I have filed a support request at jetpack.com/contact-support

    Thanks,
    Jon

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.