Web & Software Developer

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, Google+ 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 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.

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:

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;

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

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:

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.

Thank you for posting these AMP tips – they’ve made a big difference on my pages!

Adding sharing buttons at the top of the page didn’t fully work – the Twitter and Pinterest code only rendered text (“Tweet” and “Pin It”), not actual buttons and no sharing functionality … I’m not complaining, just pointing it out in case it’s possible to make this even better!