Responsive Social Sharing Buttons for AMP Blogger

Now I also share responsive AMP social sharing buttons for Blogger AMP HTML.Responsive AMP social sharing button is quite complete ie the share button for Facebook, Google+, Twitter, Pinterest, LinkedIn, Tumblr, Whatsapp, SMS, and Email.

Responsive social sharing button for AMP HTML I have tried and already applied to one of the templates.

If you want to try installing it yourself, please follow the steps below.

Please save the js amp-social-share code above </ head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
</b:if>

Then please save the following CSS code.

 /* Social Share */
.sharethis{position:relative;margin:20px 0;padding:0;font-size:0}
.sharethis .tw,.sharethis .gp,.sharethis .pi,.sharethis .fb,.sharethis .li,.sharethis .wa,.sharethis .ta,.sharethis .sms,.sharethis .em{width:11.111111%;height:30px;line-height:30px;margin:0;text-align:center;display:inline-block;float:left}
.sharethis amp-social-share{vertical-align:middle}
.sharethis .tw{background-color: #55acee;}
.sharethis .gp{background-color: #dc4e41;}
.sharethis .fb{background-color: #3b5998;}
.sharethis .pi{background-color: #bd081c;}
.sharethis .li{background-color: #0077b5;}
.sharethis .wa{background-color: #25d366;}
.sharethis .ta{background-color: #3c5a77;}
.sharethis .sms{background-color: #ca2b63;}
.sharethis .em{background-color: #000;} 

Please find the following code

<b:includable id='shareButtons' var='post'>
............
............
............
</b:includable>

Then save the following code below the code (below code </ b: includable>)

<b:includable id='share-tool' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharethis'>
<div class='tw'>
<amp-social-share height='20' type='twitter' width='20'/>
  </div>
<div class='gp'>
<amp-social-share height='25' type='gplus' width='25'/>
  </div>
<div class='fb'>
<amp-social-share data-param-app_id='254325784911610' height='20' type='facebook' width='20'/>
  </div>
<div class='pi'>
<amp-social-share expr:data-param-media='data:post.firstImageUrl' height='25' type='pinterest' width='25'/>
  </div>
<div class='li'>
<amp-social-share height='25' type='linkedin' width='25'/>
  </div>
<div class='ta'>
<amp-social-share height='20' type='tumblr' width='20'/>
  </div>
<div class='wa'>
<amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + data:post.url' height='15' type='whatsapp' width='15'/>
</div>
<div class='sms'>
<amp-social-share height='15' type='sms' width='15'/>
</div>
<div class='em'>
<amp-social-share height='25' type='email' width='25'/>
</div>
<div class='clear'/>
</div>
</b:if>
</b:includable>

Then please save the code below where you want to display the share button.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='share-tool'/>
</b:if>

How easy is not it? Good luck....