Responsive AMP Social Sharing Button

 2017-09-15 /  Dimas Lanjaka Kumala Indra

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, Adding BBM and Whatsapp Here Tutorial.
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 == "item"’> <script async=‘async’ custom-element=‘amp-social-share’ src=‘https://cdn.ampproject.org/v0/amp-social-share-0.1.js’/> </b:if>

Then add this Css into your Template.

/ 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;}

Then Search this code:

<b:includable id=‘shareButtons’ var=‘post’>
…
…
…
</b:includable>

then save this code below </b:includable>

<b:includable id=‘share-tool’ var=‘post’>
<b:if cond=‘data:blog.pageType == "item"’>
<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=’"Check out this article: " + data:post.title + " - " + 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>

So article about how to create responsive social sharing button on the amp / Responsive Amp Social Sharing Button, hopefully this article useful

Responsive AMP Social Sharing Button
PermaLink: https://www.webmanajemen.com/2017/09/responsive-amp-social-sharing-button.html
Google Rich Snippets | Schema Markup Validator | Google Pagespeed Insight