Social Media Sharing Buttons For WordPress AMP (Accelerated Mobile Pages)

This is how you can add social media sharing buttons to your WordPress Accelerated Mobile Pages. This works with the WordPress AMP plugin by Automattic. These social media sharing links have no JavaScript.

This includes a Twitter “Tweet” link, a Facebook share link, and a Pinterest “Pin it” link, all without JavaScript.

You don’t need a custom AMP post-template for this. The whole code goes in your functions file, whether a child theme functions file, or other functions file, or plugin (see how to add code).

This will add the social media share buttons on WordPress AMP posts. You can choose to add the social buttons below the content, above the content, or both. See the variations below.

This also adds the necessary CSS styles to color the social media sharing buttons with their official brand colors.

Step 1: add this code to your functions

/**
 * Template tag to display or return social media share buttons without js.
 * @param bool $return Whether to return string instead of echoing.
 */
function my_amp_social_share( $return = false ) {
	$url            = get_permalink();
    $title          = get_the_title();
    $encoded_url    = urlencode( $url );

    $media = has_post_thumbnail() ? wp_get_attachment_url( get_post_thumbnail_id() ) : '';

	$out = '<div class="amp-share">';

	// Twitter
	$out .= '<a href="https://twitter.com/share?text=' . urlencode( $title ) . '&amp;url=' . $encoded_url . '" target="_blank" rel="noopener" class="as-twitter" title="Tweet">Tweet</a> ';

	// Facebook
	$out .= '<a target="_blank" rel="noopener" href="http://www.facebook.com/sharer.php?u=' . $encoded_url . '" class="as-facebook" title="Share on Facebook">Share</a> ';

	// Pinterest
	$out .= '<a href="http://www.pinterest.com/pin/create/button/?url=' . $encoded_url . '&media=' . $media . '&description=' . urlencode( $title . ' - ' . $url ) . '" class="as-pinterest" target="_blank" rel="noopener">Pin It</a> ';

	$out .= '</div>';

	if ( $return ) {
		return wp_kses_post( $out );
	} else {
		echo wp_kses_post( $out );
	}
}
 
/**
 * Add CSS styles for social media share buttons
 */
function my_amp_social_media_share_css( $amp_template ) {
    ?>
    .amp-share{
        margin: 36px 16px;

    }
    .amp-share a {
        margin:10px 5px;
        line-height: 1;
        color:#fff;
        padding:3px 6px;
        text-decoration:none;
        font-family: Verdana, Geneva, "Bitstream Vera Sans", sans-serif;

    	/* border-radius: 3px; */
		/* box-shadow: 1px 1px 3px #888; */

    }
    .amp-share a:hover{
        color:#fff;
        text-decoration:none;
    }
  
    .amp-share .as-facebook {
        background-color: #3B5998;
    }
    .amp-share .as-twitter {
        background-color:#00aced;
    }
    .amp-share .as-pinterest {
        background-color:#cb2027;
    }

    /** YOU CAN ADD CUSTOM CSS STYLES BELOW **/






    <?php
}
add_action( 'amp_post_template_css', 'my_amp_social_media_share_css' );

function my_amp_footer_social_share_display( $amp_template ) {
	my_amp_social_share();
}

Step 2: choose where to add the social media sharing buttons

Here are four variations to choose from. You may choose more than one of the following variations, they can all work at the same time. To use one of these variations, add the code for that variation to your functions, just like you added the code above.

1. To show the social sharing buttons below the content on the AMP post footer, after the categories and tags, but before the comments link, use this:

   /**
    * Add social media share buttons to WordPress AMP footer, BELOW categories/tags, ABOVE comments link
    */
   add_action( 'amp_post_template_include_meta-comments-link', 'my_amp_footer_social_share_display' );
   

2. If you prefer to add the social buttons below the content, but before the categories and tags, use this:

   /**
    * Add social media share buttons to WordPress AMP footer, ABOVE categories/tags
    */
   
   add_action( 'amp_post_template_include_meta-taxonomy', 'my_amp_footer_social_share_display' );
   

3. If you prefer to add the social buttons after the comments link, use this:

   /**
    * Add social media share buttons to WordPress AMP footer, BELOW comments link
    */
   
   add_action( 'amp_post_template_include_footer', 'my_amp_footer_social_share_display' );
   

   If you use this example, adding the the buttons below the comments link, you will need to add some styling to align the buttons. So, if you use this variation, then add this line of CSS code into line 42 in the code from Step 1:

   text-align:center; 

4. To add the social media sharing buttons above the AMP content, use this:

   /**
    * Add Social Media share buttons above content on WordPress AMP posts
    */
   add_action( 'pre_amp_render_post', 'my_amp_add_custom_filter' );
   function my_amp_add_custom_filter() {
   	add_filter( 'the_content', 'my_amp_social_share_above_content' );
   }
   function my_amp_social_share_above_content( $content ) {
   	$content = my_amp_social_share( true ) . $content;
   	return $content;
   }
   

   If you use this example, you’ll probably need to align the social buttons above the AMP content. So, if you use this example, you can align the buttons by adding this CSS code to line 76 of the code from Step 1:

   /* Align share buttons above the AMP content */
   .amp-wp-article-content .amp-share {
   	margin: 36px 0;
   	text-align: left;
   }
   

   If you want to align the social media buttons to the right, change “left” to “right” on line 4 of this snippet. (This only applies to the buttons above the content.)

Step 3: add optional style

If you want to give the social media buttons a style that pops a little, uncomment lines 52 and 53 in the code from Step 1. (To uncomment the code, remove the /* and */ from the beginning and end of those lines.)

This will give the buttons a slightly rounded border, as well as a light shadow to give some depth. This styling may help you get more clicks on those buttons.