Topics

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

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! 
Blogr-AMP Blogger AMP HTML TemplateRated 5/5 based on 98 reviewsAdd 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 Accelerated Mobile Pages HTML provides useful components to create & easily share a web page or blog posts to most favorable social medi....

Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Working to get connected...

Ooops! We're having trouble connecting. Please refresh your page or contact us...

Code Parser

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

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


Working...

Ooops! We're having trouble connecting...