Social Sharing Icons Don’t Display

To confirm, you’re seeing this issue in Native/Paired mode, correct? I’m seeing the sharing bar in Classic mode.

I tried installing the Sassy Social Share and in Paired mode when validating the URL via the plugin I see an issue:

file_path_not_allowed
Disallowed URL filesystem path for //example.com/wp-content/wp-plugins/sassy-social-share/public/../admin/css/sassy-social-share-svg.css.

This issue can be fixed in the sassy-social-share plugin by making the following change to /Users/westonruter/sites/wordpressdev/public/content/plugins/sassy-social-share/public/class-sassy-social-share-public.php:

- wp_enqueue_style( 'heateor_sss_sharing_default_svg', plugins_url( 'admin/css/sassy-social-share-svg.css', dirname( __FILE__ ) ), false, $this->version );
+ wp_enqueue_style( 'heateor_sss_sharing_default_svg', plugins_url( 'admin/css/sassy-social-share-svg.css', dirname( __FILE__ ) ), false, $this->version );

Anywhere that ../ is used in a URL should be replaced in this way in the plugin.

Nevertheless, this is just fixes the error from being raised. The fundamental problem is that Sassy Social Share plugin is not outputting the AMP-compatible sharing buttons on the paired mode template. It is attempting to enqueue JavaScript files which the AMP plugin is stripping out due to them not being valid AMP.

So in lieu of the above, the actual better fix is to make sure the AMP styles are output when in paired mode. This can be done by modifying \Sassy_Social_Share_Public::frontend_css() to add the following bit of code to the top of the function:

if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
    add_action( 'wp_print_styles', function() {
        echo '<style>';
        $this->frontend_amp_css();
        echo '</style>';
    } );
    return;
}

That’s not the perfect solution and I’m sure there are other things that aren’t being accounted for there, but it’s a start to get you going.

Also, ideally the AMP version of the buttons would use the amp-social-share component: https://www.ampproject.org/docs/reference/components/amp-social-share

Note that Jetpack’s social sharing does use amp-social-share: https://github.com/Automattic/jetpack/blob/f3b49863bc4dd8fec5fcd4d964cfc38715757b3b/3rd-party/class.jetpack-amp-support.php#L308-L313

You’ll want to wait until Jetpack 6.9 to try it out, however, due to a but with AMP 1.0 compatibility.

• This reply was modified 7 years, 4 months ago by Weston Ruter.

@heateor Hi. You can find info about the different modes at: https://amp-wp.org/documentation/how-the-plugin-works/amp-plugin-serving-strategies/