Sharing is caring

WordPress + AMP: Add Social Sharing Buttons to Accelerated Mobile Pages without plugin

WordPress + AMP: how to add Social Sharing Buttons to Accelerated Mobile Pages without plugin

Accelerated Mobile Pages have already been adapted by majority of bloggers and mainstream media outlets to deliver their content to mobile users. When it comes to WordPress, a plugin called AMP has enabled this AMP HTML pages for tens of thousands of blogs. However, the plugin lacks some features and you will have to customize the AMP theme yourself to get those features. For example, the plugin doesn’t enable related posts or social sharing button to the Accelerated Mobile Pages it produces. But yea there is a room for customization and the plugin developers have made sure you don’t get stuck with the basic theme it produces. There are several AMP filters that you could use to customize the theme the way you want. If you haven’t done it yet, I have already written extensively about customizing WordPress AMP plugin and adding related content to AMP pages without any need of other plugins.

And here you are going to add yet another feature to your AMP theme you already customized and this time it is social media sharing buttons. You don’t need to install another plugin for that.

Social sharing button is very important part of a blog. It could even be the main traffic-driving force especially if you have great and niche content. Just because you enabled AMP page for your WordPress blog doesn’t mean you want to lose your social media traffic. When it comes Accelerated Mobile Pages, major traffic comes to your page from search engines, but by adding social media sharing button to your AMP page, you could double the traffic to your site as well as followers on your social media pages.

WordPress AMP: Direct the links on Accelerated Mobile Pages to its AMP version

The video below shows you how to do this in your WordPress backend.

So to start with adding this new feature, you need to edit your functions.php file of your theme. It is always recommended to do this on your child theme because you don’t want to get all the customization wiped off once you update your theme in the future.

So copy this line of code and paste it in your functions.php.

add_action( 'amp_post_template_head', 'amp_add_socialbuttons' );
function amp_add_socialbuttons( $amp_template ) { ?>

    <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

<?php }

Now you have inserted Google script to your amp head, and to enable the button,  you need to edit your custom single.php file.

If you have followed our previous tutorial on customizing AMP theme, just go to your child theme -> AMP folder -> my-single.php then paste this code where you want the button to appear.

 <div class="social_buttons">
     <amp-social-share type="facebook"    data-param-app_id="YOUR FACEBOOK APP ID" width="50" height="28"></amp-social-share>

     <amp-social-share type="twitter"    width="50" height="28"></amp-social-share>

     <amp-social-share type="gplus"      width="50" height="28"></amp-social-share>

     <amp-social-share type="pinterest"  width="50" height="28"></amp-social-share>

     <amp-social-share type="linkedin" width="50" height="28"></amp-social-share>

     <amp-social-share type="email"      width="50" height="28"></amp-social-share>

     <a href="whatsapp://send?text=<?php echo get_the_permalink();?>">
       <div class="whatsapp-button">
         <amp-img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgOTAgOTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDkwIDkwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggaWQ9IldoYXRzQXBwIiBkPSJNOTAsNDMuODQxYzAsMjQuMjEzLTE5Ljc3OSw0My44NDEtNDQuMTgyLDQzLjg0MWMtNy43NDcsMC0xNS4wMjUtMS45OC0yMS4zNTctNS40NTVMMCw5MGw3Ljk3NS0yMy41MjIgICBjLTQuMDIzLTYuNjA2LTYuMzQtMTQuMzU0LTYuMzQtMjIuNjM3QzEuNjM1LDE5LjYyOCwyMS40MTYsMCw0NS44MTgsMEM3MC4yMjMsMCw5MCwxOS42MjgsOTAsNDMuODQxeiBNNDUuODE4LDYuOTgyICAgYy0yMC40ODQsMC0zNy4xNDYsMTYuNTM1LTM3LjE0NiwzNi44NTljMCw4LjA2NSwyLjYyOSwxNS41MzQsNy4wNzYsMjEuNjFMMTEuMTA3LDc5LjE0bDE0LjI3NS00LjUzNyAgIGM1Ljg2NSwzLjg1MSwxMi44OTEsNi4wOTcsMjAuNDM3LDYuMDk3YzIwLjQ4MSwwLDM3LjE0Ni0xNi41MzMsMzcuMTQ2LTM2Ljg1N1M2Ni4zMDEsNi45ODIsNDUuODE4LDYuOTgyeiBNNjguMTI5LDUzLjkzOCAgIGMtMC4yNzMtMC40NDctMC45OTQtMC43MTctMi4wNzYtMS4yNTRjLTEuMDg0LTAuNTM3LTYuNDEtMy4xMzgtNy40LTMuNDk1Yy0wLjk5My0wLjM1OC0xLjcxNy0wLjUzOC0yLjQzOCwwLjUzNyAgIGMtMC43MjEsMS4wNzYtMi43OTcsMy40OTUtMy40Myw0LjIxMmMtMC42MzIsMC43MTktMS4yNjMsMC44MDktMi4zNDcsMC4yNzFjLTEuMDgyLTAuNTM3LTQuNTcxLTEuNjczLTguNzA4LTUuMzMzICAgYy0zLjIxOS0yLjg0OC01LjM5My02LjM2NC02LjAyNS03LjQ0MWMtMC42MzEtMS4wNzUtMC4wNjYtMS42NTYsMC40NzUtMi4xOTFjMC40ODgtMC40ODIsMS4wODQtMS4yNTUsMS42MjUtMS44ODIgICBjMC41NDMtMC42MjgsMC43MjMtMS4wNzUsMS4wODItMS43OTNjMC4zNjMtMC43MTcsMC4xODItMS4zNDQtMC4wOS0xLjg4M2MtMC4yNy0wLjUzNy0yLjQzOC01LjgyNS0zLjM0LTcuOTc3ICAgYy0wLjkwMi0yLjE1LTEuODAzLTEuNzkyLTIuNDM2LTEuNzkyYy0wLjYzMSwwLTEuMzU0LTAuMDktMi4wNzYtMC4wOWMtMC43MjIsMC0xLjg5NiwwLjI2OS0yLjg4OSwxLjM0NCAgIGMtMC45OTIsMS4wNzYtMy43ODksMy42NzYtMy43ODksOC45NjNjMCw1LjI4OCwzLjg3OSwxMC4zOTcsNC40MjIsMTEuMTEzYzAuNTQxLDAuNzE2LDcuNDksMTEuOTIsMTguNSwxNi4yMjMgICBDNTguMiw2NS43NzEsNTguMiw2NC4zMzYsNjAuMTg2LDY0LjE1NmMxLjk4NC0wLjE3OSw2LjQwNi0yLjU5OSw3LjMxMi01LjEwN0M2OC4zOTgsNTYuNTM3LDY4LjM5OCw1NC4zODYsNjguMTI5LDUzLjkzOHoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" width="50" height="20" />
       </div>
     </a>
 </div>

If you want social buttons to appear immediate below the content, paste the code immediate below this line of code

          <?php echo $this->get( 'post_amp_content' ); // amphtml content; no kses ?>

Now if you look at your AMP page, you should see neat and mobile-friendly social buttons immediate after your content, but the only missing one from the icons will be WhatsApp button, that is because you need to add a piece of CSS to your style.php file.

Copy this piece of CSS to your style.php file of your AMP theme. If you have already customized your AMP theme, it is in your child theme folder.

.whatsapp-button {
       width: 50px;
       height: 20px;
       display: inline-block;
       background: #5cbe4a;
       padding: 4px 0px;
       position: relative;
       top: -4px;
       text-align: center
}

Now you should see all social icons on your AMP page but the catch is Facebook button doesn’t function properly, that is because you need to replace this data-param-app_id=”YOUR FACEBOOK APP ID” with your Facebook APP ID that can be obtained from here.

I hope you find this article really helpful, please share this article on your social sites, forum accounts or link back. Follow us on Facebook and Twitter

You might also like

Sharing is caring

You may also like...