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.
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 + " - " + data:blog.canonicalUrl'/>
Whereas:-
data:blog.pageTitlewill output the post/page titledata:blog.canonicalUrlwill 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 Blogger template with AMP HTML integration, these amp-social-share buttons already come pre-installed, optimised & ready to use. Find out more at documentation page or Contact Us for instant install at your Blogger blog - valid AMP pages without ever editing your earlier published posts!