Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.

Add Whatsapp amp-social-share Component for AMP Integrated Blogger Template

Accelerated Mobile Pages HTML provides useful components to create & easily share a web page or blog posts to most favorable social media websites/apps.

By adding an AMP social share tag <amp-social-share/> & providing its type, Blogger users can easily include social share buttons right into their Blogger template HTML codes.

Blogger AMP Template use Whatsapp share button install

Below are the list of pre-configured amp-social-share AMP HTML tags/elements where Blogger template can apply:-

Pre-Configured amp-social-share Providers

  • Email <amp-social-share type="email"/>
  • Facebook <amp-social-share type="facebook"/>
  • Twitter <amp-social-share type="twitter"/>
  • G+ <amp-social-share type="googleplus"/>
  • LinkedIn <amp-social-share type="linkedin"/>
  • Pinterset <amp-social-share type="pinterest"/>
  • Tumblr <amp-social-share type="tumblr"/> 

Non Pre-configured amp-social-share Providers:-

  • WhatsApp <amp-social-share type="whatsapp"/>

The difference between pre-configured & non-pre-configured amp-social-share providers is that for non pre-configured providers, users needs to include a data-share-endpoint in the markup to determine to where the share will be pointing to. In addition, users can send custom text when sharing.

Detail information at AMP Project webpage: Use amp-social-share component & tags

How to Add WhatsApp amp-social-share on Blogger Template.


First check if your amp-social-share component is included in your Blogger AMP HTML integrated template.

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

If it is available, proceed below. If it is not, copy & paste above AMP component within your Blogger template <head> ... </head> tag.

Now copy below Whatsapp amp-social-share tag anywhere within your Blogger template <body> ... </body> tag.

<amp-social-share type='whatsapp' data-share-endpoint='whatsapp://send' expr:data-param-text='data:blog.pageTitle + &quot; - &quot; + data:blog.canonicalUrl'/>

Whereas:-

  • data:blog.pageTitle will output the post/page title
  • data:blog.canonicalUrl will output the post/page URL

This will automate Whatsapp amp-social-share tag & optimize to use the current blog URL & blog page title as its text when sharing.

Click Save Template & preview your blog pages.

If you find this learning tutorial useful to include Whatsapp AMP social share component & tag, please share below or leave a comment to discuss future tutorial releases ;)

For Blogr-AMP Blogger template with AMP HTML integration, these amp-social-share buttons already come pre-installed, optimised & ready to use. Find out more at Blogr-AMP documentation page or Contact Us for instant install at your Blogger blog - valid AMP pages without ever editing your earlier published posts! 

Have a comment/question? Add it here... expand_more

Comment on Google+ expand_more

Comment on Facebook expand_more

Have a code snippet to share? Format RAW codes here... expand_more

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Blogr-AMP Blogger AMP HTML Template
Rated 5/5 based on 98 reviews
Add Whatsapp amp-social-share on Blogger integrated Blogger template use AMP HTML component & parameters to extract blog page URL & post titles automatically for data-param-text attribute.
Blogr-AMP: Add Whatsapp amp-social-share Component for AMP Integrated Blogger Template
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Add Whatsapp amp-social-share Component for AMP Integrated Blogger Template .

MOBILE TEST by GOOGLE launch VALIDATE AMP launch
mail